Verwalten UI BuilderSeiten und Seitenvarianten

Erfahren Sie, was eine Seite enthält UI Builder. Verstehen Sie die Bausteine von UI BuilderSeite, z. B. Spaltenlayouts und Komponenten.

UI Builder Schnellstart

Erstellen Sie Seiten in UI BuilderAls Teil eines Arbeitsbereichs oder einer anwenderdefinierten Portal-Experience. UI BuilderSeiten bestehen aus Layouts und Komponenten. Sie erstellen eine Seite mithilfe von Spaltenlayouts und Komponenten, um einen Anwender durch eine Experience zu führen. Sie können beispielsweise eine Seite erstellen, um Reiseanfragen für Ihre Mitarbeiter zu verwalten. Die Seite kann Spaltenlayouts mit Komponenten enthalten, die Listen aller übermittelten und genehmigten Reiseanträge enthalten. Sie können Schaltflächen hinzufügen, mit denen Anwender Reiseanträge hinzufügen und übermitteln können. Die Art und Weise, wie Sie Ihre Seite erstellen, ist unbegrenzt.

Hinweis:

Ein Entwickler sollte an einem beliebigen arbeiten VarianteGleichzeitig.

Spaltenlayouts und -Komponenten in UI Builder

Spaltenlayouts und -Komponenten sind die Bausteine von UI BuilderSeite. Fügen Sie Ihrer Seite Spaltenlayouts und Komponenten hinzu, um Ihren Arbeitsbereich oder Ihre Portal-Experience zu erstellen oder anzupassen. Fügen Sie beispielsweise ein Spaltenlayout hinzu, und platzieren Sie innerhalb einer Spalte eine Schaltflächenkomponente, mit der Anwender Anforderungen übermitteln können.

Sie können Spaltenlayouts, Spalten und Komponenten hinzufügen und zwischen ihnen navigieren, von der Phase oder der Inhaltsstruktur aus.

Ein Spaltenlayout kann eine oder mehrere Spalten enthalten. Spalten können Komponenten enthalten. Ändern Sie die visuelle Stile von Spaltenlayouts, Spalten und Komponenten, um sie zu Ihrer eigenen Experience zu machen.

Tabelle : 1. Typen von Seitenlayoutelementen

Typ	Beschreibung
Spaltenlayout	Ein flexibler Container mit einer bis sechs Spalten. Fügen Sie Spaltenlayouts hinzu, um eine Struktur und ein Framework für eine Seite bereitzustellen.
Spalte	Füllen Sie Spalten mit Komponenten aus.
Komponente	Basiselemente einer Seite, z. B. Schaltflächen, Listen und Formulare.
Modal	Verwenden Sie ein Modal, um einen Seitentyp in zu erstellen UI BuilderDas oben auf der Seite gerendert wird und Aktion erfordert.
Popover	Ein Popover ist eine Art von Container, der über einem angezeigt wird UI BuilderSeite, wenn durch ein Ereignis ausgelöst. Verwenden Sie die Popover-Komponente, um zusätzliche Informationen oder Aktionen im Zusammenhang mit der Seite anzuzeigen.

Weitere Informationen finden Sie unter Anpassen UI BuilderSeiten mit Komponenten.

Erstellen Sie eine UI Builder-Seite

Erstellen Sie ein UI BuilderSeite, um eine Seiten-Experience von Grund auf neu zu erstellen oder eine Seitenvorlage zu verwenden. Erstellen Sie eine Seite einzeln. Wenn Sie eine der vordefinierten Seitenvorlagen verwenden, beginnen Sie mit einer Basisstruktur und können sie an Ihre Anforderungen anpassen.

Benennen Sie Ihren UI BuilderSeite. Legen Sie den Pfad fest (oder behalten Sie den Standardpfad bei, der basierend auf Ihrem Seitennamen automatisch hinzugefügt wird). Ein Standardpfad wird basierend auf Ihrem Seitennamen hinzugefügt. Sie können auch einen eigenen Pfad erstellen, der Pfad muss jedoch eindeutig sein. Die URL-Vorschau Zeigt den Pfad Ihrer Seite an. Legen Sie den Seiten-URL-Typ fest. URL-Typen helfen Ihnen, wichtige Seiten in der Experience-Ansicht zu kategorisieren und zu finden.

