Robert Richter
IT
 - 13. Mai 2020

Responsive Tabellen für Lightning Applikationen

Vielleicht haben Sie schon einmal versucht, sich eine Tabelle in einer Lightning Applikation mobil anzeigen zu lassen und dabei ist Ihnen aufgefallen, dass diese auf dem Handy nicht so schön aussieht, wie am Desktop. Welche Möglichkeiten es gibt, Tabellen mobil besser anzeigen zu lassen, erklärt dieser Artikel.

Horizontales Scrollen

Die vermutlich einfachste Möglichkeit, eine über den Rand des Bildschirms hinausgehende Tabelle anzeigbar zu machen, ist das Setzen des CSS-Tags „overflow:auto“, welcher eine horizontale Scrollleiste bei zu breitem Content verursacht. Dieses Tag lässt sich für die ganze Seite setzen, was allerdings zu unschönem Verhalten des Hintergrunds führen kann.

Eine elegantere Lösung ist es, die Tabelle in einem div-Container zu halten, innerhalb dessen man nach rechts und links scrollen kann, wenn die Tabelle zu breit ist.

Lightning-Tabelle mit vertikaler Scrolleiste

Der Vorteil dieser Methode ist es, dass alle Spalten angezeigt werden können. Der Nachteil ist, dass ein horizontales Scrollen bei Mobilgeräten unübersichtlich werden kann, da nicht alle Spalten gleichzeitig sichtbar sind.

Reduzieren der Spalten

Eine weitere Möglichkeit ist es, die Spalten auf kleinen Geräten zu reduzieren, da es mit CSS möglich ist, das „display:none“-Tag zu setzen, wenn die Bildschirmgröße einen gewissen Wert unterschreitet. Den weniger wichtigen Spalten könnte beispielsweise die CSS-Klasse „hiddenOnSmall“ zugeordnet werden, welche folgenden Inhalt hat:

@media (max-width: 767px) {                  
   .hiddenOnSmall {
      display: none;
   }
}

Wenn man diese Klasse beispielsweise auf die letzten vier Spalten anwendet, sähe die Tabelle auf kleinen Bildschirmen so aus:

versteckte Spalten einer Lightning Tabelle

Lightning-Tabelle mit reduzierten Spalten

Der Nachteil dieser Methode ist, dass mobil nicht alle Spalten angezeigt werden.  Der Vorteil ist hingegen, dass horizontales Scrollen vermieden wird.

Whitepaper: Salesforce mobil nutzen

Welche Möglichkeiten der mobilen Nutzung des Salesforce CRM-Systems gibt es?

Salesforce mobil nutzen

Anpassen des Tabellen-Layouts

Die dritte Möglichkeit ist zwar die Aufwendigste, dafür ermöglicht sie aber das Anzeigen von allen Spalten, ohne dabei die Übersichtlichkeit durch horizontales Scrollen einzuschränken.

Hierfür werden Tabellen auf Mobilgeräten nicht, wie am Desktop, mit den Spalten nebeneinander, sondern mit den Spalten übereinander angezeigt. Die verschiedenen Einträge können durch vertikale Striche visuell voneinander getrennt sein.

mobile Lightning-Tabelle

Für diese Methode ist es notwendig, eine CSS-Datei einzubinden, welche bei Unterschreiten einer gewissen Bildschirmgröße die einzelnen Spalten der Tabelle übereinander anzeigt. Diese CSS-Klasse muss dann auf die Tabelle angewendet werden. Außerdem benötigen die einzelnen <td>-Elemente jeweils einen Tag (in diesem Beispiel data-th), welcher den Namen der zugehörigen Spalten-Überschrift angibt.

Salesforce Potenzialworkshop

„Durch bisher ungenutzte Automatisierungsmöglichkeiten konnte die Bearbeitungszeit von Kundenanfragen um ca. 30 % verkürzt werden." Mit unserem Potenzialworkshop können auch Sie solche Aussagen treffen!

Hier ist ein Beispiel für eine CSS-Klasse, welche Tabellen in der beschriebenen Weise modifiziert:


