UI Builder – Schnellstart

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

Vorbereitungen

Erforderliche Rolle: ui_builder_admin

In dieser Schnellstartanleitung für UI Builder führen Sie die folgenden Aufgaben aus, um Ihre erste 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.
• Erstellen Sie Ihre Seite, indem Sie Komponenten hinzufügen. Weitere Informationen zu Komponenten finden Sie unter Passen Sie UI Builder Seiten mithilfe von -Komponenten an.
• 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 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 erstellen Sie eine Experience. Weitere Informationen finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
3. Erstellen Sie eine Seite.
   1. Wählen Sie im Abschnitt „ Seiten und Varianten “ das Symbol + aus.
      
   2. Wählen Sie Neue Seite erstellen aus.
      
   3. Wählen Sie stattdessen → Von Grund auf neu erstellen aus.
      

      Sie können Seiten auch mithilfe von Seitenvorlagen erstellen. Weitere Informationen finden Sie unter Erstellen Sie eine Seite aus einer Vorlage.

   4. Geben Sie im Feld Name Startseite als eindeutigen Namen für die Seite ein.
   5. Geben Sie im Feld URL-Pfad einen Pfad für Ihre Seite an. UI Builder generiert 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 (AZ, az) und einige Sonderzeichen ("-", ".", "_", "~") enthalten, wobei die Wörter durch einen Schrägstrich oder getrennt sind Bindestrich. Die URL-Vorschau zeigt den Pfad Ihrer Seite.

      

      Hinweis:

      Der Anwendungsbereich ist standardmäßig der Bereich, in dem sich der Benutzer derzeit befindet, innerhalb von Now Platform®. Weitere Informationen zum Anwendungsbereich finden Sie unter Erfahren Sie mehr über Sicherheit und Rollen.
   6. Wählen Sie Fortsetzen aus.
   7. Wahlweise: Fügen Sie Ihrer Seiten-URL Parameter hinzu, indem Sie + Hinzufügenwählen.
      Weitere Informationen finden Sie unter Verwalten Sie UI Builder Seiten und Seitenvarianten.
   8. Wählen Sie Sieht gut aus.
   9. Geben Sie Manager -Startseite als Namen für die Seitenvariante ein.
   10. Wahlweise: Fügen Sie eine oder mehrere Zielgruppen für diese Seite hinzu.
       Wenn eine benötigte Zielgruppe nicht aufgeführt ist, können Sie den Link „ Offene Zielgruppen in der Plattform “ wählen, um eine zu erstellen.
   11. Wahlweise: Fügen Sie Bedingungen hinzu, wann die Seite oder Registerkarte angezeigt werden soll, indem Sie eine codierte Abfragezeichenfolge eingeben.
   12. Wählen Sie Erstellen aus, um eine 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 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. Wählen Sie Editor aus, um mit 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 einen Bereich der Seite vor, in dem Sie Informationen, Bilder oder Funktionen (Ihre Komponenten) hinzufügen. Sie können so viele Container auf einer Seite haben, wie Sie möchten, mit so vielen Containern in Containern und so vielen Komponenten in den Containern.
   1. Wählen Sie in der Inhaltsstruktur + Komponente hinzufügen aus.
      
   2. Wählen Sie in der Toolbox das Layout Einzelne Spalte aus.
   3. Wählen Sie in der Inhaltsstruktur Spaltenlayout 1 aus, um den Container hervorzuheben.
      
   4. Wählen Sie im Konfigurationsbereich den Komponentennamen aus.
      
   5. Geben Sie im Feld Komponentenbezeichnungfür die Überschrift Container ein.
   6. Geben Sie im Feld Komponenten-IDcontainer_for_headingein.
   7. Wählen Sie Übernehmen.

      Sehen Sie, dass sich der Name des Spaltenlayouts in Container für Überschrift in der Inhaltsstruktur ändert. 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 nach einer Komponente durchführen.

      

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

   Sie haben das Layout der ersten Spalte erfolgreich zu Ihrer Seite hinzugefügt.