Der Anwendungsbereich schützt Anwendungen, indem der Zugriff auf Anwendungsdateien und -Daten identifiziert und eingeschränkt wird. 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.

Verwenden Sie ein UI BuilderSeitenvorlage, um eine Seite basierend auf einer vordefinierten Seitenvorlage zu erstellen und die Seite dann an Ihre Anforderungen anzupassen. Sie können eine Seitenvorlage referenzieren oder kopieren. Weitere Informationen finden Sie unter Seite aus einer Vorlage erstellen.

UI Builder-Seite erstellen: Erweiterte Einstellungen

Fügen Sie erforderliche Parameter zu hinzu UI BuilderSeite. Ein erforderlicher Parameter ist ein Datenelement, das Ihre Seite erfordert, z. B. eine sys_ID, eine Tabelle oder eine Abfrage. Erforderliche Parameter sind für Komponenten nützlich, da sie an den Wert des erforderlichen Parameters gebunden werden können. Sie können beispielsweise dem URL-Feld einen Tabellenparameter hinzufügen und dann Daten an diese Tabelle binden. Wenn auf die Tabelle verwiesen wird, werden die Tabellendaten allen Komponenten auf der Seite zugänglich gemacht. Erforderliche Parameter sind in der URL sichtbar, wenn Sie sie Ihrer Seite hinzufügen. Im folgenden Beispiel wurde ein erforderlicher Parameter mit der Bezeichnung „Tabelle“ hinzugefügt. Beachten Sie, dass es an die URL angehängt wurde.

Fügen Sie optionale Parameter zu hinzu UI BuilderSeite. Optionale Parameter sind optionale Datenelemente, die Sie der URL Ihrer Seite hinzufügen können. Im Gegensatz zu erforderlichen Parametern sind optionale Parameter immer Name- und Wertpaare, die unabhängig von der angegebenen Reihenfolge funktionieren.

Legen Sie die Einstellungen für Zielgruppe und Bedingungen für fest UI BuilderSeitenvarianten. Wenn Sie eine Seite erstellen, UI BuilderErstellt standardmäßig auch eine Variante der Seite für Sie. A Die Seitenvariante ist eine Variation Ihrer Seite am selben Pfad, mit der Sie Experiences anhand von Anwenderkriterien für verschiedene Zielgruppen anvisieren können. Beispiel: Eine Seite für Manager und eine Variante dieser Seite für die direkt unterstellten Mitarbeiter des Managers. Weitere Informationen zum Erstellen einer Variante finden Sie unter Seitenvariante erstellen.

Weitere Informationen zu Zielgruppen finden Sie unter Erfahren Sie mehr über Zielgruppen.

Testwerte in UI Builder

Fügen Sie einen Testwert zu hinzu UI BuilderSeite, um Testdaten zu Testzwecken auf die Seite zu übertragen. Wenn Sie beispielsweise eine Tabelle als erforderlichen Parameter hinzufügen, können Sie einen Testwert des Incidents hinzufügen und eine Datenressource daran binden, um Testdaten zum Incident für diese Tabelle einzubeziehen.

Um Testwerte zum Anzeigen von Daten abzurufen, fügen Sie eine Datenressource hinzu, und konfigurieren Sie dann die Datenressource so, dass ein Datensatz an den Testwert in der URL gebunden wird. Sie können beispielsweise hinzufügen Incident Als Testwert. Fügen Sie dann eine Datenressource mit dem Namen hinzu Suchen Sie nach einem einzelnen Datensatz . In Tabellenfeld , Binden Sie den Incident-Testwert dynamisch an ein context.props.table Tabelle, wie im folgenden Bild dargestellt.

Zeigen Sie eine vorhandene UI Builder-Seite an

Sie können in jedem arbeiten UI BuilderSeite in Ihrer Experience basierend auf Ihren Rolleneinstellungen. Klicken Sie in der Experience-Ansicht Ihrer Experience auf den Namen der Seite, auf der Sie arbeiten möchten.

