UI Builder – Schnellstart

Dieser 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 Sie Anwenderoberflächenseiten für Ihren Arbeitsbereich oder anwenderdefinierte Portal-Experiences erstellen.

Vorbereitungen

Erforderliche Rolle: ui_builder_admin

In diesem Schnellstart für UI Builder führen Sie die folgenden Aufgaben aus, um Ihre erste Seite in UI Builderzu erstellen:

• UI Builderstarten.
• Erstellen Sie eine Seite für Ihren -Arbeitsbereich oder eine anwenderdefinierte Portal-Experience. Weitere Informationen zum Erstellen von Seiten finden Sie unter Erstellen Sie eine Seite in UI Builder.
• Erstellen Sie Ihre Seite durch Hinzufügen von Komponenten. Weitere Informationen zu Komponenten finden Sie unter Passen Sie die Seiten UI Builder mithilfe von Komponenten an.
• Speichern Sie Ihre Seite.
• Zeigen Sie eine Vorschau Ihrer Seite an, um zu sehen, wie sie in einem Browser angezeigt wird.

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.

   Abbildung : 1. UI Builder starten

   

2. Wählen Sie auf der Startseite UI Builder 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 Benutzer in mit Ihren Anwendungen 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.
      
   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 Seite aus einer Vorlage erstellen.

   4. Geben Sie Startseite als eindeutigen Namen für die Seite im Feld Name 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 werden Bindestrich. Die URL-Vorschau zeigt den Pfad Ihrer Seite an.

      

      Hinweis:

      Als Anwendungsbereich wird standardmäßig der Bereich verwendet, in dem sich der Benutzer derzeit innerhalb von Now Platform®befindet. 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 + Hinzufügenauswählen.
      Weitere Informationen finden Sie unter Verwalten Sie Seiten und Seitenvarianten UI Builder ..
   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 Zielgruppen in der Plattform öffnen auswählen, um eine zu erstellen.
   11. Wahlweise: Fügen Sie Bedingungen hinzu, wann die Seite oder Registerkarte angezeigt werden soll.
   12. Wählen Sie Fortsetzen.
   13. Wählen Sie im nächsten Bildschirm Build reaktionsfähigaus.
   14. 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 dem Hinzufügen von Anpassungen Ihrer Seite zu beginnen.
   
5. Fügen Sie Ihrer Seite eine Containerkomponente hinzu.
   Ein Container enthält Ihre Komponenten. Betrachten Sie einen Container als einen Bereich der Seite, 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 innerhalb von Containern und so viele Komponenten in den Containern.
   1. Wählen Sie in der Inhaltsstruktur die Option + Inhalt hinzufügen aus.
      
   2. Wählen Sie das Layout Einzelspalte in der Toolbox 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 Ü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 für die Überschrift in der Inhaltsstruktur in Container ä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 sie 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 Ihrer Seite erfolgreich das Layout der ersten Spalte hinzugefügt.
6. Fügen Sie Ihrem Spaltenlayout eine Überschriften- Komponente 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 Komponenten hinzufügen und konfigurieren.
   1. Wählen Sie in der Inhaltsstruktur unter dem in Schritt 5 erstellten Spaltenlayout die Option + Inhalt hinzufügen aus.
      
   2. Geben Sie Ü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 KomponentenbezeichnungAnwenderdefinierte Ü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. Wählen Sie im Konfigurationsbereich die Registerkarte Konfigurieren aus.
   3. Geben Sie im Feld Bezeichnung den Text Ihrer Überschrift ein, z. B. Meine neue Überschrift.
   4. Der Stil ändert die Größe des Überschriftentextes.
      Wenn Sie beispielsweise Header-sekundärauswählen, ist der Text kleiner. Verschiedene Überschriftengrößen sind nützlich, wenn Sie zwei Überschriften haben und die zweite Überschrift kleiner als die primäre 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 + Inhalt hinzufügen in der Inhaltsstruktur aus.
      
   2. Wählen Sie das Layout Einzelspalte in der Toolbox 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 Komponentenbezeichnung den Text Container für Inhalt ein.
   6. Im Feld Komponenten-ID geben Sie container_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 praktische Möglichkeit, Ihrer Seite ein visuelles Element 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 + Inhalt hinzufügen aus.
   2. Geben Sie Bild in die Suche ein, und wählen Sie die Komponente Bild aus.
      In der Bildkomponente wird ein Standardbild geladen. Sie können Ihr eigenes Bild hinzufügen, indem Sie dem Bild eine URL hinzufügen. Sie können Bilder verwenden, die im Internet gehostet werden, oder Bilder in Now Platform®. Wenn Sie ein Bild 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 Text 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 Ihrer Seite anzuzeigen.
    Herzlichen Glückwunsch! Sie haben den Schnellstart UI Builder abgeschlossen. Ihre Seite generiert eine Vorschau der Darstellung in Ihrer Arbeitsbereich- oder Portal-Experience.

    

Ergebnisse

1. Sie haben Ihre erste Seite in UI Buildererstellt.
2. Sie haben der Seite Ihre erste Containerkomponente hinzugefügt. Sie haben die Bezeichnung für den Container geändert.
3. Dem Container wurde eine Überschriften -Komponente 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. Bildkomponente 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!