Erstellen Sie eine Schaltfläche, die ein modales Element öffnet

Nachdem Sie Ihre Demo-Experience erstellt und eine leere Seite hinzugefügt haben, können Sie die Seitenvariante nach Bedarf bearbeiten. Für diese Demo können Sie eine Schaltfläche und ein Modal erstellen und die Schaltfläche so konfigurieren, dass das Modal geöffnet wird.

Vorbereitungen

Erforderliche Rolle: ui_builder_admin

Prozedur

1. Öffnen Sie die UI Builder-Seite für Ihre Demo-Experience.

   Abbildung : 1. UI Builder visueller Editor

   

2. Klicken Sie in der Phase auf das + -Symbol, um die Toolbox zu öffnen.
   
3. Wählen Sie als Layout Einzelne Spalte aus.
4. Klicken Sie als Nächstes in der Spalte auf das Symbol +, um die Toolbox zu öffnen.
5. Wählen Sie die Schaltflächenkomponente aus, um sie der Phase hinzuzufügen.

   Abbildung : 2. Fügen Sie eine Schaltfläche hinzu

   

   Hinweis:

   Wenn Sie die Komponente ausgewählt haben, enthält der Seitenkonfigurationsbereich einige Voreinstellungen, mit denen Sie Komponenten auf kompatiblen Seiten automatisch konfigurieren können. Für diese Übung konfigurieren Sie die Komponente jedoch manuell. Weitere Informationen zu Voreinstellungen finden Sie unter Passen Sie UI Builder Seiten mithilfe von -Komponenten an.
6. Wählen Sie im Seitenkonfigurationsbereich die Option Konfigurieren Sie die Komponente manuell aus.
7. Wählen Sie im Seiteninhaltsbereich Schaltfläche 1 aus, und ändern Sie im Konfigurationsbereich die Schaltflächenbezeichnung in Modales Fenster öffnen.
8. Wählen Sie Speichern.
9. Klicken Sie im Seiteninhalt auf das Plus-Symbol neben Modals, und wählen Sie ein Warnungs -Modal aus.

   Abbildung : 3. Modales Fenster „Warnung“ hinzufügen

   

10. Wählen Sie Speichern.
11. Klicken Sie im Bereich Seiteninhalte auf Schaltfläche 1, und wählen Sie im Konfigurationsbereich die Registerkarte Events aus.
12. Wählen Sie + Event-Handler hinzufügen und dann unter Übernommene Event-Handlerdie Option Modalen Dialog öffnen oder schließenaus.

    Abbildung : 4. Modale Konfiguration anzeigen/ausblenden

    

13. Aktivieren Sie das Dialogfeld „Modal öffnen“, wählen Sie im modalen Feld Warnung 1 und dann Hinzufügenaus.
14. Wählen Sie Speichern.
15. Wählen Sie Vorschau.
16. Wenn die Vorschau geöffnet wird, wählen Sie ModalesFenster öffnen.
    Das von Ihnen definierte Modal wird geöffnet.

    Abbildung : 5. Modales Fenster mit Schaltfläche öffnen

    

17. Wählen Sie im modalen Fenster die Option Abrufen und dann die Zurück-Schaltfläche des Browsers aus, um zum Hauptbildschirm der Experience zurückzukehren.

Nächste Maßnahme

Klicken Sie auf den Link Nächstes Thema, um zu erfahren, wie Sie eine Seite mithilfe einer Vorlage erstellen.