Öffnen Sie im Seiten-Editor eine andere Seitenvariante, indem Sie die Dropdown-Liste im Header auswählen.

Erstellen Sie eine UI Builder-Seitenvariante

Mit einer Variante können Sie mithilfe von Anwenderkriterien verschiedene Zielgruppen mit unterschiedlichen Inhalten anvisieren. Sie können beispielsweise eine Homepage für Service Desk-Mitarbeiter und eine Variante der Seite für Manager erstellen, die unter demselben URL-Pfad vorhanden ist.

Sie legen die Zielgruppe für jeden fest UI BuilderSeitenvariante. Die Zielgruppe bestimmt, wer die Seitenvariante verwendet. Wenn Sie beispielsweise eine Seite für Reiseanträge erstellen, erstellen Sie eine Variante dieser Seite, damit Manager die Reiseanträge von Mitarbeitern verwalten können. Sie legen die Zielgruppe für die Managerseite für alle Personen in der Managerrolle fest. Mitarbeiter können diese Variante nicht anzeigen. Weitere Informationen zu Zielgruppen finden Sie unter Erfahren Sie mehr über Zielgruppen.

Weitere Informationen finden Sie unter Seitenvariante erstellen.

Bearbeiten Sie die Seiteneinstellungen des UI Builders

Ändern Sie die Einstellungen von UI BuilderSeite jederzeit durch Auswahl des Symbols „weitere Aktionen“ Dann Einstellungen anzeigen In UI BuilderExperience-Ansicht. Sie können den Namen, den Pfad und die Parameter Ihrer Seite ändern, nachdem Sie eine Seite erstellt haben.

Weitere Informationen finden Sie unter Bearbeiten Sie eine Seite.

UI Builder Inhaltsstruktur

Die Inhaltsstruktur im Seitenverwaltungsbereich ist wichtig. Es werden nicht nur jedes Spaltenlayout, jede Spalte und jede Komponente auf angezeigt UI BuilderSeite, damit können Sie Ihre Komponenten einfach finden und mit ihnen arbeiten. 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.

Abbildung : 1. Inhaltsstruktur mit Komponenten

Wenn Sie auf eine Komponente in der Inhaltsstruktur klicken, wird die Komponente in Ihrer Phase hervorgehoben, damit Sie Stile, Ereignisse, Daten usw. konfigurieren und hinzufügen können. Sie können Elemente in der Inhaltsstruktur ziehen, um Ihre Seite neu zu organisieren.

Es ist wichtig, eine Komponentenbezeichnung hinzuzufügen, wenn Sie Ihrer Seite eine Komponente hinzufügen. Die Komponentenbezeichnung wird in der Inhaltsstruktur verwendet, um Bezeichnungs-IDs auf jede Komponente in der Inhaltsstruktur anzuwenden. Sie können die Komponenten viel einfacher in der Inhaltsstruktur identifizieren, wenn sie entsprechend gekennzeichnet sind.

UI Builder Toolbox

Verwenden Sie UI Buildertoolbox zum Hinzufügen von Layouts und Komponenten zu Ihrer Seite. Greifen Sie auf zu UI Buildertoolbox durch Auswahl + Inhalt hinzufügen Oder + Symbol in der Phase.

Durchsuchen Sie die Toolbox, um Layouts und Komponenten zu finden, die Sie einem hinzufügen möchten UI BuilderSeite.

Zeigen Sie eine kurze Beschreibung eines Layouts oder einer Komponente an, indem Sie das Informationssymbol auswählen Zum Anzeigen des Tooltips. Auf der Registerkarte „Komponenten“ werden verschiedene Farben angezeigt, wenn eine Komponente eine Voreinstellung verwenden kann oder mit mehreren Komponenten gebündelt ist.

UI Builder Phase

Die Phase ist der größte Bereich in UI BuilderEditor und wird zum Erstellen von Seiten verwendet. Fügen Sie hier Ihre Spaltenlayouts und -Komponenten hinzu, indem Sie entweder eine Schaltfläche + auswählen oder aus dem Komponentenbereich auf die Seite ziehen.

