Fügt ein Dialogfeld ohne Modus zu einer Seite UI Builder hinzu

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 4 Minuten Lesedauer

    • Erfahren Sie, wie Sie in UI Builderein Dialogfeld ohne Modus hinzufügen. Ein Dialogfeld ohne Modus ist ein unverankertes Fenster, das Inhalte über einer Seite enthält.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Die folgenden Schritte führen Sie durch den Prozess der Konfiguration einer Schaltfläche zum Öffnen eines Dialogfelds ohne Modus, das die Komponente „Anhänge“ enthält.
    Hinweis:
    Das hier beschriebene Verfahren ist nur ein Beispiel für die Verwendung von Dialogfeldern ohne Modus. Es gibt unendlich viele Möglichkeiten. Fügen Sie Dialogfelder ohne Modus hinzu, und konfigurieren Sie sie, um Ihre Geschäftsanforderungen zu erfüllen.

    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 Seitenvariante.
      Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter Seite in UI Builder erstellen.
    4. Bewegen Sie den Mauszeiger in der Inhaltsstruktur zu Dialogfelder ohne Modus, wählen Sie das Symbol + und anschließend die Komponente Dialogfeld ohne Modus aus.
      Option für Dialogfelder ohne Modus wird in der Inhaltsstruktur mit ausgewähltem Symbol + und geöffnetem Fenster mit der Komponente „Dialogfeld ohne Modus“ angezeigt.
    5. Wenn das Dialogfeld ohne Modus nicht automatisch in der Phase angezeigt wird, wählen Sie in der Inhaltsstruktur das neue Dialogfeld ohne Modus mit dem Namen Dialogfeld ohne Modus (Standard) aus.
    6. Zeigen Sie im Konfigurationsbereich Registerkarte Konfigurieren die Voreinstellungen an, die automatisch mit dem Dialogfeld ohne Modus hinzugefügt wurden, z. B. die Einstellung für Breite, Höhe und Position und aktivieren Sie das Ziehen.
      Konfigurationsbereich für Dialogfeld ohne Modus mit Registerkarte „Konfigurieren“, auf der Voreinstellungen angezeigt werden.

      Alle diese voreingestellten Eigenschaften können bei Bedarf bearbeitet werden.

      Hinweis:
      Weitere Informationen zu den erweiterten Eigenschaften von Dialogfeldern ohne Modus finden Sie auf der Developer Site von ServiceNow.
    7. Im Datenressourcen-Drawer wurde automatisch der Controller für das Dialogfeld ohne Modus hinzugefügt.
      Schwarzer Pfeil, der auf den Controller des Dialogfelds ohne Modus im Datenressourcen-Drawer zeigt.
    8. Wählen Sie in der Inhaltsstruktur unter Dialogfeld ohne Modus – Standard > Aktionen die Option + Inhalt hinzufügen aus, um dem Header des Dialogfelds ohne Modus Inhalt hinzuzufügen.
    9. Suchen Sie nach der Komponente Stilisierter Text, und wählen Sie sie aus.
    10. Wählen Sie im Konfigurationsbereich für stilisierten Text die Option Keine aus, um die Komponente manuell zu konfigurieren.
      Stilisierter Textkonfigurationsbereich mit schwarzen Pfeilen, die auf die Option „Keine“ zeigen.

      Wenn die Voreinstellung für die Unterüberschrift des Datensatzes automatisch hinzugefügt wurde, wählen Sie den Dropdown-Pfeil, wählen Sie Keineund dann Entfernen auf der Registerkarte Konfigurieren.

      Stilisierter Textkomponenten-Konfigurationsbereich mit schwarzen Pfeilen, die auf das Dropdown-Menü für Voreinstellungen und die Option „Keine“ zeigen.
    11. Wenn die Registerkarte „Konfigurieren“ noch nicht geöffnet ist, wählen Sie Konfigurieren, um die Registerkarte „Konfigurieren“ zu öffnen.
    12. Entfernen Sie unter Textden Beispieltext, und geben Sie Anhänge hinzufügenein.
      Stilisierte Textkonfigurationsregisterkarte mit schwarzen Pfeil, der auf das Textfeld zeigt.
    13. Wählen Sie im Header des UI Builder Speichern aus.
    14. Wählen Sie in der Inhaltsstruktur unter Dialogfeld ohne Modus, Standard > Inhalt > Container, die Option + Inhalt hinzufügen aus, um dem Dialogfeld ohne Modus Inhalt hinzuzufügen.
    15. Wählen Sie die Komponente Anhänge.
    16. Wenn dies noch nicht ausgewählt ist, wählen Sie im Konfigurationsbereich AnhängeDatensatzanhänge und Anwenden, um die Komponente mit einer Voreinstellung zu konfigurieren.
      Konfigurationsbereich für Anhänge mit schwarzen Pfeilen, die auf die Voreinstellung für Anhänge aufzeichnen zeigen.

      Weitere Informationen zum Konfigurieren der Komponente Anhänge finden Sie auf der Developer Site von ServiceNow.

    17. Sie können der Fußzeile des Dialogfelds ohne Modi Inhalt hinzufügen, in diesem Beispiel jedoch leer lassen.
    18. Wählen Sie Speichern.
      Beachten Sie, dass in der Inhaltsstruktur das Dialogfeld ohne Modus und alle zugehörigen Komponenten oberhalb des Textkörpers Ihrer Seitenstruktur aufgeführt sind. Außerdem wird die Dropdown-Komponente Minimierte Dialogfelder der Seite automatisch hinzugefügt (und in der Inhaltsstruktur unter Textkörper aufgeführt), um die Funktionalität für das Minimieren-Symbol im Header des Dialogfelds ohne Modus bereitzustellen.

      Inhaltsstruktur mit schwarzen Pfeilen, die auf die Standardkomponente des Dialogfelds ohne Modus, den Textkörper und die Dropdown-Komponente des minimierten Dialogfelds verweisen.

    19. Wählen Sie in der Inhaltsstruktur Textkörperaus.
    20. Fügen Sie eine Schaltflächenkomponente hinzu, und konfigurieren Sie sie, um das Dialogfeld ohne Modus zu öffnen.
      1. Wählen Sie in der Inhaltsstruktur das Menüsymbol neben Textkörper und dann Inhalt hinzufügen aus.
      2. Wählen Sie auf der Registerkarte Layouts die Option Einzelne Spalteaus.
        Am Ende der Seite wird ein neues Spaltenlayout mit einer einzelnen Spalte hinzugefügt.
      3. Wählen Sie in der Phase das Symbol + im neuen Spaltenlayout aus.
        Einspaltiges Layout mit einem schwarzen Pfeil, der auf das Symbol + in der Spalte zeigt.
      4. Suchen Sie nach der Komponente Schaltfläche leer, und wählen Sie sie aus.
        Toolbox mit einem schwarzen Pfeil, der auf das Suchfeld zeigt, das die Begriffsschaltfläche enthält, und einem weiteren schwarzen Pfeil, der auf die leere Schaltflächenkomponente zeigt.
      5. Wählen Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren die Option Keine aus, um die Komponente manuell zu konfigurieren.
      6. Wählen Sie im Konfigurationsbereich die Registerkarte Ereignisse.
      7. Wählen Sie + Ereignishandler hinzufügen aus.
        Leere Schaltflächen-Konfigurationsbereich mit einem schwarzen Pfeil, der auf die Registerkarte „Ereignisse“ zeigt, und einem zweiten schwarzen Pfeil, der auf die Option + Ereignis-Handler hinzufügen zeigt.
      8. Wählen Sie in der Liste auf der linken Seite das Dialogfeld ohne Modus öffnen (möglicherweise müssen Sie in der Liste nach unten scrollen).
      9. Geben Sie Anhänge in Minimierte Überschriftein.
      10. Wählen Sie StandardmäßigDialogfeld ohneModus unter Dialogfeld ohne Modus aus.
        Es gibt weitere Optionen, die hier konfiguriert werden können, einschließlich einer Überschrift und einer Kategorie.
      11. Wählen Sie Hinzufügen.
        Ereignis-Handler-Fenster mit schwarzen Pfeilen, die auf die Option „Dialogfeld ohne Modus öffnen“ zeigen, dem minimierten Überschriftenfeld, dem Dialogfeld ohne Modus und der Schaltfläche „Hinzufügen“.
      12. Wählen Sie die Registerkarte Konfigurieren aus.
      13. Geben Sie Anhänge hinzufügen in Bezeichnungein.
        Registerkarte zum Konfigurieren der leeren Schaltflächenkomponente mit schwarzen Pfeil, der auf das Bezeichnungsfeld zeigt.
    21. Wählen Sie Speichern.
    22. Wählen Sie den Dropdown-Pfeil neben Vorschau im Header UI Builder, und wählen Sie URL-Pfad öffnen in der Liste aus.
    23. Wählen Sie die Schaltfläche Anhänge hinzufügen, um das Dialogfeld ohne Modus zu testen.
      Das Dialogfeld ohne Modus wird über der Hauptseite geöffnet, mit der Überschrift oben und der Komponente „Anhänge“ unten.
    24. Um die Minimierungsfunktion zu testen, wählen Sie das Minimierungssymbol im Dialogfeld ohne Modus.
      Dialogfeld ohne Modus in der Überschrift mit einem schwarzen Pfeil, der auf das Minimierungssymbol zeigt.
      Das Dialogfeld ohne Modus wird minimiert und kann über die Dropdown-Liste Minimierte Dialogfelder aufgerufen werden.
    25. Wählen Sie das Symbol für minimierte Dialogfelder und dann Anhänge, um das Dialogfeld ohne Modus erneut zu öffnen.
      Die Komponente „Minimierte Dialogfelder“ ist so ausgewählt, dass in der Dropdownliste die Option für den E-Mail-Entwurf angezeigt wird.