# Wie man Abzeichen farblich kennzeichnet

## Übersicht

In diesem Tutorial passen wir das Erscheinungsbild des `StageName` Felds in unserer Avonni Data Table an. Wir ändern die Hintergrundfarben der `StageName` Werte, um sie visuell zu unterscheiden und die Lesbarkeit sowie die Datenvisualisierung zu verbessern.&#x20;

## Geführtes Tutorial

#### **. Erstellen eines Formel-Felds** <a href="#id-1.-create-a-formula-field" id="id-1.-create-a-formula-field"></a>

* Navigieren Sie zum Objekt-Manager in den Salesforce-Einstellungen.
* Suchen und wählen Sie das Objekt aus, in dem Sie die Formel erstellen möchten, z. B. Opportunity.
* Klicken Sie auf „**`Felder & Beziehungen`**“ und dann auf „**`Neues Feld`**“.
* Wählen Sie „**`Formel`**“ als Datentyp und fahren Sie fort.

Geben Sie die folgende Formel ein:

Kopieren

```
IF(ISPICKVAL(StageName,'Closed Won'), 'success',
   IF(ISPICKVAL(StageName,'Closed Lost'), 'error', 'base'))
```

**Erklärung der Formel:**

Diese Formel prüft das Feld "StageName". Wenn es "Closed Won" ist, gibt die Formel "success" (grünes Abzeichen) zurück. Wenn es "Closed Lost" ist, gibt sie "error" (rotes Abzeichen) zurück. Für alle anderen Phasen gibt sie "base" (graues Abzeichen) zurück.

Das Lightning Design System definiert Abzeichenfarben vor und diese können nicht angepasst werden. Die verfügbaren Optionen sind:

* **base:** Grau (Standard)
* **brand:** Blau
* **inverse:** Weiß
* **alt-inverse:** Transparent mit dunklem Rand
* **success:** Grün
* **info:** Dunkelgrau
* **error:** Rot
* **warning:** Gelb
* **offline:** Schwarz

#### **2. Fügen Sie die Avonni Data Table-Komponente hinzu** <a href="#id-2.-add-the-avonni-data-table-component" id="id-2.-add-the-avonni-data-table-component"></a>

* Öffnen Sie das Bildschirmelement, in das Sie die Avonni Data Table-Komponente einfügen möchten.

#### **3. Passen Sie die Data Table an** <a href="#id-3.-customize-the-data-table" id="id-3.-customize-the-data-table"></a>

* Wenn die Avonni Data Table-Komponente ausgewählt ist, öffnen Sie den Komponenten-Builder.
* Damit können Sie die Data Table visuell entsprechend Ihren Anforderungen anpassen.