In der Phase werden der Text, die Spaltenlayouts und die Spalten in Magenta umrissen. Komponenten sind blau umrissen.

Verwenden Sie das Strukturelementsymbol, um zu einer anderen Inhaltsebene zu navigieren. Wenn beispielsweise eine Spalte ausgewählt ist, navigieren Sie einfach zum Layout der übergeordneten Spalte oder zu einer Komponente innerhalb der Spalte.

Wählen Sie das Menüsymbol in einem Spaltenlayout oder einer Komponente für Optionen wie Duplizieren und Löschen aus.

Änderungen, die in der Phase vorgenommen wurden, werden im Bereich „Stile“ auf der rechten Seite angezeigt. Änderungen, die im Bereich „Stile“ vorgenommen werden, aktualisieren die Elemente in der Phase sofort.

Skalieren Sie die Größe der Phase in UI Builder

Passen Sie die Größe der Phase in an UI BuilderEditor, indem Sie die Dropdown-Liste „Breite“ auswählen.

Rückgängig machen und wiederholen in UI Builder

Machen Sie Änderungen rückgängig, die Sie an vorgenommen haben, und wiederholen Sie sie UI BuilderSeite. Kehren Sie alle Aktionen um, die Sie an einem Seitenlayout, einer Komponente, einem Stil oder einem Layout vornehmen.

Die Funktion „Rückgängig machen“ und „Wiederholen“ finden Sie in der Header-Symbolleiste. Sie können die Option „Rückgängig machen“ auswählen ( ) Oder wiederholen ( ) Schaltfläche zum Umkehren einer Aktion. Sie können auch auf die Dropdown-Liste „Rückgängig machen“ klicken, um mehrere Schritte zurückzugehen. Sie können Änderungen, die im Datenregal vorgenommen wurden, nicht rückgängig machen und wiederholen.

Sie können die vorherigen 20 Aktionen rückgängig machen, indem Sie die Dropdown-Liste „Rückgängig machen“ auswählen.

UI Builder Konfigurationsbereich

Verwenden Sie den Konfigurationsbereich, um mit Komponenten zu arbeiten, einschließlich Anordnen, Stilen und Einrichten von Ereignis-Handlern.

• Wählen Sie aus Konfig Registerkarte zum Konfigurieren von Komponenten. Jede Komponente verfügt über verschiedene Konfigurationsoptionen, mit denen Sie die erforderlichen Teile der Komponente steuern können. Beispielsweise ist eine Schaltflächenkomponente einfach, und Sie können nur ihre Darstellung, Bezeichnung und einige Eigenschaften konfigurieren. Eine Listenkomponente ist komplizierter und enthält Dutzende von bearbeitbaren Listenparametern.

  

• Wählen Sie aus Stile Registerkarte im Konfigurationsbereich, um einer Komponente einen Stil hinzuzufügen. Sie können standardbasierte kaskadierende Stylesheets (CSS) verwenden, um den visuellen Stil einer Komponente zu ändern. Fügen Sie beispielsweise eine Hintergrundfarbe, einen Rahmen oder einen anderen CSS-Stil hinzu oder ändern Sie ihn.

  

  Weitere Informationen finden Sie unter Ändern Sie die Standarddarstellung von Komponenten.
• Wählen Sie aus Ereignisse Registerkarte Dient zum Konfigurieren von Ereignissen, die Ihren Komponenten, Seiten, Datenressourcen und deklarativen Aktionen Aktionen Aktionen hinzufügen. Wann Sie fügen Komponenten zu hinzu UI BuilderSeite, sind sie nicht zum Ausführen einer Aktion konfiguriert. Beispielsweise ist eine Schaltflächenkomponente statisch und führt nichts aus, bis Sie eine Ereignisaktion daran binden, z. B. das Löschen eines Datensatzes.

  

  Weitere Informationen finden Sie unter Verwalten Sie Aktionen auf UI Builder-Seiten.
