Zum Inhalt springen

Menü unterstützt Datenobjekt in Jitterbit App Builder

Menüs können von einem Datenobjekt gesteuert werden. Diese Funktion unterstützt folgende Möglichkeiten:

  • Dynamische Beschriftungen, z. B. "Willkommen {{Username}}"
  • Dynamische Links, einschließlich Bindungskriterien in diesen Links
  • Dynamische Bilder wie Benutzerprofile
  • Bedingte Designs anwenden
  • Sichtbarkeitsregeln, die die Sichtbarkeit von Menüelementen steuern können

Menucontrol

Vorhandenes Menü mit einem Datenobjekt konfigurieren

  1. Wählen Sie App Workbench > UI Layer - Menu.
  2. Klicken Sie im Panel Menus auf das Symbol für das vorhandene Menü.
  3. Klicken Sie im Panel Menu auf Edit.
  4. Wählen Sie im Feld Source Rule das zu verwendende Datenobjekt aus.
  5. Klicken Sie auf Save.

Neues Menü mit einem Datenobjekt konfigurieren

  1. Wählen Sie App Workbench > UI Layer - Menu.
  2. Klicken Sie im Panel Menus auf + Menu.
  3. Geben Sie einen Name für das Menü ein. Beispiel: North Sales Menu.
  4. Klicken Sie auf das Symbol Menu Item Themes, um beliebige Design-Informationen für das Menü zu konfigurieren.
  5. Wählen Sie das entsprechende Datenobjekt aus der Dropdown-Liste Source Rule aus.
  6. Klicken Sie auf Save.

Nach dem Konfigurieren der obigen Informationen müssen Sie es in den App-Einstellungen auswählen, wenn Sie ein neues Menü anstelle des Standard-Application Menu verwenden:

  1. Gehen Sie zu App Workbench.
  2. Klicken Sie im Panel App Settings auf More > Edge Case.
  3. Klicken Sie auf die Registerkarte Regions - Controls.
  4. Wählen Sie unter Application Menu, Mobile Menu oder System Menu das neue Menü aus. Die Änderung wird sofort angewendet.

Unter Menu visibility erfahren Sie, welche dieser Menüs steuert.

Bedingtes Design auf ein Menüelement anwenden

Ein bedingtes Design legt den Status oder die Formatierung eines Menüelements fest, wenn eine Bedingung für eine Spalte in der Quellregel des Menüs erfüllt ist. Sie können beispielsweise ein Menüelement ausblenden, wenn eine boolesche Spalte in der Quellregel true ist. Das Menü muss bereits eine Source Rule haben (siehe vorherige Abschnitte).

Führen Sie die folgenden Schritte aus, um ein bedingtes Design auf ein Menüelement anzuwenden:

  1. Wählen Sie App Workbench > UI Layer - Menu.

  2. Suchen Sie im Panel Menus das Menü mit der Quellregel und öffnen Sie das Menüelement, das Sie formatieren möchten, wie in Add menu items beschrieben. Wenn das Element neu ist, speichern Sie es zunächst, da das Feld Conditional Theme erst nach dem Speichern des Elements angezeigt wird.

  3. Klicken Sie auf die Registerkarte Source Features.

  4. Klicken Sie neben Conditional Theme auf das Symbol . Das Dialog Styles wird geöffnet und zeigt alle vorhandenen Formate und bedingten Formatierungen für das Element.

  5. Klicken Sie auf + Conditional Formatting. Das Dialog Apply a Style wird geöffnet.

  6. Konfigurieren Sie unter Condition, wann das Design angewendet wird:

    • Source Column: Wählen Sie eine Spalte aus der Quellregel des Menüs aus.

    • Operator: Wählen Sie aus, wie die Spalte mit dem Ausdruck verglichen werden soll. Beispiel: =. Das Feld Expression wird angezeigt, nachdem Sie einen Operator auswählen.

    • Expression: Geben Sie den Wert ein, mit dem verglichen werden soll, oder wählen Sie eine andere Spalte aus der Quellregel aus. Beispiel: true.

    • Unconditional: Wählen Sie diese Option aus, um die Einstellungen unabhängig von einer Bedingung anzuwenden. Dies verbirgt die anderen Bedingungsfelder.

  7. Konfigurieren Sie unter Settings, was geschieht, wenn die Bedingung erfüllt ist:

  8. Klicken Sie auf Save. Das bedingte Format wird im Dialog Styles angezeigt. Schließen Sie das Dialog, wechseln Sie zur Anwendung und aktualisieren Sie den Browser, um zu bestätigen, dass sich das Menüelement wie erwartet verhält.