6. Fügen Sie Ihrem Spaltenlayout 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 Fügen Sie Komponenten hinzu, und konfigurieren Sie sie.
   1. Wählen Sie in der Inhaltsstruktur unterhalb des in Schritt 5 erstellten Spaltenlayouts die Option + Komponente hinzufügen aus.
      
   2. Geben Sie die Überschrift in die Suche ein, und wählen Sie die Komponente „Überschrift“ aus.
   3. Wählen Sie Ihre neue Überschriftenkomponente in der Inhaltsstruktur aus, um sie hervorzuheben.
   4. Wählen Sie im Konfigurationsbereich Keine aus.
   5. Wählen Sie im Konfigurationsbereich den Komponentennamen aus.
   6. Geben Sie im Feld KomponentenbezeichnungBenutzerdefinierte Überschrift als eindeutige Bezeichnung für die Überschriftenkomponente ein.
   7. Geben Sie im Feld Komponenten-IDcustom_heading als eindeutige ID für die Überschriftenkomponente ein.
   8. Klicken Sie auf Übernehmen.
      
7. Passen Sie die Überschriftenkomponente an.
   1. Wählen Sie die Überschriftenkomponente in der Inhaltsstruktur aus.
   2. Wechseln Sie im Konfigurationsbereich zur Registerkarte Konfigurieren.
   3. Geben Sie im Feld Bezeichnung den Text der Überschrift ein, z. B. Meine neue Überschrift.
   4. Der Stil ändert die Größe des Überschriftentexts.
      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. Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter Konfigurieren Sie Komponenten in UI Builder.
   5. Belassen Sie die Ebene bei 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. Wählen Sie ähnlich wie zuvor in der Inhaltsstruktur + Komponente hinzufügen aus.
      
   2. Wählen Sie in der Toolbox das Layout Einzelne Spalte aus.
   3. Wählen Sie in der Inhaltsstruktur Spaltenlayout 1 aus, um den Container hervorzuheben.
      
   4. Wählen Sie im Konfigurationsbereich den Komponentennamen aus.
   5. Geben Sie im Feld KomponentenbezeichnungContainer für Inhalt ein.
   6. Geben Sie im Feld Komponenten-IDcontainer_for_contentein.
   7. Wählen Sie Übernehmen.
      
   8. Wählen Sie Speichern.
   Sie haben Ihrer Seite erfolgreich die zweite Containerkomponente hinzugefügt.
9. Fügen Sie Ihrer Seite eine Bildkomponente hinzu.
   Ein Bild ist eine gute Möglichkeit, Ihrer Seite eine visuelle Darstellung hinzuzufügen. In dieser Schnellstartanleitung fügen Sie ein Archivfoto hinzu, das im Lieferumfang von UI Builderenthalten ist. Sie können jedoch jedes verfügbare Bild hinzufügen.
   1. Wählen Sie in der Inhaltsstruktur unter dem in Schritt 8 erstellten Container die Option + Komponente hinzufügen aus.
   2. Geben Sie Bild in die Suche ein, und wählen Sie die Bildkomponente aus.
      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 Images verwenden, die im Internet gehostet werden, oder Images in Now Platform®. Wenn Sie ein Image verwenden, das auf einer externen Website gehostet wird, müssen Sie aus Sicherheitsgründen das https -Protokoll verwenden.
   3. Wählen Sie in der Inhaltsstruktur die Komponente „ Bild 1 “ aus, um das Bild hervorzuheben.
      
   4. Wählen Sie im Konfigurationsbereich Keine aus.
   5. Wählen Sie im Konfigurationsbereich den Komponentennamen aus.
   6. Geben Sie im Feld Komponentenbezeichnung den Namen My imageein.
   7. Geben Sie im Feld Komponenten-IDmy_image ein.
   8. Wählen Sie Übernehmen.
      
   9. Wählen Sie Speichern.
   Sie haben Ihrer Seite eine Bildkomponente hinzugefügt.

   

10. Wählen Sie im Header UI BuilderVorschau aus, um eine Vorschau der Seite anzuzeigen.
    Herzlichen Glückwunsch! Sie haben den Schnellstart UI Builder abgeschlossen. Ihre Seite generiert eine Vorschau, wie sie in Ihrer Arbeitsbereichs- oder Portal-Experience aussieht.

    

Ergebnisse

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

Sie haben den Schnellstart UI Builder erfolgreich abgeschlossen!