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 konfigurieren, um das modale Element zu öffnen.

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 auf + Inhalt hinzufügen Schaltfläche in der Phase zum Öffnen der Toolbox.
3. Wählen Sie ein aus Einzelne Spalte Layout.
4. Klicken Sie als Nächstes auf + Symbol in der Spalte zum Öffnen der Toolbox.
5. Wählen Sie aus Schaltfläche Komponente, 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. Aus Gründen dieser Übung konfigurieren Sie die Komponente jedoch manuell. Weitere Informationen zu Voreinstellungen finden Sie unter Anpassen UI BuilderSeiten mit Komponenten.
6. Wählen Sie Hinzufügen.
7. Wählen Sie im Bereich Seitenkonfiguration die Option aus Konfigurieren Sie die Komponente manuell .
8. Wählen Sie im Seiteninhaltsbereich aus Schaltfläche 1 Und ändern Sie im Konfigurationsbereich die Schaltflächenbezeichnung in Öffnen Sie das modale Element .
9. Wählen Sie Speichern.
10. Klicken Sie im Seiteninhaltsbereich auf das Plussymbol neben Modale Elemente Und wählen Sie aus Warnung Modal.

    Abbildung : 3. Fügen Sie ein modales Element „Warnung“ hinzu

    

11. Wählen Sie Speichern.
12. Wählen Sie im Bereich Seiteninhalte die Option aus Schaltfläche 1 Und wählen Sie im Konfigurationsbereich aus Ereignisse Registerkarte.
13. Wählen Sie Aus + Ereignishandler hinzufügen Und, unter Geerbte Ereignis-Handler , Auswählen Öffnen oder schließen Sie den modalen Dialog .

    Abbildung : 4. Modale Konfiguration anzeigen/ausblenden

    

14. Aktivieren Sie Öffnen Sie den modalen Dialog Und wählen Sie aus Warnung 1 In Modal Und wählen Sie aus Hinzufügen .
15. Wählen Sie Speichern.
16. Wählen Sie Vorschau.
17. Wenn die Vorschau geöffnet wird, wählen Sie aus Öffnen Sie das modale Element .
    Das von Ihnen definierte Modal wird geöffnet.

    Abbildung : 5. Öffnen Sie das modale Element mit der Schaltfläche

    

18. Wählen Sie Aus Verstanden Wählen Sie im Modal die Schaltfläche zurück aus, um zum Hauptbildschirm der Experience zurückzukehren.

Nächste Maßnahme

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