table.mindsquare-table {
  margin: 0 auto;
  border-collapse: collapse;
  font-family: Agenda-Light, sans-serif;
  font-weight: 100;
  text-rendering: optimizeLegibility;
  border-radius: 5px;
}
table.mindsquare-table caption {
  margin: 1rem;
}
table.mindsquare-table thead th {
  font-weight: 600;
  background-color: #F2F3F3;
}
table.mindsquare-table thead th, table.mindsquare-table tbody td {
  padding: .4rem;
}
table.mindsquare-table tbody td {
  padding: .4rem;
}
table.mindsquare-table tbody tr:not(:last-child) {
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
table.mindsquare-table tbody tr:hover{
  background-color:#FAFAF9;
  cursor:pointer;
}
table.mindsquare-table tbody tr.selected{
  background-color:#c1c1c1!important;
}

@media screen and (max-width: 600px) {
  table.mindsquare-table caption { background-image: none; }
  table.mindsquare-table thead { display: none; }
  table.mindsquare-table tbody td {
    display: block; padding: .2rem;
}
table.mindsquare-table tbody td:before {
  content: attr(data-th);
  font-weight: bold;
  display: inline-block;
  width: 6rem;
}
}

Die Verwendung der CSS-Klasse ist folgendermaßen möglich:


<table class="mindsquare-table mindsquare-table" >
  <thead>
    <tr class="slds-text-title_caps">
      <th><div  title="Opportunity Name">Opportunity Name</div></th>
      <th><div  title="Account Name">Account Name</div></th>
      <th><div  title="Close Date">Close Date</div></th>
      <th><div  title="Stage">Stage</div></th>
      <th><div  title="Confidence">Confidence</div></th>
      <th><div  title="Amount">Amount</div></th>
      <th><div  title="Contact">Contact</div></th>
    </tr>
  </thead>
  <tbody>
    <tr><td style="" data-th="Opportunity Name"><a href="javascript:void(0);">Cloudhub</a></td>
      <td data-th="Account Name">Cloudhub</td>
      <td data-th="Close Date">4/14/2015</td>
      <td data-th="Prospecting">Prospecting</td>
      <td data-th="Confidence">20%</td>
      <td data-th="Amount">$25k</td>
      <td data-th="Contact"><a href="javascript:void(0);">jrogers@cloudhub.com</a></td>
    </tr>
    <tr>
      <td style="" data-th="Opportunity Name"><a href="javascript:void(0);">Cloudhub + Anypoint Connectors</a></td>
      <td data-th="Account Name">Cloudhub</td>
      <td data-th="Close Date">4/14/2015</td>
      <td data-th="Prospecting">Prospecting</td>
      <td data-th="Confidence">20%</td>
      <td data-th="Amount">$25k</td>
      <td data-th="Contact"><a href="javascript:void(0);">jrogers@cloudhub.com</a></td>
    </tr>
  </tbody>
</table>

Fazit

Ich hoffe ich konnte Ihnen in diesem Blogbeitrag einen Überblick über die verschiedenen Möglichkeiten geben, wie Sie Tabellen in einer Lightning Applikation anzeigen lassen können. Falls Sie weitere Fragen zu responsiven Tabellen für Salesforce Lightning Applikationen haben, kontaktieren Sie mich gerne.

Robert Richter

Robert Richter

Mein Name ist Robert Richter und ich bin begeisterter Salesforce Consultant bei mindsquare. Wie meine Kollegen habe ich mein Hobby zum Beruf gemacht.

Sie haben Fragen? Kontaktieren Sie mich!



Das könnte Sie auch interessieren

Wer seine Salesforce-Org jenseits der Standard-Konfigurationsoptionen anpassen möchte, kommt um eigens programmierte Lightning Components kaum herum. Nun lässt sich die UI von Lightning Components mithilfe des Salesforce Lightning Design System sehr gut darstellen, sodass dieses an die User Experience von […]

weiterlesen

Salesforce ist auch 2020 einer der Top-CRM Anbieter und sehr nutzerfreundlich. Wollen Sie sich Ihr Leben mit Salesforce noch weiter vereinfachen? Dann aufgepasst, ich habe mich mit den beliebtesten Erweiterungen beschäftigt und hier eine Liste mit den Top Salesforce Erweiterungen […]

weiterlesen

Was würden Sie oder Ihre Mitarbeiter unternehmen, wenn Sie Ihre Salesforce-Daten wiederherstellen müssen? Würden Sie das über den kostenpflichtigen Service von Salesforce abwickeln? Das ist bald nicht mehr möglich, denn ab dem 01.08.2020 stellt Salesforce genau diese Dienstleistung ein. Nun […]

weiterlesen

Schreiben Sie einen Kommentar

Bitte füllen Sie alle mit * gekennzeichneten Felder aus. Ihre E-Mail Adresse wird nicht veröffentlicht.





Angebot anfordern
Preisliste herunterladen
Expert Session
Support