Schaltflächensteuerelement in Jitterbit App Builder

Ein Button-Steuerelement platziert eine anklickbare Schaltfläche auf einem Panel. Das Anklicken einer Schaltfläche kann je nach Konfiguration ein Ereignis ausführen, zu einer anderen Seite verlinken oder zu einem anderen Panel verlinken. Diese Seite beschreibt, wie Sie ein Button-Steuerelement hinzufügen, konfigurieren, was beim Anklicken geschieht, steuern, wo es auf dem Panel angezeigt wird, und Stile darauf anwenden.

Button-Steuerelement hinzufügen

So fügen Sie ein Button-Steuerelement zu einem Panel hinzu:

1. Öffnen Sie die gewünschte Seite und wählen Sie Action Drawer > Live Designer. Öffnen Sie alternativ den Bearbeitungsbildschirm der gewünschten Seite über App Workbench > Pages.
2. Wenn Sie den Live Designer verwenden, wählen Sie das Panel aus, in dem Sie die Schaltfläche hinzufügen möchten; seine Optionen füllen den Live Designer. Wenn Sie sich in der App Workbench befinden, wählen Sie das Panel aus, in dem Sie die Schaltfläche hinzufügen möchten, und klicken Sie auf die Schaltfläche Controls.

3. Klicken Sie auf + Control. Das Dialogfeld Add a Control wird geöffnet:

   

4. (Optional) Wenn die Schaltfläche einer zugrunde liegenden Spalte zugeordnet werden soll, wählen Sie diese im Feld Column aus.

5. Setzen Sie Control Type auf Button.
6. Geben Sie einen Name ein. Dieser Wert wird als Beschriftung der Schaltfläche angezeigt.

7. Wählen Sie im Feld Control Subtype aus, ob die Schaltfläche als Primary oder Secondary angezeigt werden soll:

   • Primary: Wird als Hauptschaltfläche auf dem Panel angezeigt.
   • Secondary: Wird als Sekundärschaltfläche auf dem Panel mit hellerer Darstellung als eine Primary-Schaltfläche angezeigt.

8. Klicken Sie auf Next.

9. Konfigurieren Sie, was die Schaltfläche beim Anklicken macht. Siehe Button-Klickverhalten konfigurieren weiter unten.
10. Klicken Sie auf Next, überprüfen Sie die Änderungen, die App Builder vorschlägt, und klicken Sie auf Finish.

Nach dem Erstellen der Schaltfläche können Sie ihren Speicherort festlegen oder Stile aus ihren Einstellungen anwenden.

Button-Klickverhalten konfigurieren

Wählen Sie im zweiten Schritt des Dialogfelds Add a Control aus, was passiert, wenn ein Benutzer auf die Schaltfläche klickt:

• Execute an Event: Wählen Sie ein auszuführendes Ereignis aus.
• Link to Page: Wählen Sie eine Seite aus, zu der navigiert werden soll.

• Link to Panel: Wählen Sie ein Zielpanel auf derselben Seite aus, das in die Ansicht gebracht werden soll.

  Hinweis

  Die Verfügbarkeit der Option Link to Panel hängt von der App Builder-Version ab:

  • In App Builder 4.64 und früher ist Link to Panel nur auf Seiten mit dem Wizard-Layout verfügbar.
  • In App Builder 4.65 und später ist Link to Panel auf jedem Seitenlayout verfügbar.

  Link to Panel verhält sich auch unterschiedlich, je nach dem Layout des Panels:

  • Auf einer Wizard-Seite wechselt das Anklicken der Schaltfläche zu dem Schritt, der das Zielpanel enthält. Siehe Wizard pages für Details.
  • Wenn sich das Zielpanel in einem nicht ausgewählten Tab innerhalb einer Panel-Gruppe befindet, die das Tabbed-Layout verwendet, wählt das Anklicken der Schaltfläche auch diesen Tab aus, wodurch das Panel angezeigt wird. Siehe Panel groups für weitere Informationen zu Tabbed-Panel-Gruppen.

Schaltflächenspeicherort

Button-Steuerelemente können in einem von vier Bereichen auf einem Panel platziert werden. So stellen Sie dies ein:

