---
sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - de-DE

ft:publication_title :

    - Yokohama Erstellen oder ändern Sie Anwendungen

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

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

Erstellen Sie eine Schaltfläche, die ein modales Element öffnet {#ariaid-title1}
================================================================================

* Freigeben Version: Yokohama
* 
* Aktualisiert 30. Januar 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 Minute Lesedauer

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](https://servicenow-prod.fluidtopics.net/lepFmeei_2nxHv01sLilJg "Erfahren Sie, was eine Komponente in UI Builderist. Sehen Sie sich auch an, wie -Komponenten in UI Builder funktionieren.").
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ßen aus.  
    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 Modales Element ö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.