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 modales Element erstellen und die Schaltfläche so konfigurieren, dass das modale Element 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 die Schaltfläche + Inhalt hinzufügen, um die Toolbox zu öffnen.
3. Wählen Sie ein Einzelspalten- Layout aus.
4. Klicken Sie anschließend in der Spalte auf das Symbol +, um die Toolbox zu öffnen.
5. Wählen Sie die Komponente „Schaltfläche“ 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 die Seiten UI Builder mithilfe von Komponenten an.
6. Wählen Sie im Bereich Seitenkonfiguration die Option Komponente manuell konfigurieren aus.
7. Wählen Sie im Bereich Seiteninhalt Schaltfläche 1 aus, und ändern Sie im Konfigurationsbereich die Schaltflächenbezeichnung in Modal öffnen.
8. Wählen Sie Speichern.
9. Klicken Sie im Bereich Seiteninhalt auf das Plus-Symbol neben Modale Elemente, und wählen Sie ein modales Element Warnung aus.

   Abbildung : 3. Fügen Sie ein Warnungsdialogfeld hinzu

   

10. Wählen Sie Speichern.
11. Wählen Sie im Bereich Seiteninhalte Schaltfläche 1 und dann im Konfigurationsbereich die Registerkarte Ereignisse aus.
12. Wählen Sie + Ereignishandler hinzufügen und anschließend unter Übernommene Ereignishandlerdie Option Modalen Dialog öffnen oder schließenaus.

    Abbildung : 4. Modale Konfiguration anzeigen/ausblenden

    

13. Aktivieren Sie den modalen Dialog Öffnen, wählen Sie im Feld ModalWarnung 1, und wählen Sie Hinzufügen.
14. Wählen Sie Speichern.
15. Wählen Sie Vorschau.
16. Wenn die Vorschau geöffnet wird, wählen Sie ModalesElement öffnen aus.
    Das von Ihnen definierte Modal wird geöffnet.

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

    

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

Nächste Maßnahme

Wählen Sie den Link Nächstes Thema, um zu erfahren, wie Sie mit einer Vorlage eine Seite erstellen.