1. Wenn Sie den Live Designer verwenden, wählen Sie das Panel mit der Schaltfläche aus und klicken Sie auf das Symbol Open record. Wenn Sie sich in der App Workbench befinden, wählen Sie das Panel mit der Schaltfläche aus und klicken Sie auf das Symbol Open record.
2. Öffnen Sie die Registerkarte Control Properties.
3. Wählen Sie im Feld Location eine der folgenden Optionen:
   • Body: (Standard.) Wird inline auf dem Panel angezeigt.
   • Header: Wird im Header-Bereich des Panels angezeigt, standardmäßig auf der rechten Seite.
   • Panel (Menu): Wird in einem verschachtelten Menü auf dem Panel im oberen rechten Bereich angezeigt.
   • Toolbar: Wird im Toolbar-Bereich des Panels angezeigt, standardmäßig rechts von vorhandenen Update-Methode-Schaltflächen (z. B. Create oder Audit).

Die vier möglichen Schaltflächenpositionen sind unten dargestellt:

1. Klicken Sie auf Speichern.

Eine Schaltfläche formatieren

Verwenden Sie Stile, um das Erscheinungsbild eines Button-Steuerelements weiter anzupassen, z. B. Größe, Farbe und Schriftstärke. Sie können einen Stil anpassen, wenn Sie eine präzisere Kontrolle benötigen.

1. Öffnen Sie die Seite mit der Schaltfläche und wählen Sie Action Drawer > Live Designer. Alternativ können Sie die Bearbeitungsseite öffnen, indem Sie zu App Workbench > Pages navigieren.
2. Wenn Sie den Live Designer verwenden, wählen Sie die Schaltfläche aus; ihre Optionen werden im Live Designer angezeigt. Wenn Sie sich in der App Workbench befinden, wählen Sie das Panel aus, in dem sich die Schaltfläche befindet, klicken Sie auf die Schaltfläche Controls und dann auf das Symbol Open record der Schaltfläche.
3. Gehen Sie zu More > Styles. Das Dialogfeld Styles wird geöffnet.
4. Klicken Sie auf + Style.
5. Wählen Sie Buttons aus Style Categories aus.
6. Suchen Sie den gewünschten Stil und klicken Sie auf seine Schaltfläche + Add.
7. Schließen Sie die Stile und Bearbeitungsseiten, aktualisieren Sie dann den Browser, um die Änderung zu bestätigen.

Die Füllung eines Symbols von durchgehend zu regulär ändern

App Builder wird standardmäßig mit Icon-Bildern ausgeliefert, die den Zustand Solid verwenden, was bedeutet, dass das Symbol mit einer durchgehenden Füllung angezeigt wird. Bei einer Schaltfläche, der bereits ein Symbol zugewiesen ist, können Sie einen Stil konfigurieren, um dies zu überschreiben und stattdessen den Zustand Regular zu verwenden, sodass das Symbol als Umriss der Form ohne Füllung angezeigt wird. Siehe Icon-Kategorien für die anderen verfügbaren Iconsätze beim Auswählen eines Symbols.

Die folgenden Beispiele zeigen dasselbe address-card-Symbol auf einem Button-Steuerelement in jedem Zustand:

Nach dem Öffnen des Dialogfelds Styles (Schritte 1–4 oben):

1. Wählen Sie Font aus Style Categories aus, damit die Stiliste auf schriftartbezogene Optionen eingegrenzt wird.
2. Suchen Sie Font Weight 400 und klicken Sie auf seine Schaltfläche + Add. Dies fügt dem Steuerelement einen Schriftstärkestil hinzu, den Sie dann bearbeiten können.
3. Klicken Sie auf x, um den Stilbildschirm zu schließen.
4. Klicken Sie auf das Symbol Open record für den soeben erstellten Stil, um den vollständigen Datensatz zu öffnen.
5. Klicken Sie auf die Schaltfläche Edit Style.
6. Wählen Sie Controls im Panel Components aus, da Sie ein Steuerelement und nicht eine Seite oder ein Panel formatieren.
7. Klicken Sie auf Create unter Styles.
8. Wählen Sie Icon aus Button als Area aus, damit der Stil speziell auf das Symbol abzielt, das auf einem Button-Steuerelement angezeigt wird.
9. Wählen Sie Font als Style Type, um die Eigenschaft Font Weight abzugleichen, die Sie gleich festlegen werden.
10. Setzen Sie Font Weight auf normal. Dies überschreibt die in Schritt 2 hinzugefügte Gewichtung von 400, was das Symbol von durchgehend zu regulär ändert.
11. Klicken Sie auf Speichern.
12. Aktualisieren Sie die Anwendungsansicht, um zu bestätigen, dass das Symbol nun im Regular-Zustand angezeigt wird.