Modales Element zu Komponente hinzufügen

Erfahren Sie, wie Sie ein modales Element in UI Builderhinzufügen. Ein Modal 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 Benutzer 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 Modal ist ein Bildschirm, der angezeigt wird, wenn ein Event Handler durch ein Event ausgelöst wird, z. B. durch Klicken auf eine Schaltfläche. Das folgende Verfahren zeigt ein Beispiel für das Hinzufügen eines modalen Bestätigens und eines zugehörigen Event Handlers zu einer Schaltflächenkomponente.

Prozedur

1. Navigieren zu Alle > Now Experience Framework > UI Builder.
2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenwählen.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
3. Öffnen oder erstellen Sie eine Seitenvariante.
   Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter Seiten 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 Bestätigenaus.
      

      Modal-Typ	Beschreibung
      Warnung	Ein Warnungsdialogfeld enthält Informationen zur Komponentenaktion. Wenn ein Benutzer beispielsweise auf die Schaltfläche „Löschen“ klickt, könnten Sie ein Warnungs-Popup anzeigen, das den Benutzer 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 eine Löschtaste klickt, muss er die Löschung der 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 Modal zum Bestätigen und Löschen ist direktiver und bezieht sich normalerweise auf das Löschen oder Löschen von Inhalten. Sie informiert den Benutzer über die Schwere einer Aktion und fragt ihn, ob er mit der Aktion fortfahren möchte.
      Benutzerdefiniert	Das benutzerdefinierte Modal verwendet Layouts, damit Sie vollständig gestalten können, welche Informationen im Modal angezeigt werden sollen. Layouts entscheiden auch, wo sich die Informationen auf dem modalen Bildschirm befinden. Sie können Cascading 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 übertragen, indem Sie vorhandene IFrame-Inhalte aus einer URL und Daten verwenden.
      Modaler Viewport	Übergeben Sie Inhalte dynamisch an Ihr Viewport-Modal durch eine Event-Bindung mit einem Client-Skript. Weitere Informationen zum Binden eines Events an eine Komponente finden Sie unter Binden Sie ein Event 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, welche Informationen in das Modal eingefügt werden, wie groß das Modal ist und wie es aussieht. Sie können dem Modal einen Event Handler hinzufügen, der die Aktion für das Modal ausführt, z. B. das Modal öffnen oder schließen.

      Modal	Konfiguration
      Warnung	Fügen Sie eine -Kopfzeilehinzu, die der Titel des Modals ist. Schreiben Sie den Inhalt, den Sie im Modal anzeigen möchten. Der Inhalt teilt dem Benutzer mit, was die Warnung ist. Fügen Sie Text für die Schaltflächenbezeichnung hinzu. Es kann alles sein, was Sie wollen, z. B. OK, Jausw. Wählen Sie die Größe des Modals auf dem Bildschirm aus. Wählen Sie Klein, Mittel, Großoder Vollbild aus. Aktivieren oder deaktivieren Sie Standardmäßige 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 sie deaktivieren, wird das Modal mit der Seite geladen. Wenn Sie sie aktivieren, wird das Modal beim Laden der Seite nicht geladen. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. , um dem Modal einen Event-Handler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll, und wählen Sie dann Hinzufügen aus, um ihn der Seite hinzuzufügen. Wählen Sie zwischen geerbten Event-Handlern oder Event-Handlern auf Seitenebene. Event Handler führen eine Aktion aus, z. B. Öffnen oder Schließen eines Modals. Abhängig vom modalen Typ können Sie Daten für die App Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transform aktualisieren.
      Bestätigen	Fügen Sie einen Header hinzu, der den Titel des modalen Elements darstellt. Schreiben Sie den Inhalt, den Sie im Modal anzeigen möchten. Der Inhalt teilt dem Benutzer 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 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 keine Auswahl für Benutzer, z. B. Abbrechen, Neinusw. Wählen Sie die Größe des Modals auf dem Bildschirm aus. Wählen Sie Klein, Mittel, Großoder Vollbild aus. Aktivieren oder deaktivieren Sie Standardmäßige primäre Schaltflächenaktion verhindern, je nachdem, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Sie 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 sie deaktivieren, wird das Modal mit der Seite geladen. Wenn Sie sie aktivieren, wird das Modal beim Laden der Seite nicht geladen. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. , um dem Modal einen Event-Handler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll. Wählen Sie zwischen geerbten Event-Handlern oder Event-Handlern auf Seitenebene. Event Handler führen eine Aktion aus, z. B. Öffnen oder Schließen eines Modals. Abhängig vom modalen Typ können Sie Daten für die App Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transform aktualisieren.
      Bestätigen oder löschen	Fügen Sie einen Header hinzu, der den Titel des modalen Elements darstellt. Schreiben Sie den Inhalt, den Sie im Modal anzeigen möchten. Der Inhalt teilt dem Benutzer 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 Benutzer, 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 Benutzer, z. B. Abbrechen, Neinusw. Wählen Sie die Größe des Modals auf dem Bildschirm aus. Wählen Sie Klein, Mittel, Großoder Vollbild aus. Aktivieren oder deaktivieren Sie Standardmäßige primäre Schaltflächenaktion verhindern, je nachdem, ob das Modal basierend auf der Standardaktion geschlossen werden soll. Aktivieren oder deaktivieren Sie 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 sie deaktivieren, wird das Modal mit der Seite geladen. Wenn Sie sie aktivieren, wird das Modal beim Laden der Seite nicht geladen. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. , um dem Modal einen Event-Handler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll. Wählen Sie zwischen geerbten Event-Handlern oder Event-Handlern auf Seitenebene. Event Handler führen eine Aktion aus, z. B. Öffnen oder Schließen eines Modals. Abhängig vom modalen Typ können Sie Daten für die App Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transform aktualisieren.
      Benutzerdefiniert	Wählen Sie ein Layout für Ihr Modal. Sie können ein Flexbox- oder CSS-Rasterlayout verwenden. Mit diesen Layouts können Sie Ihrem Modal beliebig Inhalte hinzufügen. Verwenden Sie Stiloptionen, um das Aussehen Ihres Modals zu ändern. Sie können alle Standard-CSS-Stile auf Ihr Modal anwenden, z. B. Hintergrundfarbe und Abstand. Weitere Informationen zu Stilen finden Sie unter Ändern Sie die Standarddarstellung von Komponenten. Fügen Sie den Containern im benutzerdefinierten Modal Komponenten hinzu. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. , um dem Modal einen Event-Handler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll. Wählen Sie zwischen geerbten Event-Handlern oder Event-Handlern auf Seitenebene. Event Handler führen eine Aktion aus, z. B. Öffnen oder Schließen eines Modals. Abhängig vom modalen Typ können Sie Daten für die App Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transform aktualisieren.
      IFrame	Fügen Sie einen Header hinzu, der den Titel des modalen Elements darstellt. Fügen Sie eine Quell-URL hinzu, die auf Ihren vorhandenen IFrame-Inhalt verweist. Legen Sie die Parameter und Anfangsdaten fest, für die Sie einen IFrame erstellen möchten. Wählen Sie die Größe des Modals auf dem Bildschirm aus. Wählen Sie Klein, Mittel, Großoder Vollbild aus. Aktivieren Sie „ Sandbox deaktivieren “, um die folgenden Einschränkungen aufzuheben: „allow-forms“, „allow-modals“, „allow-popups“, „allow-presentation“, „allow-same-origin“, „allow-scripts“ und „allow-downloads“. Deaktivieren Sie die Sandbox deaktivieren, um nur die Option „allow-scripts“ anzuheben. Aktivieren oder deaktivieren Sie das Laden des modalen Inhalts zurückstellen. Wenn Sie sie deaktivieren, wird das Modal mit der Seite geladen. Wenn Sie sie aktivieren, wird das Modal beim Laden der Seite nicht geladen. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. , um dem Modal einen Event-Handler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll. Wählen Sie zwischen geerbten Event-Handlern oder Event-Handlern auf Seitenebene. Event Handler führen eine Aktion aus, z. B. Öffnen oder Schließen eines Modals. Abhängig vom modalen Typ können Sie Daten für die App Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transform aktualisieren.
      Modaler Viewport	Wählen Sie die Größe des Modals auf dem Bildschirm aus. Wählen Sie Klein, Mittel, Großoder Vollbild aus. Aktivieren oder deaktivieren Sie „Auffüllung ausblenden“. Aktivieren oder deaktivieren Sie die Schaltfläche „Schließen“ ausblenden. Wenn Sie sie aktivieren, wird die Schaltfläche „Schließen“ nicht im modalen Fenster angezeigt. Aktivieren oder deaktivieren Sie das Laden des modalen Inhalts zurückstellen. Wenn Sie sie deaktivieren, wird das Modal mit der Seite geladen. Wenn Sie sie aktivieren, wird das Modal beim Laden der Seite nicht geladen. Auswahlvorgang Ereignisse > Fügen Sie eine Ereigniszuordnung hinzu. , um dem Modal einen Event-Handler hinzuzufügen. Wählen Sie einen Ereignishandler aus, der auf das Modal angewendet werden soll. Wählen Sie zwischen geerbten Event-Handlern oder Event-Handlern auf Seitenebene. Event Handler führen eine Aktion aus, z. B. Öffnen oder Schließen eines Modals. Abhängig vom modalen Typ können Sie Daten für die App Shell-Datenquelle, die Benutzersitzung für GraphQL oder eine Benutzersitzung für Transform 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 Fügen Sie Komponenten hinzu, und konfigurieren Sie sie.
6. Wechseln Sie im Konfigurationsbereich zur Registerkarte Events.
7. Wählen Sie + Event-Handler hinzufügen.
   
8. Wählen Sie Modalen Dialog öffnen oder schließen.
9. Wählen Sie in der Dropdown-Liste Modal das Modal aus, das Sie in den vorherigen Schritten erstellt haben.
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 sich die von Ihnen erstellten modalen Elemente über dem Textkörper Ihrer Seitenstruktur befinden.

    
12. Klicken Sie auf Speichern.