Zum Inhalt springen

Image Viewer-Widget in Jitterbit App Builder

Das Image Viewer-Widget zeigt ein Bild mit zusätzlichen Größenparametern an. Es wird als Teil der App Builder-Sammlung bereitgestellt, daher ist das Herunterladen oder Hochladen eines Widget-Archivs nicht erforderlich.

Image Viewer-Widget hinzufügen

  1. Öffnen Sie das Steuerelement mit dem Live Designer oder der App Workbench. Die Schritte finden Sie unter Konvertieren eines vorhandenen Steuerelements in ein Image-Steuerelement.

  2. Legen Sie auf der Registerkarte Image den Parameter Image Purpose auf Photo fest.

  3. Wählen Sie auf der Registerkarte Edge Case im Dropdown Widget die Option Image Viewer aus. Ein neuer Bereich Widget Properties wird unterhalb von Edge Case angezeigt.

  4. Konfigurieren Sie in Widget Properties die folgenden Felder:

    • Interface Mode: Wählen Sie Always oder Mobile Only.

    • Active Mode: Wählen Sie Edit Only, View and Edit oder View Only.

  5. Klicken Sie auf Save.

  6. (Optional) So legen Sie Widget-Parameter fest:

    1. Klicken Sie neben dem Feld Widget auf die Schaltfläche Param. Das Dialogfeld Widget Parameters wird geöffnet.

    2. Klicken Sie auf Create. Das Dialogfeld wechselt zur Ansicht Widget Parameter. Konfigurieren Sie die folgenden Felder:

      • Widget Parameter: Wählen Sie einen Parameter aus dem Dropdown aus. Der Standardwert (Default) und eine Beschreibung der Parameterwerte werden im Formular angezeigt.

      • Parameter Type: Wählen Sie Column, Control oder Static Value. Die verbleibenden Felder hängen von dem ausgewählten Typ ab. Weitere Informationen zu den einzelnen Typen finden Sie unter Widget API.

      • Use Formatted Value: Lassen Sie diese Option aktiviert (Standard), um den formatierten Anzeigewert zu verwenden.

      • Active: Lassen Sie diese Option aktiviert (Standard), um den Parameter anzuwenden.

    3. Klicken Sie auf Save.

Klicken Sie auf das x neben dem Feld Widget und dann auf Save, um das Widget zu entfernen.

Parameter

Dieses Widget unterstützt die folgenden Parameter. Parameter mit dem Suffix Grid gelten für Grid-Style-Panels.

Parameter Standard Beschreibung
autoResize 0 Passt die Bildgröße automatisch an, wenn sich die Panel-Größe ändert, beispielsweise wenn ein Benutzer ein Panel maximiert.
height auto Höhe des Bildes.
heightGrid 5 Höhe des Bildes auf Grid-Style-Panels.
maxWidth 95% Maximale Breite des Bildes.
maxWidthGrid 95% Maximale Breite des Bildes auf Grid-Style-Panels.
minHeight auto Minimale Höhe des Bildes.
minHeightGrid 5 Minimale Höhe des Bildes auf Grid-Style-Panels.
objectFit contain Wie das Bild den Steuerelementbereich ausfüllt.
objectPosition auto Wird mit objectFit verwendet, um zu festzulegen, wie das Bild mit x/y-Koordinaten im Steuerelement positioniert wird.
verticalAlignment top Wie das Bild vertikal ausgerichtet wird.
width auto Breite des Bildes.
widthGrid auto Breite des Bildes auf Grid-Style-Panels.

Größenwerte

Die Parameter height, heightGrid, minHeight, minHeightGrid, width und widthGrid akzeptieren relative Einheiten, Pixel oder beliebige andere CSS-Höhen- oder Breitenwerte. Der Widget-Hilfetext bezieht sich auf relative Einheiten als Zudy-Einheiten.

Beispiel Bedeutung
10 10 relative Einheiten
200px Pixel
100% Prozentsatz
auto Automatische Größe

autoResize-Werte

Wert Verhalten
0 Passt sich nicht automatisch an.
1 Passt sich dynamisch an.

objectFit-Werte

Wert Verhalten
fill Behält das Seitenverhältnis nicht bei. Das Bild wird so angepasst, dass es das Steuerelement ausfüllt.
contain Behält das Seitenverhältnis bei und passt das Bild im Steuerelement an, ohne es abzuschneiden.
cover Behält das Seitenverhältnis bei und füllt das Steuerelement aus, wobei Überläufe abgeschnitten werden.
none Passt das Bild nicht an.
scale-down Verkleinert das Bild auf das kleinere der Ergebnisse none oder contain.

objectPosition-Werte

Wert Verhalten
auto Verwendet die Einstellung Ausrichtung des Steuerelements.
positionX positionY Gibt die Position des Bildes im Steuerelement an. Der erste Wert steuert die X-Achse und der zweite Wert steuert die Y-Achse. Jeder Wert kann eine Zeichenfolge (left, center oder right) oder eine Zahl in Pixeln oder Prozent sein. Negative Werte sind zulässig.

verticalAlignment-Werte

Wert Verhalten
top Oben ausgerichtet.
center Zentriert ausgerichtet.
bottom Unten ausgerichtet.