Dynamisch wechseln eines Symbols in Jitterbit App Builder

Übersicht

Ein Symbol oder Bild auf einer Seite ist normalerweise zur Entwurfszeit festgelegt, aber es lässt sich auch dynamisch basierend auf den zugrunde liegenden Daten ändern. Beispielsweise könnte man auf einer Seite, die die zu einem Event eingeladenen Personen anzeigt, ein Daumen-hoch- oder Daumen-runter-Symbol anzeigen, je nachdem, ob die Person teilnimmt.

Dynamische Symbole basieren auf dem Image-Steuerelement: App Builder löst sowohl seine integrierten Symbolsätze als auch alle von Ihnen hochgeladenen Bilder über dieselbe einheitliche Bildbibliothek auf. Daher kann eine Business-Objekt-Spalte oder ein List-Steuerelement auf ein integriertes Symbol anhand seines Namens oder auf ein beliebiges Bild anhand seiner relativen URL-GUID verweisen. Auf dieser Seite werden zwei Techniken zur Auswahl eines Symbols basierend auf Daten beschrieben: eine IIF-Anweisung, die sich am besten für zwei oder drei feste Optionen eignet, und ein List-Steuerelement, das durch eine Datenspalte gesteuert wird und sich auf beliebig viele Optionen skalieren lässt.

Eine Liste der Symbolsätze, die mit App Builder ausgeliefert werden, einschließlich Font Awesome, finden Sie unter Symbolkategorien. Um die benannten Symbole in der Font Awesome-Bilbliothek zu durchsuchen, besuchen Sie fontawesome.com.

Wenn Sie App Builder 4.67 oder früher verwenden, lesen Sie stattdessen App Builder 4.67 und früher.

Diese Seite behandelt folgende Themen:

• Die relative URL-GUID eines Bildes nachschlagen
  Beide unten beschriebenen Techniken verweisen auf ein Symbol anhand dieses Werts.

• Eine IIF-Anweisung verwenden
  Ein schneller Ansatz, der sich am besten für zwei oder drei feste Optionen eignet.

• Ein List-Steuerelement mit einer Symbolspalte verwenden
  Ein besser skalierbarer Ansatz, der durch eine Datenspalte statt durch eine Formel gesteuert wird.

Die relative URL-GUID eines Bildes nachschlagen

Beide auf dieser Seite beschriebenen Techniken können auf ein integriertes Symbol direkt anhand seines Namens verweisen (siehe die folgenden Beispiele). Um stattdessen auf ein hochgeladenes Bild zu verweisen oder um zu vermeiden, den genauen Namen des Symbols einzugeben, verwenden Sie seine relative URL-GUID – einen eindeutigen Bezeichner für einen bestimmten Datensatz in der Bildbibliothek. So schlagen Sie diesen Wert für ein bereits in der Bilbliothek befindliches Bild nach:

1. Öffnen Sie das Bild in App Builder.

2. Kopieren Sie den Wert aus dem Feld Relative URL, das nach .../image/ angezeigt wird.

   

Eine IIF-Anweisung verwenden

Bei einem Status mit nur zwei oder drei festen Optionen können Sie eine IIF-Anweisung in Ihr Business-Objekt einfügen, um zu bestimmen, welches Symbol angezeigt werden soll. Verweisen Sie dabei auf jede Option anhand ihres Namens oder ihrer relativen URL-GUID. Um beispielsweise die Teilnahme an einem Event zu kennzeichnen, können Sie einen Ausdruck wie IIF(Status = Accept, 'thumbs-up', 'thumbs-down') verwenden und dabei direkt den Namen jedes integrierten Symbols nutzen. Um stattdessen auf ein hochgeladenes Bild zu verweisen, ersetzen Sie den Namen durch seine oben nachgeschlagene relative URL-GUID.

Dieser Ansatz funktioniert gut für ein Paar fester Optionen, ist aber nicht skalierbar. Das Hinzufügen eines dritten Status – beispielsweise eines Fragezeichen-Symbols für eine Einladung, die noch nicht angenommen oder abgelehnt wurde – bedeutet, eine größere und kompliziertere IIF-Anweisung zu schreiben. Jeder zusätzliche Status erfordert mehr Logik zur Wartung. Bei einem Status mit mehr Optionen oder einem, der im Laufe der Zeit wachsen kann, verwenden Sie stattdessen ein List-Steuerelement mit einer Symbolspalte.

Ein List-Steuerelement mit einer Symbolspalte verwenden

Ein List-Steuerelement wird normalerweise verwendet, um eine Liste von Textwerten anzuzeigen, kann aber auch ein Bild neben dem Text oder nur das Bild allein anzeigen. Da das Symbol aus einer Spalte der zugrunde liegenden Tabelle stammt und nicht aus einer Logik, die Sie verwalten, skaliert diese Technik auf beliebig viele Status: Das Hinzufügen einer neuen Option bedeutet nur, eine neue Zeile hinzuzufügen, nicht eine IIF-Anweisung umzuschreiben.

Um auf diese Weise ein dynamisches Symbol anzuzeigen, benötigen Sie eine Spalte, die die relative URL-GUID jeder Zeile speichert, damit das List-Steuerelement das richtige Bild pro Datensatz nachschlagen kann. Mit Fortsetzung des Event-Teilnahme-Beispiels, nun erweitert um einen dritten Status Maybe:

1. Erstelle eine Status-Tabelle mit den Spalten StatusID, Status und Icon.
2. Fülle die Icon-Spalte mit der relativen URL-GUID jedes Status (wie oben beschrieben nachschlagen), eine Zeile pro Status, zum Beispiel Accept, Decline und Maybe.
3. Erstelle ein Business Object, das sich mit der Status-Tabelle verbindet und dabei deren Icon-Spalte einbringt. Zum Beispiel ein Objekt namens Employee (Status).
4. Erstelle ein Panel für dieses Business Object und füge dann ein List-Steuerelement hinzu, das die Spalten StatusID und Status des Objekts verwendet, um die Optionen anzuzeigen.
5. Setze in den zusätzlichen Attributen des Steuerelements Icon (Column) auf die Icon-Spalte. Ein List-Steuerelement rendert diesen Wert immer als Symbol.

Nach der Konfiguration löst App Builder den Icon-Wert jeder Zeile gegen die Bildbibliothek auf und zeigt das entsprechende Symbol neben der Option dieser Zeile an, auf die gleiche Weise, wie es bereits den Status-Wert der Zeile als Bezeichnung der Option verwendet.