Zum Inhalt springen

Wizard-Seiten in Jitterbit App Builder

Das Wizard-Layout ist eine der verfügbaren Seitenlayout-Optionen in App Builder. Auf einer Seite mit dem Wizard-Layout zeigt App Builder jeden Bereich als separaten Schritt an, mit Zurück-, Weiter- und Fertig-Schaltflächen zur Navigation zwischen ihnen. Diese Seite beschreibt, wie man eine Wizard-Seite konfiguriert, die integrierten Navigationsfunktionen nutzt und die Navigationsschaltflächen anpasst.

Auf einer Wizard-Seite werden alle bearbeitbaren Felder dieses Schritts verfügbar, wenn man auf ein beliebiges Feld klickt. Um die Änderungen zu speichern, navigiert man zum letzten Schritt und klickt auf Fertig. Klicken Sie auf das X in der oberen rechten Ecke, um die Seite ohne Speichern zu schließen.

Wizard-Seiten sind nützlich, wenn man Benutzer durch einen mehrstufigen Prozess führen möchte, z. B. ein Bestellformular, das jeden Schritt auf einen eigenen Bildschirm aufteilt:

wizardexample.png

Wizard-Seite konfigurieren

Seite erstellen

So erstellt man eine Seite mit dem Wizard-Layout:

  1. Gehen Sie zu App Workbench und klicken Sie auf + Seite.
  2. Geben Sie einen Seitennamen ein, z. B. Bestelldetails.
  3. Klicken Sie auf Weiter.
  4. Wählen Sie unter Menü auswählen das Menü aus, von dem aus Sie die Seite verlinken möchten, z. B. Startseite.
  5. Klicken Sie auf Weiter.
  6. Wählen Sie unter Layout auswählen die Option Wizard aus.
  7. Klicken Sie auf Weiter.
  8. Überprüfen Sie die vorgeschlagenen Änderungen und klicken Sie auf Fertig.

Bildschirm hinzufügen

Jeder Bildschirm in einer Wizard-Seite ist ein Bereich, der auf die gleiche Weise hinzugefügt wird wie jeder andere Bereich auf einer Seite:

  1. Wenn Sie den Live Designer verwenden, klicken Sie auf + Bereich. Wenn Sie sich in der App Workbench befinden, klicken Sie auf + Bereichstyp auswählen im Bereich Seitenbereiche-Layout. Das Dialogfeld Bereich erstellen wird geöffnet.
  2. Wählen Sie den Bereichstyp zur Anzeige aus, z. B. Tabelle, und klicken Sie auf Weiter.
  3. Wählen Sie die Bereichsquelle aus und klicken Sie auf Weiter.
  4. Wählen Sie, ob Sie den Bereich Automatisch erstellen oder Manuell auswählen möchten, und klicken Sie auf Weiter.
  5. Klicken Sie auf Fertig.
  6. Wiederholen Sie diese Schritte für jeden zusätzlichen Bildschirm, den Sie zur Wizard-Seite hinzufügen möchten.

Nach dem Hinzufügen eines Bildschirms können Sie seine Navigationsschaltflächen anpassen oder eine Fertig-Schaltfläche konfigurieren.

Wizard-Seitennavigation

Wizard-Seiten enthalten die folgenden Navigationsfunktionen:

  • Fortschrittsleiste: Wird auf jedem Bildschirm angezeigt, um den aktuellen Schritt in der Wizard-Seite zu verfolgen.

  • Bereichssichtbarkeit: Steuert, ob ein Bereich als Schritt in der Wizard-Seite angezeigt wird, mithilfe des Feldes Bereichssichtbarkeit des Bereichs:

    • Anzeigen: Der Bereich wird als Schritt aufgelistet, und Benutzer navigieren normal zu ihm.
    • Verborgen: Der Bereich wird nicht als Schritt aufgelistet, und Benutzer überspringen ihn.
    • Deaktiviert: Der Bereich wird als Schritt aufgelistet, erscheint aber durchgestrichen, und Benutzer überspringen ihn.

  • Hilfetext: Der Hilfetext eines Bereichs wird unter der Fortschrittsleiste angezeigt.

  • Link zu Bereich: Wenn man auf eine Schaltfläche klickt, die mit der Option Link zu Bereich konfiguriert ist, wechselt die Wizard-Seite zum Schritt mit dem Zielbereich. Diese Option ist auch auf anderen Seitenlayouts verfügbar; siehe Schaltflächensteuerelemente für Details.

Wizard-Seiten unterstützen auch benutzerdefinierte Zurück-, Weiter- und Fertig-Schaltflächen, mit denen man eine Schaltfläche aus einem Bereich hochstufen kann, um eine dieser Schaltflächen in der Seitennavigation zu ersetzen. Siehe Navigationsschaltflächen anpassen unten.

