YouTube ChannelSchedule a CallSubscribe for Updates

Wie man Datentabellenzellen bedingt einfärbt

Dieses Tutorial erklärt, wie Sie das Erscheinungsbild von Zellen innerhalb einer Avonni Data Table in Avonni Dynamic Components. Sie erfahren, wie Sie einen einheitlichen Stil auf eine gesamte Spalte anwenden oder eine leistungsstarke bedingte Formatierung implementieren, bei der sich das Erscheinungsbild einer Zelle (z. B. ihre Hintergrundfarbe) basierend auf den Daten in ihrer Zeile ändert.

Kernkonzept: Das SLDS Cell Class Attribut

Der Schlüssel zur gesamten Zellformatierung in der Avonni Data Table ist das SLDS Cell Class Attribut. Es befindet sich in den Konfigurationseinstellungen jeder Spalte.

  1. Wählen Sie Ihre Avonni Datentabelle Komponente auf der Leinwand aus.

  2. Gehen Sie im Eigenschaftenbereich zum Konfigurieren Sie abschließend die Abschnitt.

  3. Wählen Sie die bestimmte Spalte, die Sie formatieren möchten.

  4. Navigieren Sie zu den Zellattributen Einstellungen für diese Spalte.

  5. Suchen Sie das SLDS Cell Class Eingabefeld.

Dieses Feld akzeptiert Standard-SLDS-(Salesforce Lightning Design System-)Klassenamen, mit denen Sie Textfarbe, Hintergrundfarbe, Schriftstärke und mehr steuern können.

Methode 1: Statische Formatierung anwenden (gleicher Stil für alle Zeilen)

Verwenden Sie diese einfache Methode, wenn jede Zelle in einer bestimmten Spalte denselben, unveränderlichen Stil haben soll.

Schritte:

  1. Navigieren Sie zu den SLDS Cell Class Attribut für Ihre gewünschte Spalte (wie oben beschrieben).

  2. Direkt Geben Sie die SLDS-Klassennamen ein, die Sie in das Feld anwenden möchten. Trennen Sie mehrere Klassen durch ein Leerzeichen.

  • Beispiel 1: Um allen Text in der Spalte grün und fett zu machen, geben Sie ein: slds-text-color_success slds-font-weight_bold

  • Beispiel 2: Um allen Zellen einen hellgrauen Hintergrund zu geben und den Text zu kapitalisieren, geben Sie ein: slds-theme_shade slds-text-title_caps

Die Formatierung wird konsistent auf alle Zeilen in dieser Spalte angewendet.

Methode 2: Bedingte Formatierung (Stil basierend auf Zeilendaten)

Dies ist eine leistungsfähigere Technik, bei der sich das Erscheinungsbild einer Zelle dynamisch ändert, basierend auf den Daten in ihrer Zeile. Sie eignet sich hervorragend, um Status, Priorität oder Risikoniveaus visuell darzustellen.

Der einfachste und am besten wartbare Weg, dies zu erreichen, besteht darin, das SLDS Cell Class Attribut direkt auf ein Salesforce-Formelfeld.

Schritt 2.1: Erstellen Sie ein Salesforce-Formelfeld

Erstellen Sie zunächst ein Formelfeld auf dem Salesforce-Objekt, das Ihre Datentabelle anzeigt (z. B. beim Opportunity-, Case- oder Account-Objekt). Dieses Formular bestimmt, welche SLDS-Klassen basierend auf anderen Feldern im Datensatz verwendet werden sollen.

  1. In Salesforce Einrichtung, navigieren Sie zu dem Objekt, das Sie verwenden (z. B. Opportunity).

  2. Erstellen Sie ein neues Formelfeld.

  3. Setzen Sie die Formelrückgabetyp auf Text.

  4. Verwenden Sie im Formeleditor Logik (wie eine CASE() oder IF() Anweisung), um die gewünschte SLDS-Klassenzeichenfolge auszugeben.

Beispiel-Formel für ein Opportunity-Objekt (Feldname: StageStyle):

CASE(
  StageName,
  "Closed Won", "slds-theme_shade slds-theme_success",
  "Closed Lost", "slds-theme_shade slds-theme_error slds-text-color_inverse",
  "Needs Analysis", "slds-theme_shade slds-theme_warning",
  "Prospecting", "slds-theme_shade",
  ""
)

Diese Formel prüft das StageName Feld und gibt für jede Phase eine andere Menge an SLDS-Klassen zurück, was zu unterschiedlichen Hintergrund-/Textfarben führt.

  1. Speichern Sie Ihr neues Formelfeld.

Schritt 2.2: Konfigurieren Sie die Datentabelle

  1. Aktualisieren Sie Ihre Abfrage: Gehen Sie in Ihrer Dynamischen Komponente zum Avonni Query Data Source für Ihre Datentabelle. Wichtig ist, dass Sie Ihr neues Salesforce-Formelfeld hinzufügen (z. B., StageStyle__c) zur Liste der abgefragten Felder.

  2. Ordnen Sie die Spalte zu: Gehen Sie in den Eigenschaften der Datentabelle zum Konfigurieren Sie abschließend die Abschnitt und wählen Sie die Spalte aus, die Sie formatieren möchten (z. B. die StageName Spalte).

  3. Binden Sie die SLDS Cell Class:

    • Navigieren Sie zu den Zellattributen für diese Spalte.

    • Suchen Sie das SLDS Cell Class Eigenschaft an.

    • Aktivieren Sie die Option Feldname umschalten.

    • Wählen Sie Ihr neues Salesforce-Formelfeld aus der Liste der verfügbaren Felder aus (z. B. StageStyle__c).

Ergebnis: Wenn die Komponente geladen wird, bewertet die Datentabelle das StageStyle__c Formelfeld für jede Zeile. Sie wendet dann die entsprechenden SLDS-Klassen an und färbt so automatisch jede Zelle basierend auf der Phase der Opportunity.

Praktische SLDS-Klassen für die Zellformatierung

Hier sind einige Standard-SLDS-Klassen, die Sie in Ihren Formeln oder für statische Formatierungen verwenden können (kombinieren Sie sie mit Leerzeichen):

  • Hintergründe: slds-theme_success (grün), slds-theme_error (rot), slds-theme_warning (gelb), slds-theme_info (blau), slds-theme_shade (hellgrau - eine gute Basis).

  • Textfarbe: slds-text-color_success (grün), slds-text-color_error (rot), slds-text-color_warning (dunkles Gelb), slds-text-color_inverse (weiß - für dunkle Hintergründe).

  • Textstil: slds-text-title_caps (GROSSBUCHSTABEN), slds-font-weight_bold (fett), slds-font-style_italic (kursiv).

Fazit

Das SLDS Cell Class Das Attribut bietet eine flexible Möglichkeit, die Datenpräsentation in Ihrer Avonni Data Table zu verbessern. Sie können einfache statische Formatierungen anwenden oder, noch leistungsfähiger, Salesforce-Formelfelder verwenden, um datengesteuerte bedingte Formatierungen zu implementieren und wichtige Informationen für Ihre Benutzer hervorzuheben.

Zuletzt aktualisiert

War das hilfreich?