Zum Inhalt springen

Wie man ein Menü in Jitterbit App Builder erstellt

Menüs sind die primäre Möglichkeit, Benutzer durch deine Anwendungen zu navigieren. Sie können Zugriff auf bestimmte Seiten bieten, indem sie diese in einem leicht verständlichen und benutzerfreundlichen Format gruppieren und auflisten. Einige werden automatisch erstellt, wenn du eine Anwendung erstellst. Andere Menüs musst du selbst einrichten. Diese Seite beschreibt den Prozess zum Erstellen und Konfigurieren eines neuen Menüs in App Builder.

Standardmenüs und Startseite

Standardmäßig hat jede neue Anwendung die folgenden Menüs und eine Startseite:

  • Application Menu ist das Menü, das in der Anwendungssymbolleiste sichtbar ist.

  • Mobile definiert Menüs, die nur auf Mobilgeräten sichtbar sind.

  • Home ist die Standardseite, die als Startseite der App verwendet wird.

Du kannst deine eigenen Menüs erstellen sowie ändern, welche angezeigt werden in deiner App.

Menü erstellen

Führe die folgenden Schritte durch, um ein Menü zu erstellen:

  1. Wähle App Workbench > UI Layer - Menu. Das Panel Menus wird geöffnet.

  2. Das Panel Menus listet die aktuell vorhandenen Menüs auf. Das Panel Menu Diagram veranschaulicht die Struktur des ausgewählten Menüs, einschließlich eventueller Untermenüs und deren Elemente.

  3. Klicke auf die Schaltfläche + Menu im Panel Menus.

  4. Gib die folgenden Informationen ein:

    Menü erstellen

    1. Name: Ein Name für das neue Menü. Dies ist das einzige erforderliche Feld.

    2. Width: Ein fester Breitenwert für das neue Menü.

    3. Menu Item Themes: Falls du Designs verwendest, wähle hier eines aus, um Stil auf die Menüelemente anzuwenden.

    4. Source Rule: Wähle eine zugrunde liegende Source Rule.

    5. Public: Aktiviere diese Option, um zu ermöglichen, dass das Menü in einer anderen Anwendung verwendet wird.

  5. Klicke auf die Schaltfläche Save. Du kannst jetzt mit dem Panel Menu Items interagieren, um Elemente zu deinem neu erstellten Menü hinzuzufügen (siehe Menüelemente hinzufügen, um mehr zu erfahren).

Wenn eine neue Anwendung erstellt wird, stellt App Builder automatisch Home als Startseite der App ein und richtet ein Menü namens Application Menu ein, das auf der rechten Seite der oberen Symbolleiste angezeigt wird und auf allen Seiten sichtbar ist. Du kannst diese Einstellungen ändern, z. B. deine eigene Seite oder deine Menüs auswählen, um diese Rollen auszufüllen, indem du diese Schritte befolgst:

  1. Gehe zur App Workbench.

  2. Klicke auf die Registerkarte App Settings.

  3. Klicke im Panel App Settings auf More > Edge Case.

  4. Wähle die Registerkarte Regions - Controls:

    Anwendungsmenü

    1. Unter Application Menu wählst du aus, welches Menü auf der rechten Seite der oberen Symbolleiste sichtbar sein soll. Die Standardeinstellung ist das Menü mit demselben Namen.

    2. Unter Home Page wählst du eine Seite als Startseite aus. Die Standardeinstellung ist Home.

    3. Unter Mobile Menu wählst du aus, welches Menü Benutzer auf Mobilgeräten sehen. Die Standardeinstellung ist das Menü Mobile.

    4. Unter System Menu wählst du ein Menü aus, das auf der linken Seite der oberen Symbolleiste sichtbar sein soll. Standardmäßig gibt es hier keine.

      Hinweis

      In der Dropdown-Liste gibt es eine vom System erstellte Option namens System Menu. Wenn diese ausgewählt wird, zeigt sie Symbole mit einigen nützlichen Einstellungen wie Audit, Benutzerprofil, Sprachen und andere an. Allerdings sind alle diese Einstellungen auch im Hamburger-Menü rechts neben der oberen Symbolleiste verfügbar.

Menüelemente hinzufügen

Um Elemente zu einem Menü hinzuzufügen, stelle es auf, indem du auf App Workbench > UI Layer - Menu zugreifst und es im Panel Menus findest.

Sobald du das Menü gefunden hast, zu dem du Elemente hinzufügen möchtest, kannst du auf das Symbol klicken oder auf seine Zeile oder seinen Namen im Panel Menu Diagram doppelklicken, um eine Aufschlüsselung seiner Elemente anzuzeigen.

