UI Builder – Schnellstart

Diese Schnellstart führt Sie durch den Prozess der Erstellung Ihrer ersten Seite in UI Builder. Das Erstellen Ihrer ersten Seite ist der erste Schritt, um zu verstehen, wie Anwenderoberflächenseiten für Ihren Arbeitsbereich oder anwenderdefinierte Portal-Experiences erstellt werden.

Vorbereitungen

Erforderliche Rolle: ui_Builder_admin

In diesem UI BuilderSchnellstart: Sie führen die folgenden Aufgaben aus, um Ihre erste Seite in zu erstellen 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.
• Erstellen Sie Ihre Seite, indem Sie Komponenten hinzufügen. Weitere Informationen zu Komponenten finden Sie unter Anpassen UI BuilderSeiten mit Komponenten.
• Speichern Sie Ihre Seite.
• 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.

   Abbildung : 1. UI Builder starten

   

2. Wählen Sie eine Experience aus, in der Sie arbeiten möchten UI BuilderHomepage.
   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.
   1. Wählen Sie aus + Symbol in Seiten Abschnitt.
      
   2. Wählen Sie Aus Erstellen Sie eine neue Seite .
      
   3. Wählen Sie Aus → Erstellen Sie stattdessen von Grund auf neu .
      

      Sie können auch Seiten mithilfe von Seitenvorlagen erstellen, siehe Seite aus einer Vorlage erstellenFür weitere Informationen.

   4. Eingabetaste Startseite Als eindeutiger Name für die Seite in Name Feld.
   5. Geben Sie einen Pfad für Ihre Seite in an URL-Pfad Feld. UI BuilderGeneriert einen Standardpfad basierend auf dem Namen, den Sie im letzten Schritt angegeben haben.
      Ein Standardpfad wird basierend auf Ihrem Seitennamen hinzugefügt. Sie können auch einen eigenen Pfad erstellen. Der Pfad ist erforderlich und muss eindeutig sein. Der Pfad kann Ziffern (0–9), Buchstaben (A–Z, a–z) und einige Sonderzeichen ( „-“ , „.“ , „_“ , „~“ ), wobei die Wörter durch einen Schrägstrich oder Bindestrich getrennt sind. Die URL-Vorschau Zeigt den Pfad Ihrer Seite an.

      

      Hinweis:

      Der Anwendungsbereich ist standardmäßig der Umfang, in dem sich der Anwender derzeit innerhalb von befindet ServiceNow AI Platform®. Weitere Informationen zum Anwendungsbereich finden Sie unter Informationen zu Sicherheit und Rollen.
   6. Wählen Sie Fortsetzen.
   7. Wahlweise: Fügen Sie Ihrer Seiten-URL Parameter hinzu, indem Sie auswählen + Hinzufügen .
      Weitere Informationen finden Sie unter Verwalten UI BuilderSeiten und Seitenvarianten.
   8. Wählen Sie Aus Sieht gut aus .
   9. Eingabetaste Managerstartseite Als Name für die Seitenvariante.
   10. Wahlweise: Fügen Sie eine oder mehrere Zielgruppen für diese Seite hinzu.
       Wenn eine von Ihnen benötigte Zielgruppe nicht aufgeführt ist, können Sie auswählen Öffnen Sie Zielgruppen auf der Plattform Link zum Erstellen eines Links.
   11. Wahlweise: Fügen Sie Bedingungen hinzu, wann die Seite oder Registerkarte angezeigt werden soll.
   12. Wählen Sie Fortsetzen.
   13. Wählen Sie auf dem nächsten Bildschirm aus Erstellen Sie reaktionsfähig .
   14. Wählen Sie Aus Erstellen Um Ihre leere Seite zu erstellen.
   Herzlichen Glückwunsch! Sie haben Ihre erste 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. Wählen Sie Aus Editor Um mit dem Hinzufügen der Anpassung Ihrer Seite zu beginnen.
   
5. Fügen Sie Ihrer Seite eine Containerkomponente hinzu.
   Ein Container enthält Ihre Komponenten. Stellen Sie sich einen Container als Bereich der Seite vor, in dem Sie Informationen, Bilder oder Funktionen (Ihre Komponenten) hinzufügen. Sie können beliebig viele Container auf einer Seite haben, mit so vielen Containern in Containern und so vielen Komponenten in den Containern.
   1. Wählen Sie Aus + Inhalt hinzufügen In der Inhaltsstruktur.
      
   2. Wählen Sie aus Einzelne Spalte Layout in der Toolbox.
   3. Wählen Sie Aus Spaltenlayout 1 In der Inhaltsstruktur, um den Container hervorzuheben.
      
   4. Wählen Sie den Komponentennamen im Konfigurationsbereich aus.
      
   5. In Komponentenbezeichnung Feld, Typ Container für Überschrift .
   6. In Komponenten-IDFeld, Typ Container_for_heading .
   7. Wählen Sie Übernehmen.

      Beachten Sie, dass sich der Name des Spaltenlayouts in ändert Container für Überschrift In der Inhaltsstruktur. Die Inhaltsstruktur ist ein wichtiges Konzept. Die Inhaltsstruktur ist eine einfache Möglichkeit, das strukturierte Layout Ihrer Seite anzuzeigen. Die Inhaltsstruktur ist besonders wichtig, wenn Sie mehrere Komponenten auf Ihrer Seite haben. Sie wählen die Komponente in Ihrer Inhaltsstruktur aus, um die Komponente auf der Seite hervorzuheben und das Erstellen Ihrer Seite zu erleichtern. Sie können eine Textsuche für eine Komponente durchführen.

      

      Weitere Informationen zu Komponenten-IDs finden Sie unter Komponenten-ID.

   Sie haben Ihr erstes Spaltenlayout erfolgreich zu Ihrer Seite hinzugefügt.
