UI Builder Tutorial

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

    • Erfahren Sie, wie Sie die Grundlagen von verwenden UI BuilderDient zum Erstellen einer Seite mit dem Namen „mein Tutorial“.

    Vorbereitungen

    Erforderliche Rolle: ui_Builder_admin

    In diesem UI BuilderTutorial führen Sie die folgenden Aufgaben aus, um einen zu erstellen SeiteIn UI Builder:

    • Starten UI Builder.
    • Erstellen Sie eine Seite für Ihren Arbeitsbereich oder Ihre anwenderdefinierte Portal-Experience. Weitere Informationen zum Erstellen von Seiten finden Sie unter Erstellen Sie eine Seite in UI Builder.
    • Ändern Sie das Layout der Seite so, dass es zwei Spalten enthält. Weitere Informationen finden Sie unter Komponenten in UI Builder-Seiten organisieren.
    • Erstellen Sie Ihre Seite, indem Sie zwei Container hinzufügen Komponenten.
    • Benennen Sie Ihre Containerkomponenten in der Inhaltsstruktur um.
    • Fügen Sie ein hinzu Überschrift Komponente und a Schaltfläche Komponente zum ersten Container. Fügen Sie ein hinzu Datenvisualisierungskomponente Zum zweiten Container. Weitere Informationen zu Komponenten finden Sie unter Anpassen UI BuilderSeiten mit Komponenten.
    • Konfigurieren Sie Ihre Komponenten wie folgt:
    • Speichern Sie Ihre Seite häufig.
    • Zeigen Sie eine Vorschau Ihrer Seite an, um zu sehen, wie sie in einem Browser aussieht.

    Prozedur

    1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
      Sie können auch eingeben UI-Generator Direkt in Filternavigator .
      Abbildung : 1. UI Builder starten
      UI Builder wird gestartet.
    2. Von UI BuilderHomepage, wählen Sie eine Experience aus, in der Sie arbeiten möchten.
      Wenn keine Experiences aufgeführt sind, in denen Sie arbeiten können, wenden Sie sich an Ihren Administrator, um Zugriff auf eine Experience zu erhalten oder eine Experience zu erstellen. Weitere Informationen finden Sie unter Konfigurieren Sie, wie Anwender mit Ihren Anwendungen in interagieren UI Builder.
    3. Erstellen Sie eine Seite.
      AufgabeGehen Sie folgendermaßen vor
      Erstellen Sie eine Seite
      1. Wählen Sie aus + Symbol in Seiten Abschnitt.

        Schaltfläche „Seite erstellen“ auf der Experience-Ansichtsseite.

      2. Wählen Sie Aus Erstellen Sie eine neue Seite .

        Modales Element zur Auswahl des Seitentyps.

      3. Wählen Sie Aus Erstellen Sie stattdessen von Grund auf neu .

        Schaltfläche stattdessen von Grund auf neu erstellen.

      4. Geben Sie den Namen Ihrer neuen Seite ein. Der Name kann beliebig sein. In diesem Beispiel können Sie eingeben Meine Tutorial-Seite .
      5. In Pfad Feld, wird basierend auf Ihrem Seitennamen automatisch ein Pfad eingegeben. In diesem Beispiel lautet der Pfad My-Tutorial-page . Der Pfad ist die URL der Seite. Sie können diesen Pfad beliebig ändern, der Pfad muss jedoch eindeutig sein. Der Pfad muss Kleinbuchstaben sein und keine Leerzeichen enthalten. Die URL-Vorschau Zeigt den Pfad Ihrer Seite an.

        Erstellen Sie eine Seite mit dem Namen „meine Tutorialseite“.

      6. Wählen Sie einen URL-Seitentyp in aus Typ Dropdown-Liste. URL-Seitentypen helfen Ihnen, wichtige Seiten in der Experience-Ansicht zu kategorisieren und zu finden.
      7. Wählen Sie Fortsetzen.
      8. (Optional) Fügen Sie Ihrer Seiten-URL Parameter hinzu.
      9. Wählen Sie Aus Sieht gut aus .
      10. Geben Sie den Namen Ihrer Seitenvariante ein. Der Name kann beliebig sein. In diesem Beispiel können Sie eingeben Variante meiner ersten Seite .
      11. Fügen Sie eine Zielgruppe für die Seitenvariante hinzu, indem Sie auswählen + Hinzufügen einer Zielgruppe . Wählen Sie in diesem Beispiel aus Administrator .
      12. Wählen Sie Fortsetzen.
      13. Wählen Sie auf dem nächsten Bildschirm aus Erstellen Sie reaktionsfähig .
      14. Wählen Sie Erstellen aus.
      15. Nachdem Ihre Seite erstellt wurde, wird der Bildschirm des Seiten-Editors angezeigt. Sie können erweiterte Einstellungen wie ändern URL-Einstellungen Und Variante Einstellungen. Für dieses Tutorial können Sie diese erweiterten Optionen überspringen. Weitere Informationen zum Ändern erweiterter Einstellungen finden Sie unter UI Builder-Seite erstellen: Erweiterte Einstellungen.
      Abbildung : 2. Seiten-Editor von UI Builder
      UI Builder-Seiten-Editor, der die neue Seite anzeigt, die im Tutorial erstellt wurde.
      Herzlichen Glückwunsch! Sie haben Ihre Tutorial-Seite erstellt! Die Seite enthält keinen Inhalt. Sie fügen der Seite Komponenten hinzu, um eine Funktionalität zu erstellen. Komponenten sind die Bausteine einer Seite. UI BuilderEnthält viele Komponenten, die Sie Ihrer Seite hinzufügen können. Komponenten können so einfach wie sein Überschrift , Oder so komplex wie Liste .
    4. Ändern Sie das Layout der Seite in ein zweispaltiges Layout.
      Weitere Informationen zu Layouts finden Sie unter Komponenten in UI Builder-Seiten organisieren.
      AufgabeGehen Sie folgendermaßen vor
      Ändern Sie das Layout der Seite in zwei Spalten
      1. Wählen Sie aus Textkörper Ebene von Inhalt Struktur zum Hervorheben der Seite.
      2. Wählen Sie Aus + Inhalt hinzufügen In der Inhaltsstruktur.

        Zeiger, der + Inhalt in der Inhaltsstruktur auswählt.

      3. Wählen Sie aus Zwei Spalten Layout.

        Pfeil, der auf das Layout der zwei Spalten in der Toolbox zeigt.

      4. Wählen Sie Hinzufügen.
      5. Das Layout mit zwei Spalten wird angezeigt.

        Das Layout der zwei Spalten, das in der Phase angezeigt wird.
    5. Fügen Sie ein hinzu Überschrift Komponente, und ein Schaltfläche Komponente in der linken Spalte.
      AufgabeGehen Sie folgendermaßen vor
      Fügen Sie Ihrem Container mit der linken Spalte eine Überschriftenkomponente hinzu Sie können der Seite auf verschiedene Arten Komponenten hinzufügen. Weitere Informationen darüber, wie Sie Ihrer Seite Komponenten hinzufügen können, finden Sie unter Tabelle 1 .
      1. Wählen Sie aus + Schaltfläche in der Mitte der linken Spalte.
      2. Typ Überschrift Im Suchfeld.
      3. Wählen Sie aus Überschrift Komponente, um sie Ihrem Container hinzuzufügen. Eine Überschriftenkomponente ist eine Möglichkeit, Ihrer Seite Text oder Titel hinzuzufügen.
      4. Wählen Sie Hinzufügen.
      5. Wählen Sie den Komponentennamen im Konfigurationsbereich aus, um anzuzeigen Komponentenbezeichnung Und Komponenten-ID . Sie können diese in beliebiges ändern, solange sie eindeutig sind.

        Komponentenbezeichnung und -ID werden aktualisiert.

      6. Wählen Sie Übernehmen.
      7. Konfigurieren Sie Ihr Überschrift Komponente. Komponentenautoren konfigurieren Komponenten so, dass sie die entsprechenden Eigenschaften bereitstellen, die zum Einrichten ihrer Komponenten erforderlich sind.
        • Legen Sie den Stil auf fest Header-primär . Der Stil ändert die Klasse des Überschriftstexts, z. B. Schriftart, Gewichtung und Farbe. Beispiel: Wenn Sie auswählen Header-sekundär , Der Text ist kleiner. Verschiedene Überschriftengrößen sind nützlich, wenn Sie zwei Überschriften haben und die zweite Überschrift kleiner als die primäre Überschrift sein soll.
        • Eingabetaste Mein Tutorial Als Überschriftentext in Bezeichnung Feld.
        • Belassen Sie die Ebene als 1 .

          Überschriftenbezeichnungsfeld auf der Registerkarte „Komponentenkonfiguration“ mit hinzugefügtem Tutorial.
      Fügen Sie Ihrem Container mit der linken Spalte eine Schaltflächenkomponente hinzu, und konfigurieren Sie sie

      Fügen Sie ein hinzu Schaltfläche Komponente zu Ihrer Seite. Konfigurieren Sie die Schaltfläche, indem Sie den Text und die Art und Weise ändern, wie er aussieht. Ändern Sie dann, was passiert, wenn Sie auf die Schaltfläche klicken, indem Sie einen Ereignis-Handler für die Schaltfläche hinzufügen. Der Ereignis-Handler fügt der Schaltfläche eine Aktion hinzu, um sie mit zu verknüpfen ServiceNow®Homepage. Wenn Sie also auf die Schaltfläche klicken, wird ServiceNow®Die Homepage wird in einer neuen Registerkarte Ihres Browsers geöffnet. Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter Komponenten .

      1. Wählen Sie aus + Am unteren Rand der Überschriftenkomponente, die wir im vorherigen Abschnitt hinzugefügt haben.

        Pfeil, der auf das +-Symbol zeigt, um Komponenten nach der Überschrift hinzuzufügen.

      2. Typ Schaltfläche Im Suchfeld.
      3. Wählen Sie aus Schaltfläche Komponente in der Liste.

        Weitere Informationen zum Hinzufügen von Komponenten zu Ihrer Seite finden Sie unter Tabelle 1 .

      4. Wählen Sie den Komponentennamen im Konfigurationsbereich aus, um anzuzeigen Komponentenbezeichnung Und Komponenten-ID . Sie können diese in beliebiges ändern, solange sie eindeutig sind.
      5. Konfigurieren Sie die Schaltflächenkomponente wie folgt.
        • Eingabetaste Homepage Im Feld Bezeichnung, um den Namen Ihrer Schaltfläche zu ändern.
        • Ändern Sie die Größe in Groß .
        • Eingabetaste Startseite In Symbol Suchfeld.
        • Wählen Sie Aus Startseitenübersicht .

          Konfiguration der Homepage-Schaltfläche.

      6. Fügen Sie einen Ereignis-Handler hinzu, um zu konfigurieren, welche Aktion für die Schaltfläche gilt.
        • Wählen Sie aus Ereignisse Registerkarte im Konfigurationsbereich.
        • Wählen Sie unter angeklickter Schaltfläche aus + Fügen Sie einen neuen Ereignis-Handler hinzu .

          Pfeil, der auf den Link „+ Ereignis-Handler hinzufügen“ verweist.

        • Wählen Sie unter geerbte Ereignis-Handler aus Link zum Ziel .
        • Klicken Sie Auf Wählen Sie das Ziel aus .
        • In Wählen Sie das Ziel aus Bildschirm auswählen Externe URL .
        • Geben Sie Ihre URL ein. Geben Sie für dieses Tutorial ein https://www.servicenow.com Wählen Sie Aus OK .
        • Wählen Sie Hinzufügen.

          Konfigurierter Ereignis-Handler für die Schaltflächenkomponente.

          Weitere Informationen zu Ereignis-Handlern finden Sie unter Verwalten Sie Aktionen auf UI Builder-Seiten.
      7. Wählen Sie Speichern. Es ist immer eine gute Idee, Ihre Seite während der Arbeit häufig zu speichern.
      8. Wählen Sie Vorschau.
      9. Testen Sie die Schaltfläche, die Sie in den vorherigen Schritten erstellt haben.
      Sie haben hinzugefügt und konfiguriert Überschrift Und Schaltfläche Komponente für Ihre Seite.

      UI Builder-Seite mit konfigurierter Überschrift und Schaltfläche.

    6. Fügen Sie ein hinzu Datenvisualisierung Komponente für den Container.
      Eine Datenvisualisierungskomponente enthält Daten, die Sie visuell anzeigen. Konfigurieren Sie die Parameter der Datenvisualisierungskomponente. Fügen Sie dann eine Datenressource hinzu.
      AufgabeGehen Sie folgendermaßen vor
      Fügen Sie Ihrem Container mit der rechten Spalte eine Datenvisualisierungskomponente hinzu, und konfigurieren Sie sie Sie können der Seite auf verschiedene Arten Komponenten hinzufügen. Weitere Informationen darüber, wie Sie Ihrer Seite Komponenten hinzufügen können, finden Sie unter Tabelle 1 .
      1. Wählen Sie aus + Schaltfläche in der Mitte der rechten Spalte.
      2. In Suchen Feld, beginnen Sie mit der Eingabe Datenvisualisierung Bis angezeigt wird Datenvisualisierung Komponente, wählen Sie dann die Komponente aus, um sie Ihrer Seite hinzuzufügen.
      3. Wählen Sie den Komponentennamen im Konfigurationsbereich aus, um anzuzeigen Komponentenbezeichnung Und Komponenten-ID . Sie können diese in beliebiges ändern, solange sie eindeutig sind.
      4. Fügen Sie Ihrer Datenvisualisierungskomponente eine Datenressource hinzu, um Kundenaccount-Daten einzubeziehen.
        • Wählen Sie die Datenvisualisierungskomponente aus, und wählen Sie dann aus Konfigurieren Registerkarte.
        • Wählen Sie Aus Datenquelle hinzufügen .
        • Typ Aufgabe [Aufgabe] Suchen Sie im Suchfeld nach einer Aufgabe, die auf verfügbar ist UI BuilderInstanz.
        • Wählen Sie Aus Fügen Sie diese Quelle hinzu .

          Die Datenquelle wird der Datenvisualisierungskomponente hinzugefügt.

      5. Wählen Sie Aus Datenvisualisierungstyp Dropdownliste und wählen Sie aus Wählen . Sie können eine Vielzahl von Visualisierungstypen auswählen, die Ihren Daten am besten entsprechen.
      6. Wählen Sie Aus Header und Rahmen Im Konfigurationsbereich.
      7. Eingabetaste Meine Aufgaben In Diagrammtitel Feld.

        Pfeil, der auf das Diagrammtitelfeld zeigt.
      Sie haben hinzugefügt Datenvisualisierung Komponente in der rechten Spalte und konfiguriert. Sie haben auch eine Datenressource hinzugefügt, um Kundenaccount-Daten einzubeziehen.
    7. Speichern Sie die neue Seite ein letztes Mal.
      AufgabeGehen Sie folgendermaßen vor
      Speichern Sie Ihre Seite
      1. Ganz rechts von UI Builder, Auswählen Speichern .
      2. Nachdem Sie Ihre Seite jetzt gespeichert haben, können Sie jederzeit in Ihrer Experience darauf zugreifen.
    8. Zeigen Sie jetzt eine Vorschau Ihrer Seite an, um zu sehen, wie sie in einem Browser aussieht.
      AufgabeGehen Sie folgendermaßen vor
      Vorschau Ihrer Seite anzeigen
      1. Wählen Sie Aus Vorschau In UI BuilderHeader.
      2. Siehe Überschrift in der linken Spalte Ihrer Seite.
      3. Wählen Sie aus Homepage Schaltfläche. Die ServiceNow®Homepage wird in einer anderen Browserregisterkarte geöffnet. Schließen Sie die Browserregisterkarte, um zur Vorschauseite zurückzukehren.
      4. Sehen Sie sich die Visualisierung der Kundenaccount-Daten in der rechten Spalte Ihrer Seite an.
        Abbildung : 3. Vorschau Ihrer Tutorial-Seite anzeigen
        Wählen Sie Vorschau aus, um die Tutorialseite anzuzeigen.
      Herzlichen Glückwunsch! Sie haben abgeschlossen UI BuilderTutorial.

    Ergebnisse

    1. Hat eine Seite in erstellt UI Builder.
    2. Das Layout Ihrer Seite wurde geändert, sodass es zwei Spalten enthält.
    3. Hat hinzugefügt Überschrift Komponente als Titel Ihrer linken Spalte.
      • Der Text der Überschrift wurde geändert.
      • Die Bezeichnung der Überschrift wurde geändert.
    4. Unter Ihrer Überschriftenkomponente wurde eine Schaltflächenkomponente hinzugefügt.
      • Hat Ihre Schaltfläche konfiguriert.
      • Hat einen Ereignis-Handler für Ihre Schaltfläche hinzugefügt.
      • Ein Ereignis-Handler wurde hinzugefügt, um einen Link zu einer Webseite einzurichten. Wenn Sie auf die Schaltfläche klicken, wird die Webseite geöffnet.
    5. Die Bezeichnung für die rechte Spalte wurde geändert.
    6. Hat hinzugefügt Datenvisualisierung Komponente.
      • Hat die Datenvisualisierungskomponente konfiguriert.
      • Eine Datenressource wurde hinzugefügt, um Aufgabendaten einzubeziehen.
    7. Ihre neue Seite wurde gespeichert.
    8. Vorschau Ihrer Seite angezeigt.