• Spalte l Ausscheidungen Steuern Sie, wie Komponenten auf einer Seite angeordnet werden. Wenn Sie ein Spaltenlayout zu hinzufügen UI BuilderSeite können Sie konfigurieren, wie das Layout gestaltet werden soll. Nachdem Sie einer Spalte im Layout eine Komponente hinzugefügt haben, können Sie die Elemente auf erweiterte Weise konfigurieren. Sie können beispielsweise den Inhalt begründen, Elemente ausrichten und Höhe, Breite, Ränder, Hintergrund, Rahmen festlegen und Auffüllung Ihres Spaltenlayouts, Ihrer Spalten und Komponenten. CSS-Raster ist das leistungsstärkste Layoutsystem. CSS-Raster basiert auf einem zweidimensionalen Raster, das Ihnen die Möglichkeit gibt, Ihre Seiten zu erstellen.

  

  Weitere Informationen finden Sie unter Komponenten in UI Builder-Seiten organisieren.

Öffnen Sie eine UI Builder-Seite, um eine Vorschau anzuzeigen

Vorschau anzeigen UI BuilderSeite, um anzuzeigen, wie die Seite als Webseite aussieht.

Wählen Sie aus Schaltfläche zum Testen der Variante, an der Sie derzeit arbeiten, einschließlich modaler Elemente, Viewports, Komponenten, Datenressourcen, und dynamische Daten. Vorschau einer Seite anzeigen Variante Ist nützlich, um zu sehen, wie IT Sieht aus und funktioniert beim Erstellen einer Experience.

Eine andere Methode zum Anzeigen der Vorschau einer Seite besteht darin, den URL-Pfad vom Server anzufordern. Verwenden Sie diese Methode, um zu testen, ob ein Anwender die Variante sieht, wenn er die Seite öffnet. Wählen Sie den Dropdown-Pfeil neben aus Vorschau Und wählen Sie aus Öffnen Sie den URL-Pfad Oder wählen Sie aus Vorschau > URL-Pfad öffnen .

Weitere Informationen finden Sie unter Erfahren Sie, wie Sie Ihren anzeigen und testen können UI BuilderExperience.

Entwickler bearbeitet in UI Builder

Bearbeiten Sie im Menü UI BuilderSeite als Entwickler auf der Plattform. Mit dieser Option können Sie die Details auf Plattformebene Ihrer Seite ändern und entfernen UI Builder. Sie müssen über die richtige Rolle als Entwickler verfügen.

• Erstellen Sie eine Seite in UI Builder
  Erstellen Sie eine Seite in UI BuilderFür ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, damit Sie eine Web-Experience für Ihre Anwender erstellen können.
• Bearbeiten Sie eine Seite
  Bearbeiten Sie eine Seite, um den Seitennamen, den Pfad und die Parameter zu ändern.
• Fügen Sie eine Zielgruppe zu hinzu UI BuilderSeite
  Fügen Sie Ihrer Seite oder Seitenvariante eine oder mehrere Zielgruppen hinzu.
• Testwerte auf einer Seite
  Fügen Sie Ihrer URL Testwerte hinzu, um Testdaten auf eine Seite zu übertragen.
• Seitenvariante erstellen
  Eine Seitenvariante in UI BuilderIst eine Variation einer Seite, die sich im selben Pfad befindet und anhand von Anwenderkriterien verschiedene Zielgruppen anspricht.
• Responsive Authoring
  Verwenden Sie reaktionsfähiges Authoring, um zu erstellen UI BuilderSeiten, die sich problemlos an verschiedene Formfaktoren (Größen) anpassen, z. B. Desktop, Tablet und Mobilgeräte.
• Erfahren Sie, wie Sie Ihren anzeigen und testen können UI BuilderExperience
  Zeigen Sie eine Vorschau Ihrer Experience in an UI BuilderUm zu sehen, wie es beim Erstellen einer Experience aussieht und funktioniert. Durch die Vorschau wird sichergestellt, dass Ihre Experience wie erwartet funktioniert, dass die Datenressourcen verfügbar sind und dass die Layouts korrekt eingerichtet sind.