6. Fügen Sie ein hinzu Überschrift Komponente für Ihr Spaltenlayout.
   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 Komponenten hinzufügen und konfigurieren.
   1. Wählen Sie Aus + Inhalt hinzufügen In der Inhaltsstruktur unter dem in Schritt 5 erstellten Spaltenlayout.
      
   2. Typ Überschrift In die Suche wechseln und auswählen Überschrift Komponente.
   3. Wählen Sie Ihre neue aus Überschrift Komponente in der Inhaltsstruktur, um sie hervorzuheben.
   4. Wählen Sie Aus Keine Im Konfigurationsbereich.
   5. Wählen Sie den Komponentennamen im Konfigurationsbereich aus.
   6. In Komponentenbezeichnung Feld eingeben Anwenderdefinierte Überschrift Als eindeutige Bezeichnung für die Überschriftenkomponente.
   7. In Komponenten-ID Feld eingeben Custom_heading Als eindeutige ID für die Überschriftenkomponente.
   8. Klicken Sie auf Übernehmen.
      
7. Passen Sie die Überschriftenkomponente an.
   1. Wählen Sie die Überschriftenkomponente in der Inhaltsstruktur aus.
   2. Wählen Sie aus Konfigurieren Registerkarte im Konfigurationsbereich.
   3. In Bezeichnung Geben Sie den Text Ihrer Überschrift ein, z. B. Meine neue Überschrift .
   4. Der Stil ändert die Größe des Überschriftstexts.
      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. Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter Konfigurieren Sie Komponenten in UI Builder.
   5. Verlassen Sie Ebene AS 1 .
   6. Wählen Sie Speichern.
   Sie haben Ihrer Seite eine Überschriftenkomponente hinzugefügt und angepasst.
8. Fügen Sie Ihrer Seite ein zweites Spaltenlayout hinzu.
   1. Ähnlich wie vor, wählen Sie aus + Inhalt hinzufügen In der Inhaltsstruktur.
      
   2. Wählen Sie aus Einzelne Spalte Layout in der Toolbox.
   3. Wählen Sie Aus Spaltenlayout 1 In der Inhaltsstruktur, um den Container hervorzuheben.
      
   4. Wählen Sie den Komponentennamen im Konfigurationsbereich aus.
   5. In Komponentenbezeichnung Feld, Typ Container für Inhalt .
   6. In Komponenten-ID Feld, Typ Container_für_Inhalt .
   7. Wählen Sie Übernehmen.
      
   8. Wählen Sie Speichern.
   Sie haben Ihre zweite Containerkomponente erfolgreich zu Ihrer Seite hinzugefügt.
9. Fügen Sie Ihrer Seite eine Bildkomponente hinzu.
   Ein Bild ist eine gute Möglichkeit, eine Visualisierung für Ihre Seite hinzuzufügen. In diesem Schnellstart fügen Sie ein Stockfoto hinzu, das im Lieferumfang enthalten ist UI Builder. Sie können jedoch jedes Bild hinzufügen, das Ihnen zur Verfügung steht.
   1. Wählen Sie Aus + Inhalt hinzufügen In der Inhaltsstruktur unter dem in Schritt 8 erstellten Container.
   2. Typ Bild In die Suche wechseln und auswählen Bild Komponente.
      Ein Standardbild wird in die Bildkomponente geladen. Sie können Ihr eigenes Bild hinzufügen, indem Sie dem Bild eine URL hinzufügen. Sie können Bilder, die im Internet gehostet werden, oder Bilder in verwenden ServiceNow AI Platform®. Wenn Sie ein Bild verwenden, das auf einer externen Website gehostet wird, müssen Sie verwenden https protokoll für Sicherheit.
   3. Wählen Sie aus Bild 1 Komponente in Inhalt Struktur zum Hervorheben des Bilds.
      
   4. Wählen Sie Aus Keine Im Konfigurationsbereich.
   5. Wählen Sie den Komponentennamen im Konfigurationsbereich aus.
   6. In Komponentenbezeichnung Feld, Typ Mein Bild .
   7. In Komponenten-ID Feld, Typ Mein_Bild .
   8. Wählen Sie Übernehmen.
      
   9. Wählen Sie Speichern.
   Sie haben Ihrer Seite eine Bildkomponente hinzugefügt.

   

10. Wählen Sie Aus Vorschau In UI BuilderHeader zur Vorschau Ihrer Seite.
    Herzlichen Glückwunsch! Sie haben abgeschlossen UI BuilderSchnellstart. Ihre Seite generiert eine Vorschau davon, wie sie in Ihrem Arbeitsbereich oder Ihrer Portal-Experience aussieht.

    

Ergebnisse

1. Hat Ihre erste Seite in erstellt UI Builder.
2. Ihre erste Containerkomponente wurde der Seite hinzugefügt. Sie haben die Bezeichnung für den Container geändert.
3. Hat hinzugefügt Überschrift Komponente als Titel des Containers. Sie haben den Text der Überschrift geändert. Sie haben auch die Bezeichnung geändert.
4. Hat Ihrer Seite eine zweite Containerkomponente hinzugefügt. Sie haben die Bezeichnung für den Container geändert.
5. Hat hinzugefügt Bild Komponente. Sie haben die Bezeichnung der Bildkomponente geändert.
6. Ihre neue Seite wurde gespeichert.
7. Hat Ihre Seite im Browser in der Vorschau angezeigt.

Sie haben erfolgreich abgeschlossen UI BuilderSchnellstart!