Das Panel Menu Items zeigt alle vorhandenen Elemente in diesem Menü. Um ein neues Element hinzuzufügen, klicke auf die Schaltfläche + Menu Item und das Dialogfeld Menu Item wird geöffnet, das die folgenden Registerkarten enthält:

  • Einstellungen: In diesem Tab sind die folgenden Felder verfügbar:

    • Menüsteuerungstypen: Wählen Sie Menüelement, wenn Sie eine Option zu einem Menü hinzufügen, oder Verschachteltes Menü, wenn Sie ein neues Untermenü erstellen.

    • Übergeordnetes Menü: Wählen Sie das übergeordnete Menü des Elements aus, das Sie erstellen.

    • Position: Geben Sie eine Zahl ein, um die Anzeigereihenfolge dieses Elements zu definieren.

    • Name: Geben Sie den Namen des neuen Elements ein.

    • Mit Seite verknüpfen: Verwenden Sie das Dropdown-Menü, um auszuwählen, mit welcher Seite Ihrer Anwendung dieses Element verknüpft werden soll.

  • Linkoptionen: Die in diesem Tab verfügbaren Felder hängen davon ab, ob eine Seite im Feld Mit Seite verknüpfen des Tabs Einstellungen ausgewählt ist:

    • Wenn eine Seite ausgewählt ist, werden in diesem Tab diese Felder angezeigt:

      • Mit Seite verknüpfen – Ausgangszustand: Wählen Sie den Ausgangszustand, in dem die verknüpfte Seite geladen wird: Standard, Hinzufügen oder Bearbeiten.

      • Linkziel: Wählen Sie, wo die verknüpfte Seite geöffnet wird; ob im aktuellen Fenster, in einem neuen Tab usw.

      • Seite in Verlauf ersetzen: Wählen Sie, wohin die Schaltfläche < Zurück nach dem Laden der verknüpften Seite zurückkehrt; Details finden Sie unter Konfigurieren, wie verknüpfte Seiten geöffnet werden.

    • Wenn keine Seiten in Mit Seite verknüpfen ausgewählt sind, wird in diesem Tab dieses Feld angezeigt:

      • Externer Link: Geben Sie einen Link zu einer anderen Seite auf dem App Builder-Server oder zu einer externen Webressource ein; die eingegebene URL muss mit https:// oder http:// beginnen. Nachdem ein Wert eingegeben wurde, wird auch das Feld Linkziel angezeigt.

    Wenn sich das Linkziel eines Menüelements zu einem ändert, das Seite in Verlauf ersetzen nicht unterstützt (z. B. beim Wechsel von Mit Seite verknüpfen zu einem Externen Link, der sich nicht im aktuellen Browser-Tab öffnet), deaktiviert App Builder automatisch Seite in Verlauf ersetzen, anstatt es aktiviert zu lassen, ohne Auswirkung zu haben.

  • Anzeigeoptionen: In diesem Tab sind die folgenden Felder verfügbar:

    • Beschriftung: Definieren Sie eine Beschriftung, die im Menü angezeigt wird.

    • Tooltip-Beschriftung: Definieren Sie den Tooltip-Text, der angezeigt wird, wenn ein Benutzer den Mauszeiger über das Element bewegt.

    • Bild: Verwenden Sie das Dropdown-Menü, um ein Bild zu suchen und auszuwählen, das dem Element zugeordnet werden soll.

    • Symbol: Verwenden Sie das Dropdown-Menü, um ein Symbol zu suchen und auszuwählen, das dem Element zugeordnet werden soll. Informationen zu den verfügbaren Symbolsätzen finden Sie unter Symbolkategorien.

    • Beschriftungssichtbarkeit: Wählen Sie, ob die Beschriftung in der Anwendung Sichtbar oder Verborgen sein soll.

    • Design: Wenn Sie Designs verwenden, wählen Sie hier eines aus, um Formatierung auf das Element anzuwenden.

    • Aktiv: Dieses Kontrollkästchen bestimmt, ob das Element im Menü angezeigt wird (standardmäßig aktiviert).

  • Quellfunktionen: Dieser Tab wird nur angezeigt, wenn das Menü eine Quellregel hat. In diesem Tab sind die folgenden Felder verfügbar, die die Spalten dieser Quellregel verwenden:

    • Quellspalte: Wählen Sie die Spalte in der Quellregel aus, die die Daten des Elements bereitstellt, z. B. eine Bild-UUID.

    • Steuerungstyp: Wählen Sie Schaltfläche oder Bild, um zu bestimmen, wie die Werte angezeigt werden.

    • Bedingtes Design: Nachdem Sie das Element gespeichert haben, klicken Sie auf das -Symbol, um einen Zustand oder Stil auf das Element anzuwenden, wenn eine Bedingung in einer Quellregelspalte erfüllt ist, beispielsweise um das Element auszublenden. Informationen finden Sie unter Bedingtes Design auf ein Menüelement anwenden.

    • Badge-Spalte: Wählen Sie die Spalte in der Quellregel aus, deren Wert als numerisches Badge auf dem Element angezeigt wird.

Klicken Sie auf Speichern, um Ihre Einstellungen zu bestätigen und das neue Element zu speichern.

Ein Menü zu einem Formularpanel hinzufügen

Jedes erstellte Menü kann auch direkt in einem Formular-Panel angezeigt werden, anstatt nur einer Menürolle in den App-Einstellungen zugewiesen zu werden. Fügen Sie dazu ein Inline-Menü-Steuerelement zum Panel hinzu. Informationen zur Konfiguration des Steuerelements finden Sie unter Inline-Menü.