Erstellen Sie modale Elemente in UI Builder

  • Freigeben Version: Zurich
  • Aktualisiert 31. Juli 2025
  • 2 Minuten Lesedauer

    • Verwenden Sie modale Elemente in UI BuilderMit Komponenten, um Warnungen oder Aktionsaufrufe für einen Anwender bereitzustellen. UI BuilderEnthält modale Elemente, um Zeit und Aufwand zu sparen.

    Was die modalen Elemente sind

    Modale Elemente, auch als Dialogfelder bezeichnet, sind Fenster, die ein anderes Inhaltsfenster überlagern. Modale Elemente übernehmen die Kontrolle über die Anwender-Experience. Anwender können erst mit dem überlagerten Fenster interagieren, wenn das Modal geschlossen wurde. Modale Elemente können verschiedene Inhaltstypen enthalten, z. B.:
    • Statischer Text
    • Dynamischer Text
    • Formulare
    • Bilder
    • Schaltflächen

    UI Builder Hat vorkonfigurierte modale Elemente verfügbar. Sie können Ihrer Komponente ein modales Element hinzufügen. Konfigurieren Sie dann den Inhalt des Modals und die Anzeige auf dem Bildschirm. Fügen Sie dem Modal einen Ereignis-Handler hinzu, um eine Aktion auszuführen, wenn ein Anwender ihn auswählt. Die Aktion kann einen Anwender über etwas warnen oder einen Anwender bitten, eine Aktion zu bestätigen. Ein modales Element ist eine Möglichkeit, sicherzustellen, dass ein Anwender weiß, was passiert. Beispielsweise kann ein modales Element einen Anwender auffordern, eine Auswahl zu bestätigen, bevor mit der Aktion fortgefahren wird, die er auf der Hauptseite ausführt.

    Modale Anatomie

    Modale Elemente in UI BuilderKann Folgendes haben:
    • Modaler Header
    • Modaler Inhalt
    • Schaltfläche „Dialogfeld schließen“ (keine Aktion vom Modal ausgeführt)
    • Mindestens eine modale Schaltfläche (Aktion kann vom modalen Element ausgeführt werden)

    Diagramm, das die verschiedenen Teile von Modalen zeigt.

    Modal-Typen

    Verschiedene Arten von modalen Elementen sind in verfügbar UI Builder, Wie in der folgenden Tabelle gezeigt.

    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 Anwenderdefinierte Modale adressieren Szenarien, die nicht mit den standardmäßigen Modalen behandelt werden. Anwenderdefinierte modale Elemente können als Containerkomponente in einem modalen Element betrachtet werden. Sie können ein anwenderdefiniertes Layout, Komponenten, Ereignisse und Datenressourcen wie auf einer Seite hinzufügen. 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 Aussehen des Modals zu ändern.
    iframe Verwenden Sie iFrame, um Inhalte aus vorhandenen iFrame-Inhalten aus einer URL und Daten in Ihr modales Element zu übernehmen.
    Modaler Viewport Übergeben Sie Inhalte mithilfe eines Client-Skripts dynamisch über eine Ereignisbindung an Ihr Viewport-Modal.

    Ereignis-Handler und modale Elemente

    Stellen Sie Ereignisse für modale Elemente bereit, um Aufrufereignisse zu verarbeiten. Beispiel: Eine primäre Aktion, eine sekundäre Aktion usw. Sie konfigurieren die Daten, indem Sie einen Ereignis-Handler hinzufügen und eine Datenressource aufrufen. Dies ist so einfach wie das Hinzufügen eines neuen Ereignis-Handlers für die Komponente, die ein modales Element hat. Oder Sie können dem Modal selbst einen Ereignis-Handler hinzufügen. Wählen Sie das Ereignis aus, das der Komponente oder dem modalen Element zugeordnet werden soll, und fügen Sie es hinzu. Siehe Fügen Sie der Komponente Modal hinzuFür detaillierte Anweisungen.