Fügen Sie einer UI Builder -Seite ein Dialogfeld ohne Modus hinzu

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 4 Minuten Lesedauer

    • Erfahren Sie, wie Sie in UI Builderein Dialogfeld ohne Modus hinzufügen. Ein Dialogfeld ohne Modus ist ein schwebendes Fenster mit Inhalt über einer Seite.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Die folgenden Schritte führen Sie durch die 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 entsprechend Ihren Geschäftsanforderungen.

    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. Bewegen Sie den Mauszeiger in der Inhaltsstruktur zu Dialogfelder ohne Modus, wählen Sie das +-Symbol aus, und wählen Sie die Komponente „Dialogfeld ohne Modus“ aus.
      Option für Dialogfelder ohne Modus, die in der Inhaltsstruktur mit ausgewähltem +-Symbol und geöffnetem Fenster mit der Komponente für Dialogfelder ohne Modus angezeigt wird.
    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 aus.
    6. Zeigen Sie auf der Registerkarte „Konfigurieren“ des Konfigurationsbereichs die Voreinstellungen an, die automatisch mit dem Dialogfeld ohne Modus hinzugefügt wurden, z. B. Breite, Höhe, Position, und ziehen Sie die Einstellung.
      Konfigurationsbereich des Dialogfelds ohne Modus mit Registerkarte „Konfigurieren“ mit Voreinstellungen.

      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 ServiceNow Developer Site.
    7. Im Datenressourcen-Drawer wurde der Dialogfeld- Controller ohne Modus automatisch hinzugefügt.
      Schwarzer Pfeil, der auf den Controller des Dialogfelds ohne Modus im Datenressourcen-Drawer zeigt.
    8. Wählen Sie in der Inhaltsstruktur + Komponente hinzufügen unter Dialogfeld ohne Modus – Standard > Aktionen aus, um dem Header des Dialogfelds ohne Modus Inhalte 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 TextKeine aus, um die Komponente manuell zu konfigurieren.
      Stilisierter Textkonfigurationsbereich mit schwarzen Pfeilen, die auf die Option Keine zeigen.

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

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

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

    17. Sie können der Fußzeile des Dialogfelds ohne Modus Inhalte hinzufügen, lassen Sie die Fußzeile jedoch leer.
    18. Wählen Sie Speichern.
      Beachten Sie in der Inhaltsstruktur, dass das Dialogfeld ohne Modus und alle seine Komponenten über dem Textkörper Ihrer Seitenstruktur aufgelistet sind. Außerdem wird die Dropdown-Komponente „Minimierte Dialogfelder“ der Seite automatisch hinzugefügt (und in der Inhaltsstruktur unter dem Textkörper aufgelistet), 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 für minimierte Dialogfelder zeigen.

    19. Wählen Sie in der Inhaltsstruktur Textkörperaus.
    20. Fügen Sie eine Schaltflächenkomponente hinzu, und konfigurieren Sie sie so, dass das Dialogfeld ohne Modus geöffnet wird.
      1. Klicken Sie in der Inhaltsstruktur neben Textkörper auf das Menüsymbol, und wählen Sie Komponente hinzufügen aus.
      2. Wählen Sie auf der Registerkarte Layouts die Option Einzelne Spalteaus.
        Ein neues Spaltenlayout mit einer einzelnen Spalte wird am Ende der Seite hinzugefügt.
      3. Wählen Sie in der Phase im neuen Spaltenlayout das Symbol + aus.
      4. Suchen Sie nach der leeren Komponente Schaltfläche, und wählen Sie sie aus.
        Toolbox mit einem schwarzen Pfeil, der auf das Suchfeld zeigt, das die Schaltfläche „Begriff“ 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. Wechseln Sie im Konfigurationsbereich zur Registerkarte Events.
      7. Wählen Sie + Event-Handler hinzufügen.
        Leerer Konfigurationsbereich mit Schaltflächen, der mit einem schwarzen Pfeil angezeigt wird, der auf die Registerkarte „Ereignisse“ zeigt, und einem zweiten schwarzen Pfeil, der auf die Option + Ereignishandler hinzufügen zeigt.
      8. Wählen Sie in der Liste auf der linken Seite Dialogfeld ohne Modus öffnen aus (möglicherweise müssen Sie in der Liste nach unten scrollen).
      9. Geben Sie Anhänge in minimierter Überschriftein.
      10. Wählen Sie Dialogfeld ohne Modus als Standard im Dialogfeld ohne Modus aus.
        Es gibt andere Optionen, die hier konfiguriert werden können, einschließlich einer Überschrift und einer Kategorie.
      11. Wählen Sie Hinzufügen.
        Event-Handler-Fenster mit schwarzen Pfeilen, die auf die Option „Dialogfeld ohne Modus öffnen“ zeigen, das minimierte Überschriftenfeld, das Dialogfeld ohne Modus und die Schaltfläche „Hinzufügen“.
      12. Wählen Sie die Registerkarte Konfigurieren aus.
      13. Geben Sie Anhänge in Bezeichnung hinzufügenein.
        Schaltfläche „Leere Komponente“ – Registerkarte „Konfigurieren“ mit schwarzer Pfeil, der auf das Bezeichnungsfeld zeigt.
    21. Wählen Sie Speichern.
    22. Klicken Sie im Header UI Builder auf den Dropdown-Pfeil neben Vorschau, und wählen Sie in der Liste URL-Pfad öffnen aus.
    23. Klicken Sie auf die Schaltfläche Anhänge hinzufügen, um das Dialogfeld ohne Modus zu testen.
      Das Dialogfeld ohne Modus wird über der Hauptseite mit der Überschrift oben und der Komponente „Anhänge“ unten geöffnet.
    24. Um die Minimierungsfunktion zu testen, wählen Sie das Minimieren-Symbol im Dialogfeld ohne Modus aus.
      Überschrift des Dialogfelds ohne Modus mit einem schwarzen Pfeil, der auf das Symbol „Minimieren“ zeigt.
      Das Dialogfeld ohne Modus wird minimiert und kann über die Dropdown-Liste „Minimierte Dialogfelder“ aufgerufen werden.
    25. Klicken Sie auf das Symbol für minimierte Dialogfelder und dann auf Anhänge, um das Dialogfeld ohne Modus erneut zu öffnen.
      Komponente für minimierte Dialogfelder, die mit der Dropdown-Liste mit der Option „E-Mail-Entwurf“ ausgewählt ist.