Modal zur Komponente hinzufügen

Erfahren Sie, wie Sie in UI Builderein Modal hinzufügen. Ein modales Element ist ein Fenster, das angezeigt wird, wenn Sie auf eine Komponente klicken. Beispielsweise kann ein Modal angezeigt werden, wenn auf eine Schaltflächenkomponente zum Löschen geklickt wird, und der Anwender wird aufgefordert, das Löschen eines Datensatzes zu bestätigen.

Vorbereitungen

Erforderliche Rolle: ui_builder_admin

Warum und wann dieser Vorgang ausgeführt wird

Ein modaler Dialog ist ein Bildschirm, der angezeigt wird, wenn ein Ereignishandler durch ein Ereignis ausgelöst wird, z. B. durch das Klicken auf eine Schaltfläche. Das folgende Verfahren zeigt ein Beispiel für das Hinzufügen eines modalen Elements Bestätigen und eines zugehörigen Ereignis-Handlers zu einer Schaltflächenkomponente.

Prozedur

1. Navigieren zu Alle > Now Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
3. Öffnen oder erstellen Sie eine Seite oder Seitenvariante.
   Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter Seite in UI Builder erstellen.
4. Fügen Sie der Seite ein modales Element hinzu.
   1. Wählen Sie in der Inhaltsstruktur neben Modals und Popovers das Symbol +aus.
      
   2. Wählen Sie einen modalen Typ wie z.  B. Bestätigenaus.
      

      Modaler Typ	Beschreibung
      Warnung	Ein modales Element „Warnung“ enthält Informationen zur Komponentenaktion. Wenn ein Benutzer beispielsweise auf die Schaltfläche „Löschen“ klickt, kann ein Warnungs-Popup angezeigt werden, das ihn darüber informiert, dass er eine Löschaktion nicht rückgängig machen kann.
      Bestätigen	Ein modales Element zum Bestätigen fordert einen Benutzer auf, die Komponentenaktion zu bestätigen. Wenn ein Benutzer beispielsweise die Schaltfläche „Löschen“ klickt, muss er das Löschen von Daten bestätigen. Sie können die Bestätigungsoptionen aus dem primären und sekundären Schaltflächenbezeichnungsfeld auswählen, z. B. Ja/Abbrechen.
      Bestätigen und löschen	Ein modales Element zum Bestätigen und Löschen ist eher eine Direktive, die sich normalerweise auf das Löschen oder Löschen von Inhalten bezieht. Sie teilt dem Benutzer die Schwere einer Aktion mit und fragt, ob er mit der Aktion fortfahren möchte.
      Anwenderdefiniert	Das anwenderdefinierte modale Fenster verwendet Layouts, damit Sie die gewünschten Informationen im modalen Fenster vollständig entwerfen können. Layouts entscheiden auch, wo die Informationen auf dem modalen Bildschirm platziert werden. Sie können den Stil von Cskading Style Sheets (CSS) verwenden, um das visuelle Erscheinungsbild des Modals zu ändern, z. B. die Hintergrundfarbe.
      iframe	Verwenden Sie iframe, um Inhalte in Ihr Modal zu bringen, indem Sie vorhandene iframe-Inhalte aus einer URL und Daten verwenden.
      Modaler Viewport	Übergeben Sie Inhalte dynamisch über eine Ereignisbindung mithilfe eines Client-Skripts an Ihr Viewport-Modal. Weitere Informationen zum Binden eines Ereignisses an eine Komponente finden Sie unter Binden Sie ein Ereignis an eine Komponente.

   3. Konfigurieren Sie die modalen Elemente wie in der Tabelle gezeigt.

      Konfigurieren Sie jedes Modal unterschiedlich, je nachdem, was das Modal erfordert. Ändern Sie die Informationen, die in das Modal eingefügt werden, die Größe des Modals und wie es aussieht. Sie können dem Modal einen Ereignishandler hinzufügen, der die Aktion für das Modal ausführt, z. B. Öffnen oder Schließen des Modals.

      Modal	Konfiguration
      Warnung	Fügen Sie einen -Headerhinzu, der der Titel des Modals ist. Schreiben Sie den Inhalt, der im Modal angezeigt werden soll. Der Inhalt teilt dem Benutzer mit, um welche Warnung es sich handelt. Fügen Sie Text für die Schaltflächenbezeichnung hinzu. Dies kann alles sein, was Sie möchten, z.  B. OK,Ja usw. Wählen Sie die Größe des Dialogfelds auf dem Bildschirm. Wählen Sie Klein, Mittel, Großoder Vollbildaus. Aktivieren oder deaktivieren Sie die Standardschaltflächenaktion verhindern, je nachdem, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Sie das Laden des modalen Inhalts „Zurückstellen“. Wenn Sie die Option deaktivieren, wird das Modal mit der Seite geladen. Wenn Sie es aktivieren, wird das Modal nicht geladen, wenn die Seite geladen wird. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. um dem Modal einen Ereignishandler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll, und wählen Sie dann Hinzufügen, um ihn der Seite hinzuzufügen. Wählen Sie aus geerbten Ereignishandlern oder Ereignishandlern auf Seitenebene aus. Ereignishandler führen eine Aktion aus, z. B. das Öffnen oder Schließen eines Modals. Je nach Modaltyp können Sie Daten für die App-Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transformieren aktualisieren.
      Bestätigen	Fügen Sie einen Header hinzu, der der Titel des Modals ist. Schreiben Sie den Inhalt, der im Modal angezeigt werden soll. Der Inhalt teilt dem Benutzer mit, um welche Warnung es sich handelt. Fügen Sie Text für die primäre Schaltfläche hinzu. Die primäre Schaltfläche ist die Hauptaktionsschaltfläche für Benutzer, z. B. Ja, Hinzufügenusw. Fügen Sie Text für die sekundäre Schaltfläche hinzu. Die sekundäre Schaltfläche ist normalerweise die Nicht-Auswahl für Benutzer, z. B. Abbrechen, Neinusw. Wählen Sie die Größe des Dialogfelds auf dem Bildschirm. Wählen Sie Klein, Mittel, Großoder Vollbildaus. Aktivieren oder deaktivieren Sie das Verhindern der standardmäßigen primären Schaltflächenaktion, je nachdem, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Sie die standardmäßige sekundäre Schaltflächenaktion verhindern, je nachdem, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Sie das Laden des modalen Inhalts „Zurückstellen“. Wenn Sie die Option deaktivieren, wird das Modal mit der Seite geladen. Wenn Sie es aktivieren, wird das Modal nicht geladen, wenn die Seite geladen wird. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. um dem Modal einen Ereignishandler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll. Wählen Sie aus geerbten Ereignishandlern oder Ereignishandlern auf Seitenebene aus. Ereignishandler führen eine Aktion aus, z. B. das Öffnen oder Schließen eines Modals. Je nach Modaltyp können Sie Daten für die App-Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transformieren aktualisieren.
      Bestätigen oder löschen	Fügen Sie einen Header hinzu, der der Titel des Modals ist. Schreiben Sie den Inhalt, der im Modal angezeigt werden soll. Der Inhalt teilt dem Benutzer mit, um welche Warnung es sich handelt. Fügen Sie Text für die primäre Schaltfläche hinzu. Primär ist die Hauptaktionsschaltfläche für Anwender, z. B. Löschen oder Löschen. Fügen Sie Text für die sekundäre Schaltfläche hinzu. Die sekundäre Schaltfläche ist normalerweise die Nicht-Auswahl für Benutzer, z. B. Abbrechen, Neinusw. Wählen Sie die Größe des Dialogfelds auf dem Bildschirm. Wählen Sie Klein, Mittel, Großoder Vollbildaus. Aktivieren oder deaktivieren Sie das Verhindern der standardmäßigen primären Schaltflächenaktion, je nachdem, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Sie die standardmäßige sekundäre Schaltflächenaktion verhindern, je nachdem, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Sie das Laden des modalen Inhalts „Zurückstellen“. Wenn Sie die Option deaktivieren, wird das Modal mit der Seite geladen. Wenn Sie es aktivieren, wird das Modal nicht geladen, wenn die Seite geladen wird. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. um dem Modal einen Ereignishandler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll. Wählen Sie aus geerbten Ereignishandlern oder Ereignishandlern auf Seitenebene aus. Ereignishandler führen eine Aktion aus, z. B. das Öffnen oder Schließen eines Modals. Je nach Modaltyp können Sie Daten für die App-Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transformieren aktualisieren.
      Anwenderdefiniert	Wählen Sie ein Layout für Ihr Dialogfeld aus. Sie können ein Flexbox- oder CSS-Rasterlayout verwenden. Mit diesen Layouts können Sie Ihrem Modal Inhalte hinzufügen, wie Sie möchten. Verwenden Sie Formatierungsoptionen, um das Erscheinungsbild Ihres Modals zu ändern. Sie können alle Standard-CSS-Stile auf Ihr Modal anwenden, z. B. Hintergrundfarbe und Abstand. Weitere Informationen zum Stil finden Sie unter Ändern Sie die Standarddarstellung von Komponenten. Fügen Sie den Containern im anwenderdefinierten Modal Komponenten hinzu. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. um dem Modal einen Ereignishandler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll. Wählen Sie aus geerbten Ereignishandlern oder Ereignishandlern auf Seitenebene aus. Ereignishandler führen eine Aktion aus, z. B. das Öffnen oder Schließen eines Modals. Je nach Modaltyp können Sie Daten für die App-Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transformieren aktualisieren.
      iframe	Fügen Sie einen Header hinzu, der der Titel des Modals ist. Fügen Sie eine Quell-URL hinzu, die auf Ihren vorhandenen IFrame-Inhalt verweist. Legen Sie die Parameter und Anfangsdaten für den IFrame fest. Wählen Sie die Größe des Dialogfelds auf dem Bildschirm. Wählen Sie Klein, Mittel, Großoder Vollbildaus. Aktivieren Sie die Option „Sandbox deaktivieren“, um die folgenden Einschränkungen aufzuheben: Optionen „allow-forms“, „allow-modals“, „allow-popups“, „allow-presentation“, „allow-same-origin“, „allow-scripts“ und „allow-downloads“. Deaktivieren Sie „ Sandbox deaktivieren“, um nur die Option „allow-scripts“ zu entfernen. Aktivieren oder deaktivieren Sie das Laden des modalen Inhalts „Zurückstellen“. Wenn Sie die Option deaktivieren, wird das Modal mit der Seite geladen. Wenn Sie es aktivieren, wird das Modal nicht geladen, wenn die Seite geladen wird. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. um dem Modal einen Ereignishandler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll. Wählen Sie aus geerbten Ereignishandlern oder Ereignishandlern auf Seitenebene aus. Ereignishandler führen eine Aktion aus, z. B. das Öffnen oder Schließen eines Modals. Je nach Modaltyp können Sie Daten für die App-Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transformieren aktualisieren.
      Modaler Viewport	Wählen Sie die Größe des Dialogfelds auf dem Bildschirm. Wählen Sie Klein, Mittel, Großoder Vollbildaus. Aktivieren oder deaktivieren Sie das Ausblenden der Auffüllung. Aktivieren oder deaktivieren Sie die Schaltfläche „Schließen“ ausblenden. Wenn Sie sie aktivieren, wird die Schaltfläche zum Schließen nicht im Modal angezeigt. Aktivieren oder deaktivieren Sie das Laden des modalen Inhalts „Zurückstellen“. Wenn Sie die Option deaktivieren, wird das Modal mit der Seite geladen. Wenn Sie es aktivieren, wird das Modal nicht geladen, wenn die Seite geladen wird. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. um dem Modal einen Ereignishandler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll. Wählen Sie aus geerbten Ereignishandlern oder Ereignishandlern auf Seitenebene aus. Ereignishandler führen eine Aktion aus, z. B. das Öffnen oder Schließen eines Modals. Je nach Modaltyp können Sie Daten für die App-Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transformieren aktualisieren. Wählen Sie die Viewport-Komponente im modalen Viewport aus. Wählen Sie auf der Registerkarte Konfigurieren die Option + Hinzufügen aus, um dem Viewport eine Seitensammlung hinzuzufügen. Wählen Sie eine Seitensammlung aus der Liste aus, und klicken Sie auf Hinzufügen.

5. Fügen Sie Ihrer Seite eine Komponente hinzu, um das gerade hinzugefügte Modal auszulösen, z. B. eine Schaltflächenkomponente.
   Weitere Informationen finden Sie unter Komponenten hinzufügen und konfigurieren.
6. Wählen Sie im Konfigurationsbereich die Registerkarte Ereignisse.
7. Wählen Sie + Ereignishandler hinzufügen aus.
   
8. Wählen Sie Modalen Dialog öffnen oder schließen aus.
9. Wählen Sie das in den vorherigen Schritten erstellte modale Element mithilfe der Dropdown-Liste „Modal“ aus.
10. Klicken Sie auf Hinzufügen.
    
11. Wenn Sie mit der Konfiguration des Modals fertig sind, schließen Sie es.

    Beachten Sie, dass sich die von Ihnen erstellten modalen Elemente in der Inhaltsstruktur über dem Textkörper Ihrer Seitenstruktur befinden.

    
12. Klicken Sie auf Speichern.