Einfügen eines Bildes in ein Menü

Es gibt Anwendungsfälle, in denen man ein Bild in einem Menü anzeigen möchte. Mit dieser neuen Funktion können Bilder im Menübereich angezeigt werden. Das Bild kann dabei auf Informationen basieren, die in dem Datenobjekt gespeichert sind, das man mit dem Menü verbindet. Dieses Beispiel setzt voraus, dass bereits ein Datenobjekt mit einer Spalte vorhanden ist, die die UUID-Informationen des Bildes erfasst.

Hinweis

Bilder können im Datenobjekt als UUID, Base64-String oder Binary-Spaltentyp mit dem Bild selbst gespeichert werden.

Menuimage

Lokale Bild-UUID ermitteln

  1. Klicken Sie oben in der Symbolleiste auf Look & Feel.
  2. Klicken Sie auf die Registerkarte Images (Bilder).
  3. Nutzen Sie das Dropdown-Menü Collection, um die Sammlung auszuwählen, in der das lokal zu speichernde Bild hochgeladen wurde.
  4. Öffnen Sie im Fenster Images (Bilder) das Bild, für das Sie den UUID-Wert abrufen möchten.
  5. Wählen Sie den Teil des Wertes Relative URL aus, der nach /image/ angezeigt wird. Beispiel: 50e85d87-e283-4953-983f-0bc3e18b3a7e.
  6. Kopieren Sie den Wert in die Zwischenablage.
  7. Der UUID-Wert ist das, was in einer Spalte des Datenobjekts oder der Regel gespeichert werden soll, auf die das Menü verweist.

Bild aus einem Datenobjekt zu einem Menü hinzufügen

  1. Wählen Sie App Workbench > UI Layer - Menu (UI-Ebene – Menü).

  2. Wählen Sie im Fenster Menus (Menüs) das Menü aus, dem das Bild hinzugefügt werden soll. Die Source Rule des Menüs muss das Datenobjekt oder die Regel sein, die die Bildspalte enthält.

  3. Klicken Sie im Fenster Menu Items (Menüelemente) auf + Menu Item (+ Menüelement).

  4. Bestätigen Sie auf der Registerkarte Settings (Einstellungen), dass Menu Control Types auf Menu Item (Menüelement) eingestellt ist, und geben Sie einen Name ein.

  5. Klicken Sie auf die Registerkarte Source Features (Quellenfunktionen).

  6. Nutzen Sie das Dropdown-Menü Source Column (Quellspalte), um die Spalte auszuwählen, die das Bild enthält. Beispiel: Avatar.

  7. Legen Sie Control Type auf Image (Bild) fest.

  8. Klicken Sie auf Save (Speichern).

  9. (Optional) Stellen Sie in der Spalte Alignment (Ausrichtung) des Fensters Menu Items (Menüelemente) die Ausrichtung des Elements ein. Beispiel: Right (Rechts).

  10. Navigieren Sie zurück zur UI-Ebene der Anwendung, aktualisieren Sie Ihren Webbrowser, und überprüfen Sie die Ergebnisse.

Weitere Informationen

Wenn Sie einem App ein benutzerdefiniertes Logo-Bild hinzufügen möchten, finden Sie Informationen unter Hinzufügen eines Logos zu einer App.