Fügen Sie der Komponente Modal hinzu

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

Vorbereitungen

Erforderliche Rolle: ui_Builder_admin

Warum und wann dieser Vorgang ausgeführt wird

Ein Modal ist ein Bildschirm, der angezeigt wird, wenn ein Ereignis-Handler durch ein Ereignis ausgelöst wird, z. B. durch Klicken auf eine Schaltfläche. Das folgende Verfahren zeigt ein Beispiel für das Hinzufügen eines modalen Dialogfelds „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, in der Sie arbeiten können, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
   Siehe Konfigurieren Sie, wie Anwender mit Ihren Anwendungen in interagieren UI BuilderWeitere Informationen zum Erstellen von Experiences.
3. Öffnen oder erstellen Sie eine Seite oder Seitenvariante.
   Um weitere Informationen zum Erstellen einer Seite in zu erhalten UI Builder, Siehe Erstellen Sie eine Seite in UI Builder .
4. Fügen Sie der Seite ein modales Element hinzu.
   1. Wählen Sie aus + Symbol in der Inhaltsstruktur neben Modale Elemente und Popovers .
      
   2. Wählen Sie einen modalen Typ wie Bestätigen .
      

      Typ des Modals	Beschreibung
      Warnung	Ein modales Dialogfeld „Warnung“ stellt Informationen zur Komponentenaktion bereit. Wenn ein Anwender beispielsweise auf die Schaltfläche „Löschen“ klickt, kann ein Warnungs-Popup angezeigt werden, das den Anwender darüber informiert, dass er eine Löschaktion nicht rückgängig machen kann.
      Bestätigen	Ein Dialogfeld „Bestätigen“ fordert einen Anwender auf, die Komponentenaktion zu bestätigen. Wenn ein Anwender beispielsweise auf die Schaltfläche „Löschen“ klickt, muss der Anwender die Löschung von Daten bestätigen. Sie können die Bestätigungsoptionen aus den primären und sekundären Schaltflächenbezeichnungsfeldern auswählen, z. B. „Ja“/„Abbrechen“.
      Bestätigen und löschen	Ein modales Element zum Bestätigen und Löschen ist eine weitere Anweisung, die sich normalerweise auf das Löschen oder Löschen von Inhalten bezieht. Sie informiert den Anwender über den Schweregrad einer Aktion und fragt ihn, ob er mit der Aktion fortfahren möchte.
      Anwenderdefiniert	Das anwenderdefinierte modale Element verwendet Layouts, damit Sie vollständig entwerfen können, welche Informationen im modalen Element angezeigt werden sollen. Layouts entscheiden auch, wo sich die Informationen im modalen Bildschirm befinden. Sie können den Stil von kaskadierenden Stylesheets (CSS) verwenden, um das visuelle Erscheinungsbild des Modals zu ändern, z. B. die Hintergrundfarbe.
      iframe	Verwenden Sie iFrame, um Inhalte mithilfe vorhandener iFrame-Inhalte aus einer URL und Daten in Ihr Modal zu integrieren.
      Modaler Viewport	Übergeben Sie Inhalte mithilfe eines Client-Skripts dynamisch über eine Ereignisbindung an Ihr Viewport-Modal. Siehe Binden Sie ein Ereignis an eine KomponenteWeitere Informationen zum Binden eines Ereignisses an eine Komponente.

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

      Konfigurieren Sie jedes modale Element je nachdem, was das modale Element erfordert. Ändern Sie, welche Informationen in das modale Element gelangen, die Größe des modalen Elements und dessen Aussehen. Sie können dem Modal einen Ereignis-Handler hinzufügen, der die Aktion für das Modal ausführt, z. B. Öffnen oder Schließen des Modals.

      Modal	Konfiguration
      Warnung	Hinzufügen A Header , Was der Titel des Modals ist. Schreiben Sie den Inhalt, der im Modal angezeigt werden soll. Der Inhalt teilt dem Anwender mit, was die Warnung ist. Fügen Sie Text für die Schaltflächenbezeichnung hinzu. Es kann alles sein, was Sie möchten, z. B. OK , Ja , Und so weiter. Wählen Sie die Größe des modalen Elements auf dem Bildschirm aus. Wählen Sie Aus Klein , Mittel , Groß , Oder Vollbild . Aktivieren oder deaktivieren Standardschaltflächenaktion Verhindern , Abhängig davon, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Laden des modalen Inhalts zurückstellen . Wenn Sie es deaktivieren, wird das modale Element mit der Seite geladen. Wenn Sie dies aktivieren, wird das modale Element beim Laden der Seite nicht geladen. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. Dient zum Hinzufügen eines Ereignis-Handlers zum Modal. Wählen Sie einen Ereignis-Handler aus, der auf das Modal angewendet werden soll, und wählen Sie dann aus Hinzufügen Um es der Seite hinzuzufügen. Wählen Sie aus geerbten Ereignis-Handlern oder Ereignis-Handlern auf Seitenebene aus. Ereignis-Handler führen eine Aktion aus, z. B. ein modales Element öffnen oder schließen. Abhängig vom modalen Typ können Sie Daten für die App-Shell-Datenquelle, die Anwendersitzung für GraphQL oder eine Anwendersitzung für Transformation 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 Anwender mit, was die Warnung ist. Fügen Sie Text für die primäre Schaltfläche hinzu. Die primäre Schaltfläche ist die Hauptaktionsschaltfläche für Anwender, z. B. Ja , Hinzufügen , Und so weiter. Fügen Sie Text für die sekundäre Schaltfläche hinzu. Die sekundäre Schaltfläche ist normalerweise keine Auswahl für Anwender, z. B. Abbrechen , Nein , Und so weiter. Wählen Sie die Größe des modalen Elements auf dem Bildschirm aus. Wählen Sie Aus Klein , Mittel , Groß , Oder Vollbild . Aktivieren oder deaktivieren Standardmäßige Primäre Schaltflächenaktion Verhindern , Abhängig davon, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Standardmäßige Sekundäre Schaltflächenaktion Verhindern , Abhängig davon, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Laden des modalen Inhalts zurückstellen . Wenn Sie es deaktivieren, wird das modale Element mit der Seite geladen. Wenn Sie dies aktivieren, wird das modale Element beim Laden der Seite nicht geladen. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. Dient zum Hinzufügen eines Ereignis-Handlers zum Modal. Wählen Sie einen Ereignis-Handler aus, der auf das Modal angewendet werden soll. Wählen Sie aus geerbten Ereignis-Handlern oder Ereignis-Handlern auf Seitenebene aus. Ereignis-Handler führen eine Aktion aus, z. B. ein modales Element öffnen oder schließen. Abhängig vom modalen Typ können Sie Daten für die App-Shell-Datenquelle, die Anwendersitzung für GraphQL oder eine Anwendersitzung für Transformation 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 Anwender mit, was die Warnung ist. 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 keine Auswahl für Anwender, z. B. Abbrechen , Nein , Und so weiter. Wählen Sie die Größe des modalen Elements auf dem Bildschirm aus. Wählen Sie Aus Klein , Mittel , Groß , Oder Vollbild . Aktivieren oder deaktivieren Standardmäßige Primäre Schaltflächenaktion Verhindern , Abhängig davon, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Standardmäßige Sekundäre Schaltflächenaktion Verhindern , Abhängig davon, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Laden des modalen Inhalts zurückstellen . Wenn Sie es deaktivieren, wird das modale Element mit der Seite geladen. Wenn Sie dies aktivieren, wird das modale Element beim Laden der Seite nicht geladen. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. Dient zum Hinzufügen eines Ereignis-Handlers zum Modal. Wählen Sie einen Ereignis-Handler aus, der auf das Modal angewendet werden soll. Wählen Sie aus geerbten Ereignis-Handlern oder Ereignis-Handlern auf Seitenebene aus. Ereignis-Handler führen eine Aktion aus, z. B. ein modales Element öffnen oder schließen. Abhängig vom modalen Typ können Sie Daten für die App-Shell-Datenquelle, die Anwendersitzung für GraphQL oder eine Anwendersitzung für Transformation aktualisieren.
      Anwenderdefiniert	Wählen Sie ein Layout für Ihr modales Element aus. Sie können ein Flexbox- oder CSS-Rasterlayout verwenden. Mit diesen Layouts können Sie Inhalte in Ihrem Modal hinzufügen, wie Sie möchten. Verwenden Sie Stiloptionen, um das Aussehen Ihres modalen Elements zu ändern. Sie können alle standardmäßigen 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. Dient zum Hinzufügen eines Ereignis-Handlers zum Modal. Wählen Sie einen Ereignis-Handler aus, der auf das Modal angewendet werden soll. Wählen Sie aus geerbten Ereignis-Handlern oder Ereignis-Handlern auf Seitenebene aus. Ereignis-Handler führen eine Aktion aus, z. B. ein modales Element öffnen oder schließen. Abhängig vom modalen Typ können Sie Daten für die App-Shell-Datenquelle, die Anwendersitzung für GraphQL oder eine Anwendersitzung für Transformation 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 fest, die Sie iFrame erstellen möchten. Wählen Sie die Größe des modalen Elements auf dem Bildschirm aus. Wählen Sie Aus Klein , Mittel , Groß , Oder Vollbild . Aktivieren Sandbox deaktivieren So heben Sie die folgenden Einschränkungen auf: Allow-Forms, allow-modals, allow-Popups, allow-Presentation, allow-same-origin, Optionen „Allow-Skripts“ und „Allow-Downloads“. Deaktivieren Sie Sandbox deaktivieren Um nur die Option „Allow-Skripts“ aufzuheben. Aktivieren oder deaktivieren Laden des modalen Inhalts zurückstellen . Wenn Sie es deaktivieren, wird das modale Element mit der Seite geladen. Wenn Sie dies aktivieren, wird das modale Element beim Laden der Seite nicht geladen. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. Dient zum Hinzufügen eines Ereignis-Handlers zum Modal. Wählen Sie einen Ereignis-Handler aus, der auf das Modal angewendet werden soll. Wählen Sie aus geerbten Ereignis-Handlern oder Ereignis-Handlern auf Seitenebene aus. Ereignis-Handler führen eine Aktion aus, z. B. ein modales Element öffnen oder schließen. Abhängig vom modalen Typ können Sie Daten für die App-Shell-Datenquelle, die Anwendersitzung für GraphQL oder eine Anwendersitzung für Transformation aktualisieren.
      Modaler Viewport	Wählen Sie die Größe des modalen Elements auf dem Bildschirm aus. Wählen Sie Aus Klein , Mittel , Groß , Oder Vollbild . Aktivieren oder deaktivieren Blenden Sie Den Abstand Aus . Aktivieren oder deaktivieren Schaltfläche „Schließen“ Ausblenden . Wenn Sie dies aktivieren, wird die Schaltfläche „Schließen“ nicht im modalen Element angezeigt. Aktivieren oder deaktivieren Laden des modalen Inhalts zurückstellen . Wenn Sie es deaktivieren, wird das modale Element mit der Seite geladen. Wenn Sie dies aktivieren, wird das modale Element beim Laden der Seite nicht geladen. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. Dient zum Hinzufügen eines Ereignis-Handlers zum Modal. Wählen Sie einen Ereignis-Handler aus, der auf das Modal angewendet werden soll. Wählen Sie aus geerbten Ereignis-Handlern oder Ereignis-Handlern auf Seitenebene aus. Ereignis-Handler führen eine Aktion aus, z. B. ein modales Element öffnen oder schließen. Abhängig vom modalen Typ können Sie Daten für die App-Shell-Datenquelle, die Anwendersitzung für GraphQL oder eine Anwendersitzung für Transformation aktualisieren. Wählen Sie die Viewport-Komponente im modalen Viewport aus. Wählen Sie Aus + Hinzufügen Auf der Registerkarte Konfigurieren, 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 modale Element auszulösen, z. B. eine Schaltflächenkomponente.
   Weitere Informationen finden Sie unter Komponenten hinzufügen und konfigurieren.
6. Wählen Sie aus Ereignisse Registerkarte im Konfigurationsbereich.
7. Wählen Sie Aus + Ereignishandler hinzufügen .
   
8. Wählen Sie Aus Öffnen oder schließen Sie den modalen Dialog .
9. Wählen Sie das Modal aus, das Sie in den vorherigen Schritten mit erstellt haben Modal Dropdownliste.
10. Klicken Sie auf Hinzufügen.
    
11. Wenn Sie die Konfiguration des Modals abgeschlossen haben, schließen Sie es.

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

    
12. Klicken Sie auf Speichern.