--- sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development Release : - yokohama ft:locale : - de-DE ft:publication_title : - Yokohama Erstellen oder ändern Sie Anwendungen ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- UI Builder Tutorial =================== UI Builder Tutorial {#ariaid-title1} ==================================== * Freigeben Version: Yokohama * * Aktualisiert 30. Januar 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 8 Minuten Lesedauer Erfahren Sie, wie Sie mit den Grundlagen von UI Builder eine Seite mit dem Namen „My Tutorial" erstellen. Vorbereitungen -------------- Erforderliche Rolle: ui_builder_admin In diesem UI Builder -Tutorial führen Sie die folgenden Aufgaben aus, um eine [Seite](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-page-ui-builder "Sammlung von Spaltenlayouts, Spalten und Komponenten. Erstellen oder passen Sie mehrere UI Builder-Seiten für Arbeitsbereichs- und Portal-Experiences an.") 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](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen."). * Ändern Sie das Layout der Seite in zwei Spalten. Weitere Informationen finden Sie unter [Komponenten in UI Builder-Seiten organisieren](https://servicenow-prod.fluidtopics.net/zC9vc816~Qf2~Zwzr9g_lA "Spaltenlayouts zum Organisieren von Komponenten auf einer Seite UI Builder. Erfahren Sie, wie Spaltenlayouts in UI Builderverwendet werden."). * Erstellen Sie Ihre Seite durch Hinzufügen von zwei [Containerkomponenten](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-component-ui-builder "Komponenten werden im UI Builder zum Erstellen von Seiten verwendet. Komponenten haben eine Schnittstelle, die ein Endanwender anzeigen und mit der er interagieren kann. Komponenten können über Ereignisse und Eigenschaften miteinander kommunizieren. Zu den häufig verwendeten Komponenten gehören Überschrift, Bild, Liste, Formular und Schaltfläche."). * Benennen Sie Ihre Containerkomponenten in der Inhaltsstruktur um. * Fügen Sie dem ersten Container eine Überschriften- Komponente und eine Schaltflächen -Komponente hinzu. Fügen Sie dem zweiten Container eine Datenvisualisierungskomponente hinzu. Weitere Informationen zu Komponenten finden Sie unter [Passen Sie die Seiten UI Builder mithilfe von Komponenten an](https://servicenow-prod.fluidtopics.net/lepFmeei_2nxHv01sLilJg "Erfahren Sie, was eine Komponente in UI Builderist. Sehen Sie sich auch an, wie -Komponenten in UI Builder funktionieren."). * Konfigurieren Sie Ihre Komponenten wie folgt: * Verknüpfen Sie die Schaltfläche mit der Website ServiceNow®. * Verbinden Sie die Datenvisualisierungskomponente mit einer Datenquelle, um Aufgabendaten anzuzeigen. Weitere Informationen zu Datenressourcen finden Sie unter [Daten in UI Builder-Seiten dynamisch verfügbar machen (erweiterte Funktion)](https://servicenow-prod.fluidtopics.net/EWjVIy52W4QChIW973pjxg "Synchronisieren Sie Daten zwischen Tabellen ServiceNow und Daten mit den Seiten, die Sie mit UI Buildererstellen. Seiten zeigen synchronisierte Daten in Echtzeit an und aktualisieren Daten/Tabellen, wenn ein Anwender Informationen eingibt."). {#uib-tutorial__ul_yn2_xyq_24b} * Speichern Sie Ihre Seite häufig. * Zeigen Sie eine Vorschau Ihrer Seite an, um zu sehen, wie sie in einem Browser angezeigt wird. {#uib-tutorial__ul_fgz_xhc_24b} Prozedur -------- 1. Navigieren zu AlleNow-Experience-FrameworkUI Builder. Sie können UI Builder auch direkt im Filternavigatoreingeben.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](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. Erstellen Sie eine Seite. | Aufgabe | Gehen Sie folgendermaßen vor | | 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. 3. Wählen Sie Stattdessen von Grund auf neu erstellen aus. ![Stattdessen von Grund auf neu erstellen – Schaltfläche.]() 4. Geben Sie den Namen Ihrer neuen Seite ein. Der Name kann beliebig sein. In diesem Beispiel können Sie Meine Tutorial-Seiteeingeben. 5. Im 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 werden und darf keine Leerzeichen enthalten. Die URL-Vorschau zeigt den Pfad Ihrer Seite an. 6. Wählen Sie Fortsetzen. 7. (Optional) Fügen Sie Ihrer 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 Seitenvarianteeingeben. 10. Fügen Sie eine Zielgruppe für die Seitenvariante hinzu, indem Sie + Zielgruppe hinzufügenauswählen. In diesem Beispiel wählen Sie Administratoraus. 11. Wählen Sie Fortsetzen. 12. Wählen Sie im nächsten Bildschirm Build reaktionsfähigaus. 13. Wählen Sie Erstellen aus. 14. Nachdem die Seite erstellt wurde, wird der Seiten-Editor-Bildschirm angezeigt. 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 erweiterter Einstellungen finden Sie unter [Erstellen Sie eine UI Builder-Seite: Erweiterte Einstellungen](https://servicenow-prod.fluidtopics.net/A5V7tPV9Qf70wAx4pf_DKg#work-pages__create_page_advanced_settings). {#uib-tutorial__ol_ncw_hms_tjb} Abbildung : 2. Seiten-Editor von UI Builder | |--------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_n3q_gmd_jjb} 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 [Komponenten in UI Builder-Seiten organisieren](https://servicenow-prod.fluidtopics.net/zC9vc816~Qf2~Zwzr9g_lA "Spaltenlayouts zum Organisieren von Komponenten auf einer Seite UI Builder. Erfahren Sie, wie Spaltenlayouts in UI Builderverwendet werden."). | Aufgabe | Gehen Sie folgendermaßen vor | | Ändern Sie das Layout der Seite in zwei Spalten | 1. Wählen Sie die Ebene Textkörper der Struktur Inhalt aus, um die Seite hervorzuheben. 2. Wählen Sie in der Inhaltsstruktur die Option + Inhalt hinzufügen aus. 3. Wählen Sie das Layout Zwei Spalten aus. 4. Das zweispaltige Layout wird angezeigt. {#uib-tutorial__ol_igv_b1x_d4b} | |-------------------------------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_hgv_b1x_d4b} 5. Fügen Sie der linken Spalte eine Überschriften- Komponente und eine Schaltflächen- Komponente hinzu. | Aufgabe | Gehen Sie folgendermaßen vor | | 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](https://servicenow-prod.fluidtopics.net/lepFmeei_2nxHv01sLilJg#work-components__addcomponentstable). 1. Wählen Sie in der Mitte der linken Spalte die Schaltfläche + aus. 2. Geben Sie Überschrift in das Suchfeld ein. 3. Wählen Sie die Komponente Überschrift aus, um sie dem Container hinzuzufügen. Mit einer Überschriftenkomponente können Sie Ihrer Seite Text oder einen Titel hinzufügen. 4. Wählen Sie in der Liste der Voreinstellungen im Konfigurationsbereich Keine aus. 5. Wählen Sie im Konfigurationsbereich den Komponentennamen aus, um die Komponentenbezeichnung und die Komponenten-IDanzuzeigen. Sie können diese beliebig ändern, solange sie eindeutig sind. 6. Wählen Sie Übernehmen. 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ärfest. Der Stil ändert die Klasse des Überschriftentexts, z. B. Schriftart, Gewichtung und Farbe. 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. * Geben Sie Mein Tutorial als Überschriftentext im Feld Bezeichnung ein. * Belassen Sie die Ebene bei 1. {#uib-tutorial__ul_yc3_dlx_d4b} {#uib-tutorial__ol_r1g_4fl_vnb} | | Fügen Sie Ihrem Container in der linken Spalte eine Schaltflächenkomponente hinzu, und konfigurieren Sie sie | Fügen Sie Ihrer Seite eine Schaltflächen- Komponente hinzu. Konfigurieren Sie die Schaltfläche, indem Sie den Text und die Art und Weise ändern, wie sie aussieht. Ändern Sie dann, was passiert, wenn Sie auf die Schaltfläche klicken, indem Sie einen Ereignishandler für die Schaltfläche hinzufügen. Der -Ereignishandler fügt der Schaltfläche eine Aktion hinzu, um eine Verknüpfung mit der Startseite ServiceNow® herzustellen. 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](https://developer.servicenow.com/dev.do#!/reference/now-experience/sandiego/components). 1. Wählen Sie das + am unteren Rand der Überschriftenkomponente aus, die wir im vorherigen Abschnitt hinzugefügt haben. 2. Typ- Schaltfläche im Suchfeld. 3. Wählen Sie die Komponente Schaltfläche in der Liste aus. Weitere Informationen zum Hinzufügen von Komponenten zu Ihrer Seite finden Sie unter [Tabelle 1](https://servicenow-prod.fluidtopics.net/lepFmeei_2nxHv01sLilJg#work-components__addcomponentstable). 4. Wählen Sie im Konfigurationsbereich den Komponentennamen aus, um die Komponentenbezeichnung und die Komponenten-IDanzuzeigen. Sie können diese beliebig ändern, solange sie eindeutig sind. 5. Konfigurieren Sie die Schaltflächenkomponente wie folgt. * Geben Sie im Feld Bezeichnung Homepage ein, um den Namen Ihrer Schaltfläche zu ändern. * Ändern Sie die Größe in Groß. * Geben Sie im Symbolsuchfeld „home " ein. * Wählen Sie Homepage Gliederungaus. {#uib-tutorial__ul_gxl_w1x_g4b} 6. Fügen Sie einen Ereignishandler hinzu, um zu konfigurieren, welche Aktion für die Schaltfläche gilt. * Wählen Sie im Konfigurationsbereich die Registerkarte Ereignisse. * Wählen Sie unter Schaltfläche angeklickt die Option + Neuen Ereignis-Handler hinzufügen aus. * Wählen Sie unter Übernommene Ereignishandler die Option Link zu Zielaus. * Klicken Sie auf Ziel auswählen. * Wählen Sie im Bildschirm Ziel auswählendie 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. Weitere Informationen zu Ereignishandlern finden Sie unter [Verwalten Sie -Aktionen auf UI Builder-Seiten](https://servicenow-prod.fluidtopics.net/0kWZk6GWAQYP8sM~DoLXGA "Erfahren Sie, wie Sie mit Ereignissen arbeiten, um Komponenten, Seiten, Datenressourcen und deklarativen Aktionen in UI BuilderAktionen hinzuzufügen."). {#uib-tutorial__ul_crn_zxd_24b} 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. {#uib-tutorial__ol_nvw_kwd_24b} | |--------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_q1g_4fl_vnb} Sie haben die Komponente „Überschrift" und „Schaltfläche" für Ihre Seite hinzugefügt und konfiguriert. 6. Fügen Sie dem Container eine Datenvisualisierungskomponente hinzu. Eine Datenvisualisierungskomponente enthält Daten, die Sie visuell anzeigen können. Konfigurieren Sie die Parameter der Datenvisualisierungskomponente. Fügen Sie dann eine Datenressource hinzu. | Aufgabe | Gehen Sie folgendermaßen vor | | Fügen Sie Ihrem rechten Spaltencontainer 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](https://servicenow-prod.fluidtopics.net/lepFmeei_2nxHv01sLilJg#work-components__addcomponentstable). 1. Wählen Sie die Schaltfläche + in der Mitte der rechten Spalte. 2. Beginnen Sie im Feld Suche mit der Eingabe von Datenvisualisierung, bis Sie die Komponente Datenvisualisierung sehen. 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-IDanzuzeigen. Sie können diese beliebig ändern, solange sie eindeutig sind. 4. Fügen Sie Ihrer Datenvisualisierungskomponente eine Datenressource hinzu, um Kundenaccountdaten einzufügen. * Wählen Sie die Datenvisualisierungskomponente und dann die Registerkarte Konfigurieren aus. * Wählen Sie Datenquelle hinzufügen. * Geben Sie in das Suchfeld Aufgabe [task] ein, und suchen Sie nach einer Aufgabe, die in Ihrer Instanz UI Builder verfügbar ist. * Wählen Sie Diese Quelle hinzufügen. {#uib-tutorial__ul_wrt_122_24b} 5. Wählen Sie Dropdown -Liste Datenvisualisierungstyp aus, und wählen Sie Wählen aus. Sie können verschiedene Visualisierungstypen auswählen, die für Ihre Daten am besten geeignet sind. 6. Wählen Sie im Konfigurationsbereich Header und Rahmen aus. 7. Geben Sie im Feld Diagrammtitel den Wert Meine Aufgaben ein. {#uib-tutorial__ol_k31_whl_vnb} | |---------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_j31_whl_vnb} Sie haben der rechten Spalte eine Datenvisualisierungskomponente hinzugefügt und konfiguriert. Sie haben auch eine Datenressource hinzugefügt, um Kunden-Account-Daten einzubringen. 7. Speichern Sie die neue Seite ein letztes Mal. | Aufgabe | Gehen Sie folgendermaßen vor | | Speichern Sie Ihre Seite | 1. Wählen Sie ganz rechts von UI BuilderSpeichernaus. 2. Nachdem Sie Ihre Seite gespeichert haben, können Sie in Ihrer Experience jederzeit darauf zugreifen. {#uib-tutorial__ol_nd1_c5m_vnb} | |--------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_md1_c5m_vnb} 8. Zeigen Sie jetzt eine Vorschau Ihrer Seite an, um zu sehen, wie sie in einem Browser aussieht. | Aufgabe | Gehen Sie folgendermaßen vor | | Zeigen Sie eine Vorschau Ihrer Seite an | 1. Wählen Sie im Header UI BuilderVorschau aus. 2. Siehe Überschrift in der linken Spalte Ihrer Seite. 3. Wählen Sie die Schaltfläche Homepage aus. Die Homepage ServiceNow® wird in einer anderen Browserregisterkarte geöffnet. Schließen Sie die Browserregisterkarte, um zu Ihrer Vorschauseite zurückzukehren. 4. Sehen Sie sich die Visualisierung der Kunden-Account-Daten in der rechten Spalte Ihrer Seite an.Abbildung : 3. Zeigen Sie eine Vorschau Ihrer Tutorial-Seite an {#uib-tutorial__ol_dyg_qg2_24b} | |-----------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| {#uib-tutorial__choicetable_cyg_qg2_24b} Herzlichen Glückwunsch! Sie haben das Lernprogramm UI Builder abgeschlossen. Ergebnisse ---------- 1. In UI Builderwurde eine Seite erstellt. 2. Das Layout Ihrer Seite wurde in zwei Spalten geändert. 3. Der linken Spalte wurde eine Überschriftenkomponente als Titel hinzugefügt. * Der Text der Überschrift wurde geändert. * Die Bezeichnung der Überschrift wurde geändert. {#uib-tutorial__ul_osc_jcr_24b} 4. Unter Ihrer Überschriftenkomponente wurde eine Schaltflächenkomponente hinzugefügt. * Ihre Schaltfläche wurde konfiguriert. * Ein Ereignishandler für Ihre Schaltfläche wurde hinzugefügt. * Ereignis-Handler zum Einrichten eines Links zu einer Webseite hinzugefügt. Wenn Sie auf die Schaltfläche klicken, wird die Webseite geöffnet. {#uib-tutorial__ul_hdx_kcr_24b} 5. Die Bezeichnung für die rechte Spalte wurde geändert. 6. Komponente „Datenvisualisierung" hinzugefügt. * Die Datenvisualisierungskomponente wurde konfiguriert. * Datenressource hinzugefügt, um Aufgabendaten einzubeziehen. {#uib-tutorial__ul_twx_qcr_24b} 7. Ihre neue Seite wurde gespeichert. 8. Ihre Seite wurde in der Vorschau angezeigt. {#uib-tutorial__ol_pbw_tvm_vnb}