Navigationsschaltflächen anpassen

Man kann die Zurück-, Weiter- und Fertig-Schaltflächen auf einer Wizard-Seite überschreiben. Dies ermöglicht es, das Verhalten der Schaltfläche anzupassen, z. B. um ein benutzerdefiniertes Ereignis auszuführen, wenn auf die Weiter-Schaltfläche geklickt wird, oder um zu einer neuen Seite zu navigieren, wenn auf die Fertig-Schaltfläche geklickt wird.

So überschreiben Sie die Navigationsschaltflächen einer Wizard-Seite:

  1. Öffnen Sie die gewünschte Seite und wählen Sie Aktionsleiste > Live Designer. Alternativ öffnen Sie den Bearbeitungsbildschirm der gewünschten Seite, indem Sie zu App Workbench > Seiten gehen.
  2. Wenn Sie den Live Designer verwenden, wählen Sie den Bereich aus, in dem Sie eine Schaltfläche überschreiben möchten; seine Optionen werden im Live Designer angezeigt. Wenn Sie sich in der App Workbench befinden, wählen Sie den Bereich aus, in dem Sie eine Schaltfläche überschreiben möchten, und klicken Sie auf die Schaltfläche Steuerelemente.
  3. Klicken Sie auf + Steuerelement. Das Dialogfeld Steuerelement hinzufügen wird geöffnet.
  4. Setzen Sie Steuerelementtyp auf Schaltfläche.
  5. Geben Sie einen Namen für die Schaltfläche ein, z. B. Absenden.

  6. Wählen Sie im Feld Steuerelementuntertyp die Schaltfläche aus, die Sie als Ziel verwenden möchten:

  7. Weiter: Die Navigationsschaltfläche, die zum nächsten Bildschirm führt.

  8. Fertig: Die Navigationsschaltfläche, die die Wizard-Seite abschließt und beendet.

  9. Zurück: Die Navigationsschaltfläche, die zum vorherigen Bildschirm führt.

  10. Klicken Sie auf Weiter.

  11. Weisen Sie optional ein auszuführendes Ereignis oder eine zu verknüpfende Seite zu und klicken Sie dann auf Weiter.
  12. Überprüfen Sie die vorgeschlagenen Aktualisierungen und klicken Sie auf Fertig.

Schaltfläche „Fertig" konfigurieren

Eine Fertig-Schaltfläche ist ein Sonderfall: Sie wird nur angezeigt, wenn sie im letzten sichtbaren Panel einer Wizard-Seite definiert ist. Um eine Fertig-Schaltfläche zu konfigurieren oder zu überschreiben, müssen Sie dies im letzten sichtbaren Panel der Wizard-Seite tun.

Wenn Ihre Wizard-Seite bedingte Pfade hat, können Sie eine Fertig-Schaltfläche auf jedem Panel definieren, das möglicherweise das letzte sichtbare wird, und App Builder zeigt je nach Bedarf entweder die Weiter- oder die Fertig-Schaltfläche an. Wenn eine Fertig-Schaltfläche vor dem letzten sichtbaren Bildschirm angezeigt werden soll, definieren Sie eine Weiter-Schaltfläche (oder eine andere), setzen Sie deren Beschriftung auf Finish und lassen Sie sie die Wizard-Seite schließen oder zu einer anderen Seite navigieren, um denselben Effekt zu erzielen.

  1. Öffnen Sie die gewünschte Seite und wählen Sie Action Drawer > Live Designer. Alternativ öffnen Sie den Bearbeitungsbildschirm der gewünschten Seite über App Workbench > Pages.
  2. Wenn Sie den Live Designer verwenden, klicken Sie auf die Registerkarte All Panels, suchen Sie das letzte sichtbare Panel und klicken Sie auf das Symbol Open record. Wenn Sie sich in der App Workbench befinden, suchen Sie das letzte sichtbare Panel im Panel Page Panel Layout und klicken Sie auf das Symbol Open record.
  3. Klicken Sie auf + Control.
  4. Setzen Sie Control Type auf Button.
  5. Setzen Sie Control Subtype auf Finish.
  6. Geben Sie den Namen ein, der auf der Schaltfläche angezeigt werden soll, z. B. Submit.
  7. Klicken Sie auf Weiter.
  8. Wenn die Schaltfläche ein Ereignis ausführen oder zu einer Seite verlinken soll, legen Sie diese Werte fest.
  9. Klicken Sie auf Weiter.
  10. Überprüfen Sie die vorgeschlagenen Aktualisierungen und klicken Sie auf Fertig.