![](https://docs.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252F6fhi2dkReKjhhdhI1Nrn%252F2023-11-02_11-59-09.png%3Falt%3Dmedia%26token%3Dcc25dd00-cfd8-4079-bc4c-717a38153e03\&width=768\&dpr=4\&quality=100\&sign=df5ecb72\&sv=2)

#### **4. Konfigurieren Sie die Datenquelle** <a href="#id-4.-configure-the-data-source" id="id-4.-configure-the-data-source"></a>

* Gehen Sie im Komponenten-Builder zum Abschnitt „Datenquelle“.
* Konfigurieren Sie die Datenquelle so, dass sie auf das Objekt zeigt, das Ihr Formel-Feld enthält, z. B. Opportunity.

Wenn Sie die Variable Data Source verwenden, richten Sie zuerst das Element 'Get Records' ein. Dieser Schritt ist entscheidend, um sicherzustellen, dass Salesforce alle erforderlichen Informationen aus Ihrem Objekt abruft.

* Stellen Sie sicher, dass die Datenquelle korrekt eingerichtet ist, um die notwendigen Datensätze abzurufen.

![](https://docs.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FSUaYf4Xj1d0Uzek1IxMO%252F2023-11-02_12-00-05.png%3Falt%3Dmedia%26token%3D68804381-ef52-476b-99b6-0a51fc10bbc8\&width=768\&dpr=4\&quality=100\&sign=2a10e49c\&sv=2)

#### **5. Fügen Sie die Badge-Spalte hinzu** <a href="#id-5.-add-the-badge-column" id="id-5.-add-the-badge-column"></a>

* Rufen Sie den Abschnitt „Spalten“ auf, und ziehen Sie dann die gewünschten Spalten aus dem linken Bereich in den Avonni Data Table-Bereich. Stellen Sie sicher, dass Sie die Spalte einschließen, die das Abzeichen anzeigen soll.
* Klicken Sie auf die Spalte, in der das Abzeichen angezeigt werden soll.

![](https://docs.avonnicomponents.com/~gitbook/image?url=https%3A%2F%2F27923732-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252F1FUd4apB9YHgCEMUFbVb%252Fuploads%252FCi4iPgqYuCnGNHa2apso%252F2023-11-02_12-11-52.png%3Falt%3Dmedia%26token%3D85b3c8d5-5c90-4958-b291-78a8effdf442\&width=768\&dpr=4\&quality=100\&sign=97d6cfd6\&sv=2)

* Wählen Sie für den Typ **`Badge`**.
* Bezüglich des Abschnitts Typ-Attribut
  * Aktivieren Sie den Schalter für den Feldnamen
  * Wählen Sie das in [Schritt 1](https://docs.avonnicomponents.com/flow/tutorials/components/data-table/tips-and-tricks/customizing-the-badge-color-using-a-formula#1.-create-a-formula-field).

Das war's! Ihre Datentabelle zeigt jetzt farbige Abzeichen basierend auf der Phase jeder Opportunity an.

### Abschluss <a href="#wrapping-up" id="wrapping-up"></a>

Nun sollte Ihre Avonni Data Table den **`StageName`** Status mit einem farbigen Abzeichen entsprechend der in dem Formel-Feld angegebenen Bedingung anzeigen. „Closed Won“-Phasen zeigen ein grünes Abzeichen, „Closed Lost“-Phasen ein rotes Abzeichen und alle anderen Phasen ein neutrales Abzeichen. Diese Anpassung ermöglicht eine visuell intuitivere Darstellung Ihrer Daten.

<br>

Diese Schritte zeigen Ihnen, wie Sie farbige Abzeichen zu Ihrer Salesforce-Datentabelle hinzufügen. Zuerst erstellen Sie eine Formel, die je nach Phase einer Opportunity verschiedene Farben zuweist (wie „Closed Won“ oder „Closed Lost“). Anschließend fügen Sie einen Data Table zu Ihrem Salesforce-Bildschirm hinzu und konfigurieren ihn so, dass Ihre Opportunity-Daten angezeigt werden. Schließlich wählen Sie für die Spalte mit Ihrer Formel die Badge-Option aus, damit diese farbigen Abzeichen in Ihrer Tabelle erscheinen.

{% stepper %}
{% step %}

### **Erstellen eines Formel-Felds** <a href="#id-1.-create-a-formula-field" id="id-1.-create-a-formula-field"></a>

* Navigieren Sie zum Objekt-Manager in den Salesforce-Einstellungen.
* Suchen und wählen Sie das Objekt aus, in dem Sie die Formel erstellen möchten, z. B. Opportunity.
* Klicken Sie auf „**`Felder & Beziehungen`**“ und dann auf „**`Neues Feld`**“.
* Wählen Sie „**`Formel`**“ als Datentyp und fahren Sie fort.
* Geben Sie die Formel ein, ähnlich wie diese (passen Sie die Formel an Ihre speziellen Anforderungen an)

```
IF(ISPICKVAL(StageName,'Closed Won'), 'success',
   IF(ISPICKVAL(StageName,'Closed Lost'), 'error', 'base'))
```

{% endstep %}

{% step %}

### **Fügen Sie die Avonni Data Table-Komponente hinzu** <a href="#id-2.-add-the-avonni-data-table-component" id="id-2.-add-the-avonni-data-table-component"></a>

Ziehen Sie die Avonni **Datentabelle** in Ihr Dynamic Component-Layout. Wählen Sie sie aus und konfigurieren Sie dann ihr **Datenquelle** mithilfe einer **Avonni-Abfrage** um die erforderlichen Salesforce-Datensätze und -Felder abzurufen. Nachdem Sie die Abfrage eingerichtet haben, gehen Sie zum **Konfigurieren Sie abschließend die** Abschnitt im Eigenschaftenfenster, um Spalten hinzuzufügen, diese den richtigen **Quellfelder** aus Ihrer Abfrage zuzuordnen und deren Einstellungen anzupassen.
{% endstep %}

{% step %}

### **Fügen Sie die Badge-Spalte hinzu** <a href="#id-5.-add-the-badge-column" id="id-5.-add-the-badge-column"></a>

* Klicken Sie auf die Schaltfläche „Spalten hinzufügen“ und wählen Sie dann das Feld aus, das Sie in dieser Spalte anzeigen möchten..

* Klicken Sie auf die Spalte, in der das Abzeichen angezeigt werden soll.

* Wählen Sie für den Typ **`Badge`**.

* Bezüglich des Abschnitts Typ-Attribut
  * Aktivieren Sie den Schalter für den Feldnamen
  * Wählen Sie das in [Schritt 1](#id-1.-create-a-formula-field-2).

Das war's! Ihre Datentabelle zeigt jetzt farbige Abzeichen basierend auf der Phase jeder Opportunity an.
{% endstep %}
{% endstepper %}

<figure><img src="https://2235891237-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FODPvvv7Cx9Z9RECLn3oV%2Fuploads%2FLr22ZL2vcZAiViyWyAG4%2F2025-04-10_20-40-38.png?alt=media&#x26;token=7a57bbdf-d2c1-405d-9d19-d0ca4b09c132" alt=""><figcaption></figcaption></figure>

### Abschluss <a href="#wrapping-up" id="wrapping-up"></a>

Nun sollte Ihre Avonni Data Table den **`StageName`** Status mit einem farbigen Abzeichen entsprechend der in dem Formel-Feld angegebenen Bedingung anzeigen. „Closed Won“-Phasen zeigen ein grünes Abzeichen, „Closed Lost“-Phasen ein rotes Abzeichen und alle anderen Phasen ein neutrales Abzeichen. Diese Anpassung ermöglicht eine visuell intuitivere Darstellung Ihrer Daten.
