UI Builder-Tutorial

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

    • Erfahren Sie, wie Sie die Grundlagen von UI Builder verwenden, um eine Seite mit dem Namen „Mein Tutorial“ zu erstellen.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    In diesem UI Builder -Tutorial führen Sie die folgenden Aufgaben aus, um eine Seite in UI Builderzu erstellen:

    • Starten Sie UI Builder.
    • Erstellen Sie eine Seite für Ihren Arbeitsbereich oder Ihre benutzerdefinierte Portal-Experience. Weitere Informationen zum Erstellen von Seiten finden Sie unter Erstellen Sie eine Seite in UI Builder.
    • Ändern Sie das Layout der Seite in zwei Spalten. Weitere Informationen finden Sie unter Organisieren Sie Komponenten auf UI Builder-Seiten.
    • Erstellen Sie Ihre Seite, indem Sie zwei Containerkomponenten hinzufügen.
    • Benennen Sie Ihre Containerkomponenten in der Inhaltsstruktur um.
    • Fügen Sie dem ersten Container eine Überschriftenkomponente und eine Schaltflächenkomponente hinzu. Fügen Sie dem zweiten Container eine Datenvisualisierungskomponente hinzu. Weitere Informationen zu Komponenten finden Sie unter Passen Sie UI Builder Seiten mithilfe von -Komponenten an.
    • 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 UI Builder auch direkt im Filternavigator eingeben.
      Abbildung : 1. UI Builder starten
      UI Builder wird gestartet.
    2. Wählen Sie auf der Homepage UI Builder eine Experience aus, in der Sie arbeiten möchten.
      Wenn in keine Experiences aufgeführt sind, an 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 Benutzer mit Ihren Anwendungen in interagieren UI Builder.
    3. Erstellen Sie eine Seite.
      AufgabeVorgehensweise
      Erstellen Sie eine Seite
      1. Wählen Sie im Abschnitt „ Seiten und Varianten “ das Symbol + aus.

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

      2. Wählen Sie Neue Seite erstellen aus.

        Modales Fenster für Seitentypauswahl.

      3. Wählen Sie stattdessen Von Grund auf neu erstellen aus.

        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 Meine Tutorial-Seite eingeben.
      5. In das Feld Pfad wird automatisch ein Pfad basierend auf Ihrem Seitennamen eingegeben. In diesem Beispiel lautet der Pfad my-tutorial-page. Der Pfad ist die URL der Seite. Sie können diesen Pfad beliebig ändern, aber der Pfad muss eindeutig sein. Der Pfad muss in Kleinbuchstaben angegeben sein und darf keine Leerzeichen enthalten. Die URL-Vorschau zeigt den Pfad Ihrer Seite.

        Erstellen Sie eine Seite mit der Bezeichnung „Meine Tutorials“.

      6. Wählen Sie Fortsetzen aus.
      7. (Optional) Fügen Sie der Seiten-URL Parameter hinzu.
      8. Wählen Sie Sieht gut aus.
      9. Geben Sie den Namen Ihrer Seitenvariante ein. Der Name kann beliebig sein. In diesem Beispiel können Sie Meine erste Seitenvariante eingeben.
      10. Fügen Sie eine Zielgruppe für die Seitenvariante hinzu, indem Sie + Zielgruppe hinzufügenauswählen. WählenSie in diesem Beispiel Administrator aus.
      11. Wählen Sie Erstellen aus.
      12. Nachdem Ihre Seite erstellt wurde, wird der Bildschirm „Experience-Ansicht“ angezeigt. Wählen Sie In Editor öffnen aus, um mit der Bearbeitung der Seite zu beginnen. Sie können erweiterte Einstellungen wie URL-Einstellungen und Varianteneinstellungen ändern. Für dieses Tutorial können Sie diese erweiterten Optionen überspringen. Weitere Informationen zum Ändern der erweiterten Einstellungen finden Sie unter Eine UI Builder-Seite erstellen: Erweiterte Einstellungen.
      Abbildung : 2. Erstellen Sie die Seite „Mein Tutorial“.
      Erstellen einer Seite mit der Bezeichnung „Meine erste Seite“.
      Herzlichen Glückwunsch! Sie haben Ihre Tutorial-Seite erstellt! Die Seite enthält keinen Inhalt. Sie fügen der Seite Komponenten hinzu, um Funktionen dafür zu erstellen. Komponenten sind die Bausteine einer Seite. UI Builder enthält viele Komponenten, die Sie Ihrer Seite hinzufügen können. Komponenten können so einfach wie eine Überschriftoder so komplex wie eine Listesein.
    4. Ändern Sie das Layout der Seite in ein zweispaltiges Layout.
      Weitere Informationen zu Layouts finden Sie unter Organisieren Sie Komponenten auf UI Builder-Seiten.
      AufgabeVorgehensweise
      Ändern Sie das Layout der Seite in zwei Spalten
      1. Wählen Sie die Ebene Textkörper der StrukturInhalt aus, um die Seite hervorzuheben.
      2. Wählen Sie in der Inhaltsstruktur + Komponente hinzufügen aus.

        Zeiger, der in der Inhaltsstruktur + Komponente hinzufügen auswählt.

      3. Wählen Sie das Layout Zwei Spalten aus.

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

      4. Das zweispaltige Layout wird angezeigt.

        Das zweispaltige Layout, das in der Phase angezeigt wird.
    5. Fügen Sie der linken Spalte eine Überschriftenkomponente und eine Schaltflächenkomponente hinzu.
      AufgabeVorgehensweise
      Fügen Sie Ihrem Container in der linken Spalte eine Überschriftenkomponente hinzu Sie können der Seite auf verschiedene Arten Komponenten hinzufügen. Weitere Informationen dazu, wie Sie Ihrer Seite Komponenten hinzufügen können, finden Sie unter Tabelle 1.
      1. Klicken Sie in der Mitte der linken Spalte auf die Schaltfläche +.
      2. Geben Sie Überschrift in das Suchfeld ein.
      3. Wählen Sie die Komponente „ Überschrift “ aus, um sie Ihrem Container hinzuzufügen. Eine Überschriftenkomponente ist eine Möglichkeit, Ihrer Seite Text oder einen Titel hinzuzufügen.

        Hinzufügen einer Überschriftenkomponente zu einer Spalte.

      4. Wählen Sie in der Inhaltsstruktur Überschrift 1 aus.
      5. Wählen Sie in der Liste der Voreinstellungen im Konfigurationsbereich Keine aus.
      6. Wählen Sie im Konfigurationsbereich den Komponentennamen aus, um die Komponentenbezeichnung und die Komponenten-ID anzuzeigen. Sie können diese beliebig ändern, solange sie eindeutig sind.

        Komponentenbezeichnung und ID werden aktualisiert.

      7. Konfigurieren Sie Ihre Überschriftenkomponente. Komponentenautoren konfigurieren Komponenten, um die entsprechenden Eigenschaften verfügbar zu machen, die zum Einrichten ihrer Komponenten erforderlich sind.
        • Legen Sie den Stil auf Header-primär fest. Der Stil ändert die Klasse des Überschriftentexts, z. B. Schriftart, Gewichtung und Farbe. Wenn Sie beispielsweise Header-secondaryauswählen, ist der Text kleiner. Unterschiedliche Überschriftengrößen sind nützlich, wenn Sie zwei Überschriften haben und die zweite Überschrift kleiner als die primäre Überschrift sein soll.
        • Geben Sie Mein Tutorial als Überschriftentext in das Feld Bezeichnung ein.
        • Belassen Sie die Ebene bei 1.

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

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

      1. Wählen Sie das + am unteren Rand der Überschriftenkomponente aus, die Sie 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 in der Liste die Komponente Schaltfläche aus.

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

      4. Wählen Sie im Konfigurationsbereich den Komponentennamen aus, um die Komponentenbezeichnung und die Komponenten-ID anzuzeigen. Sie können diese beliebig ändern, solange sie eindeutig sind.
      5. Konfigurieren Sie die Schaltflächenkomponente wie folgt.
        • Geben Sie Homepage in das Feld Bezeichnung ein, um den Namen der Schaltfläche zu ändern.
        • Ändern Sie die Größe in Groß.
        • Geben Sie im Suchfeld SymbolHomepage ein.
        • Wählen Sie Homepage Gliederung aus.

          Konfiguration der Homepage-Schaltfläche

      6. Fügen Sie einen Ereignishandler hinzu, um zu konfigurieren, welche Aktion für die Schaltfläche gilt.
        • Wechseln Sie im Konfigurationsbereich zur Registerkarte Events.
        • Wählen Sie unter „Schaltfläche angeklickt“ die Option + Neuen Event-Handler hinzufügenaus.

          Pfeil, der auf den Link + Ereignishandler hinzufügen zeigt.

        • Wählen Sie unter Geerbte Ereignishandler die Option Link zu Ziel aus.
        • Klicken Sie auf Ziel auswählen.
        • Wählen Sie im Bildschirm Ziel auswählen die Option Externe URLaus.
        • Geben Sie Ihre URL ein. Geben Sie für dieses Tutorial https://www.servicenow.com ein. Wählen Sie OK.
        • Wählen Sie Hinzufügen.

          Konfigurierter Event Handler für die Schaltflächenkomponente.

          Weitere Informationen zu Event-Handlern finden Sie unter Aktionen auf UI Builder-Seiten verwalten (erweiterte Funktion).
      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 die Komponenten „ Überschrift “ und „ Schaltfläche “ für Ihre Seite hinzugefügt und konfiguriert.

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

    6. Fügen Sie dem Container eine Datenvisualisierungskomponente hinzu.
      Eine Datenvisualisierungskomponente enthält Daten, die Sie visuell anzeigen. Konfigurieren Sie die Parameter der Datenvisualisierungskomponente. Fügen Sie dann eine Datenressource hinzu.
      AufgabeVorgehensweise
      Fügen Sie Ihrem Container in der rechten Spalte eine Datenvisualisierungskomponente hinzu, und konfigurieren Sie sie Sie können der Seite auf verschiedene Arten Komponenten hinzufügen. Weitere Informationen dazu, wie Sie Ihrer Seite Komponenten hinzufügen können, finden Sie unter Tabelle 1.
      1. Klicken Sie in der Mitte der rechten Spalte auf die Schaltfläche +.
      2. Beginnen Sie im Feld Suche mit der Eingabe von Datenvisualisierung, bis die Komponente Datenvisualisierung angezeigt wird, und wählen Sie dann die Komponente aus, um sie Ihrer Seite hinzuzufügen.
      3. Wählen Sie im Konfigurationsbereich den Komponentennamen aus, um die Komponentenbezeichnung und die Komponenten-ID anzuzeigen. Sie können diese beliebig ändern, solange sie eindeutig sind.
      4. Fügen Sie Ihrer Datenvisualisierungskomponente eine Datenressource hinzu, um Kunden-Account-Daten zu übernehmen.
        • Wählen Sie die Datenvisualisierungskomponente und dann die Registerkarte Konfigurieren aus.
        • Wählen Sie Datenquelle hinzufügen aus.
        • Geben Sie Aufgabe [Aufgabe] in das Suchfeld ein, und suchen Sie nach einer Aufgabe, die in Ihrer Instanz UI Builder verfügbar ist.
        • Wählen Sie Diese Quelle hinzufügen aus.

          Datenquelle wird der Datenvisualisierungskomponente hinzugefügt.

      5. Wählen Sie die Dropdown-Liste Datenvisualisierungstyp und dann Skalaaus. Sie können eine Vielzahl von Visualisierungstypen auswählen, die am besten zu Ihren Daten passen.
      6. Wählen Sie im Konfigurationsbereich Header und Rahmen aus.
      7. Geben Sie Meine Aufgaben in das Feld Diagrammtitel ein.

        Pfeil, der auf das Titelfeld des Diagramms zeigt.
      Sie haben der rechten Spalte eine Datenvisualisierungskomponente hinzugefügt und konfiguriert. Sie haben auch eine Datenressource hinzugefügt, um Kunden-Account-Daten zu übernehmen.
    7. Speichern Sie die neue Seite ein letztes Mal.
      AufgabeVorgehensweise
      Speichern Sie Ihre Seite
      1. Wählen Sie in der rechten Ecke von UI Builderdie Option Speichernaus.
      2. Nachdem Sie Ihre Seite gespeichert haben, können Sie jederzeit in Ihrer Experience darauf zugreifen.
    8. Zeigen Sie nun eine Vorschau Ihrer Seite an, um zu sehen, wie sie in einem Browser aussieht.
      AufgabeVorgehensweise
      Zeigen Sie eine Vorschau der Seite an
      1. Wählen Sie im Header UI Builder die Option Vorschau aus.
      2. Sehen Sie sich die Überschrift in der linken Spalte Ihrer Seite an.
      3. Klicken Sie auf die Schaltfläche Homepage. Die Homepage ServiceNow® wird auf einer anderen Browserregisterkarte geöffnet. Schließen Sie die Browserregisterkarte, um zur Vorschauseite zurückzukehren.
      4. Sehen Sie sich die Visualisierung der Kunden-Account-Daten in der rechten Spalte der Seite an.
        Abbildung : 3. Zeigen Sie eine Vorschau der Tutorial-Seite an
        Wählen Sie Vorschau aus, um die Tutorial-Seite anzuzeigen.
      Herzlichen Glückwunsch! Sie haben das Tutorial UI Builder abgeschlossen.

    Ergebnisse

    1. In UI Builderwurde eine Seite erstellt.
    2. Das Layout Ihrer Seite wurde in zwei Spalten geändert.
    3. Sie haben Ihrer linken Spalte eine Überschriftenkomponente als Titel hinzugefügt.
      • Der Text der Überschrift wurde geändert.
      • Die Bezeichnung der Überschrift wurde geändert.
    4. Unterhalb der Überschriftenkomponente wurde eine Schaltflächenkomponente hinzugefügt.
      • Schaltfläche wurde konfiguriert.
      • Ereignishandler für Ihre Schaltfläche hinzugefügt.
      • Ereignishandler 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. Datenvisualisierungskomponente hinzugefügt.
      • Die Datenvisualisierungskomponente wurde konfiguriert.
      • Datenressource zum Einbeziehen von Aufgabendaten hinzugefügt.
    7. Ihre neue Seite wurde gespeichert.
    8. Vorschau Ihrer Seite angezeigt.