Bild (Steuerelementtyp) in Jitterbit App Builder
Ein Bild-Steuerelement zeigt ein Bild aus der einheitlichen Bildbibliothek von App Builder auf einem Panel in der UI-Schicht an. Diese Bibliothek enthält sowohl hochgeladene Fotos als auch integrierte Symbolsätze von App Builder. Das gleiche Bild-Steuerelement kann je nach ausgewähltem Bild und Einstellung von Bildzweck ein von Benutzern hochgeladenes Foto, ein statisches Logo oder eines der integrierten Symbole anzeigen.
Bild-Steuerelement hinzufügen
Um ein neues Bild-Steuerelement zu einem Panel hinzuzufügen, verwenden Sie das Dialogfeld Steuerelement hinzufügen und wählen Sie Bild als Steuerelementtyp:
Bestehendes Steuerelement in ein Bild-Steuerelement umwandeln
So ändern Sie ein bestehendes Steuerelement, um den Steuerelementtyp Bild zu verwenden:
-
Navigieren Sie zum Steuerelement, entweder über den Live Designer oder die App Workbench:
-
Öffnen Sie in der App-Vorschau die Seite mit dem Steuerelement und wählen Sie Action Drawer > Live Designer.
-
Öffnen Sie in der App Workbench die Registerkarte „Seiten". Suchen Sie dann im Seiten-Panel die Seite mit dem Steuerelement und doppelklicken Sie entweder auf die Zeile oder klicken Sie auf das Symbol Datensatz öffnen. Suchen Sie im Seitenpanel-Layout-Panel das Panel, das das Steuerelement enthält, und klicken Sie auf Steuerelemente.
-
-
Im Live Designer klicken Sie auf das Steuerelement in der Seitenansicht. Dies füllt den Live Designer mit Bearbeitungsoptionen für dieses Steuerelement. In der App Workbench suchen Sie im Panel Steuerelemente das Steuerelement und doppelklicken Sie entweder auf die Zeile oder klicken Sie auf das Symbol Datensatz öffnen am Ende der Zeile. App Builder öffnet ein Dialogfeld ähnlich dem des Live Designer.
-
Stellen Sie auf der Registerkarte Steuerelementeigenschaften das Feld Steuerelementtyp auf Bild ein.
-
Verwenden Sie auf der Registerkarte Bild das Feld Bild, um nach einem Bild zu suchen und dieses auszuwählen. Die Dropdown-Liste enthält sowohl hochgeladene Fotos als auch integrierte Symbolsätze von App Builder. Informationen zu den verfügbaren Symbolsätzen finden Sie unter Symbolkategorien.
-
Stellen Sie Bildzweck auf Symbol oder Foto ein, um dem ausgewählten Bildtyp zu entsprechen. Diese Einstellung steuert nur, wie das Bild gerendert wird. Sie filtert nicht, welche Bilder zur Auswahl verfügbar sind.
-
(Optional) Stellen Sie Badge-Quelle (Spalte) auf einen Spaltenwert ein, um auf dem Bild eine numerische Badge anzuzeigen. Informationen dazu finden Sie unter Badges mit Schaltflächen.
-
Klicken Sie auf Speichern.
Aktualisieren Sie die Anwendungsansicht, um die Aktualisierung zu bestätigen.
Symbolkategorien
Symbole sind in Auswahlmenüs in Kategorien unterteilt, z. B. in den Feldern Symbol im Dialogfeld Menüelement oder im Feld Bild für ein Schaltfläche- oder Bild-Steuerelement. Während Sie in das Suchfeld des Dropdown-Menüs eingeben, werden entsprechende Symbole in einer Liste angezeigt, die unter Kategorieüberschriften gruppiert ist, die verschiedene Symboljquellen darstellen.
Die folgenden Kategorien sind verfügbar:
| Kategorie | Quelle | Beschreibung |
|---|---|---|
| Marken | Font Awesome Brands | Logos von Unternehmen und Diensten (z. B. youtube, youtube-square). |
| Solid | Font Awesome Solid | Der Standard-Stil von Font Awesome-Symbolen mit durchgehender Füllung. |
| Regular | Font Awesome Regular | Eine Variante des Font Awesome-Symbolstils mit Umriss und ohne Füllung. |
| Material Filled | Google Material Icons | Eine durchgehend gefüllte Variante der Material Icons-Bibliothek von Google. |
| Material Rounded | Google Material Icons | Eine Variante der Material Icons-Bibliothek von Google mit abgerundeten Ecken. |
| Material Sharp | Google Material Icons | Eine Variante der Material Icons-Bibliothek von Google mit scharfen Ecken. |
Hinweis
Google vertreibt seine Material Icons-Bibliothek als Outline-Schriftart namens „Material Icons Outlined". App Builder wendet eine Füllung auf diese Schriftart an und stellt das Ergebnis hier als Material Filled zur Verfügung, um sich an den Solid-Stil von Font Awesome anzupassen.
Weitere Informationen zum Wechsel von aktuell verwendeten Symbolen finden Sie unter Schaltflächensymbol von Solid zu Regular Fill ändern.
Foto hochladen und ersetzen
Kombinieren Sie ein Image-Steuerelement mit einem File-Steuerelement, um Benutzern das Hochladen eines neuen Fotos zu ermöglichen, das das derzeit angezeigte Foto ersetzt. Legen Sie den Image Purpose des gekoppelten Image-Steuerelements für diesen Anwendungsfall auf Photo fest.
App Builder 4.67 und früher
In App Builder 4.67 und früher werden integrierte Symbole und hochgeladene Bilder separat gespeichert, daher unterscheidet sich das folgende Verhalten von dem auf dieser Seite beschriebenen:
- Integrierte Symbole werden mit einem separaten Icon-Steuerelementtyp angezeigt. Um ein Symbol dynamisch anzuzeigen, übergeben Sie den CSS-Namen des Symbols (z. B.
times-circle-o) an das Icon-Steuerelement. - Das Feld Image auf den Steuerelementen Image, Checkbox und List listet nur hochgeladene Bilder auf, nicht die integrierten Symbolsätze.
Unter Icon categories finden Sie die in App Builder verfügbaren Symbolsätze.