Verwalten Sie Seiten und Seitenvarianten UI Builder .

Erfahren Sie, was eine Seite in UI Builderist. Machen Sie sich mit den Bausteinen einer Seite UI Builder vertraut, z. B. Spaltenlayouts und Komponenten.

UI Builder Schnellstart

Erstellen Sie Seiten in UI Builder als Teil eines Arbeitsbereichs oder einer anwenderdefinierten Portal-Experience. UI Builder Seiten bestehen aus Layouts und Komponenten. Sie erstellen eine Seite mithilfe von Spaltenlayouts und Komponenten, um einen Benutzer durch eine Experience zu führen. Sie können beispielsweise eine Seite erstellen, um Reiseanforderungen für Ihre Mitarbeiter zu verwalten. Die Seite kann Spaltenlayouts mit Komponenten enthalten, die Listen aller übermittelten und genehmigten Reiseanforderungen enthalten. Sie können Schaltflächen hinzufügen, mit denen Anwender Reiseanforderungen hinzufügen und übermitteln können. Der Art und Weise, wie Sie Ihre Seite erstellen, sind keine Grenzen gesetzt.

Hinweis:

Es sollte jeweils ein Entwickler an einer Variante arbeiten.

Spaltenlayouts und Komponenten in UI Builder

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

Sie können über die Phase oder die Inhaltsstruktur Spaltenlayouts, Spalten und Komponenten hinzufügen und zwischen ihnen navigieren.

Ein Spaltenlayout kann eine oder mehrere Spalten enthalten. Spalten können Komponenten enthalten. Ändern Sie die visuellen Stile von Spaltenlayouts, Spalten und Komponenten, um Ihre Experience zu gestalten.

Tabelle : 1. Arten von Seitenlayoutelementen

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

Weitere Informationen finden Sie unter Passen Sie die Seiten UI Builder mithilfe von Komponenten an.

Erstellen Sie eine UI Builder-Seite

Erstellen Sie die Seite UI Builder, um eine Seiten-Experience von Grund auf neu zu erstellen, oder verwenden Sie eine Seitenvorlage. Erstellen Sie eine Seite komponentenweise nacheinander. Wenn Sie eine der vordefinierten Seitenvorlagen verwenden, beginnen Sie mit einer Basisstruktur und können sie an Ihre Bedürfnisse anpassen.

Benennen Sie Ihre Seite UI Builder. 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.

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

Verwenden Sie die Seitenvorlage UI Builder, 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.

Erstellen Sie eine UI Builder-Seite: Erweiterte Einstellungen

Fügen Sie der Seite UI Builder die erforderlichen Parameter hinzu. 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 für alle Komponenten auf der Seite verfügbar gemacht. Erforderliche Parameter sind in der URL sichtbar, wenn Sie sie Ihrer Seite hinzufügen. Im folgenden Beispiel wurde ein erforderlicher Parameter namens table hinzugefügt. Beachten Sie, dass sie an die URL angehängt wurde.

Fügen Sie Ihrer Seite UI Builder optionale Parameter hinzu. 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/Wert-Paare, die unabhängig von ihrer Reihenfolge funktionieren.

Legen Sie die Zielgruppen- und Bedingungseinstellungen für die Seitenvarianten UI Builder fest. Wenn Sie eine Seite erstellen, erstellt UI Builder standardmäßig auch eine Variante der Seite für Sie. Eine Seitenvariante ist eine Variation Ihrer Seite im gleichen Pfad, mit der Sie Experiences für verschiedene Zielgruppen mithilfe von Anwenderkriterien ausrichten können. Zum 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 Ihrer Seite UI Builder einen Testwert hinzu, um Testdaten zu Testzwecken auf die Seite zu bringen. Wenn Sie beispielsweise eine Tabelle als erforderlichen Parameter hinzufügen, können Sie den Testwert eines incident hinzufügen und eine Datenressource daran binden, um Testdaten zum Incident für diese Tabelle zu übernehmen.

Um Testwerte zum Anzeigen von Daten zu erhalten, 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 Incident als Testwert hinzufügen. Fügen Sie dann eine Datenressource mit dem Namen Einzelnen Datensatz suchen hinzu. Binden Sie im Feld Tabelleden Incident-Testwert dynamisch an eine Tabelle context.props.table (siehe folgende Abbildung).

Zeigen Sie eine vorhandene UI Builder-Seite an

Sie können basierend auf Ihren Rolleneinstellungen auf jeder Seite UI Builder in Ihrer Experience arbeiten. Klicken Sie auf den Namen der Seite, auf der Sie arbeiten möchten, während Sie sich in der Experience-Ansicht Ihrer Experience befinden.

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

Erstellen Sie eine UI Builder-Seitenvariante

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

Sie legen die Zielgruppe für jede UI Builder -Seitenvariante fest. Die Zielgruppe bestimmt, wer die Seitenvariante verwendet. Wenn Sie beispielsweise eine Reiseanforderungsseite erstellen, erstellen Sie eine Variante dieser Seite, damit Manager die Reiseanforderungen 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 für UI Builder

Sie können die Einstellungen Ihrer Seite UI Builder jederzeit ändern, indem Sie in der Experience-Ansicht UI BuilderEinstellungen auswählen. 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 zeigt nicht nur alle Spaltenlayouts, Spalten und Komponenten auf der Seite UI Builder an, sondern ermöglicht Ihnen auch die Suche nach Ihren Komponenten und die Arbeit mit ihnen. 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.

Abbildung : 1. Inhaltsstruktur mit Komponenten

Wenn Sie in der Inhaltsstruktur auf eine Komponente klicken, wird die Komponente in Ihrer Phase hervorgehoben, sodass 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 in der Inhaltsstruktur viel einfacher identifizieren, wenn sie entsprechend gekennzeichnet sind.

UI Builder Toolbox

Verwenden Sie die Toolbox UI Builder, um Ihrer Seite Layouts und Komponenten hinzuzufügen. Greifen Sie auf die Toolbox UI Builder zu, indem Sie in der Phase + Inhalt hinzufügen oder das Symbol + wählen.

Durchsuchen Sie die Toolbox nach Layouts und Komponenten, die Sie einer Seite UI Builder hinzufügen möchten.

Zeigen Sie eine kurze Beschreibung eines Layouts oder einer Komponente an, indem Sie das Informationssymbol , um den Tooltip anzuzeigen. 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 im Editor UI Builder und wird zum Erstellen von Seiten verwendet. Fügen Sie Ihre Spaltenlayouts und Komponenten hier hinzu, indem Sie entweder die Schaltfläche + auswählen oder aus dem Komponentenbereich auf die Seite ziehen.

In der Phase sind der Textkörper, die Spaltenlayouts und die Spalten in Magenta umrandet. Komponenten sind blau umrandet.

Verwenden Sie das Symbol Strukturelement, um zu einer anderen Inhaltsebene zu navigieren. Wenn beispielsweise eine Spalte ausgewählt ist, können Sie einfach zum übergeordneten Spaltenlayout oder einer Komponente innerhalb der Spalte navigieren.

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

Änderungen, die in der Phase vorgenommen werden, werden im Bereich Stile rechts angezeigt. Bei im Bereich Stile vorgenommenen Änderungen werden die Elemente in der Phase sofort aktualisiert.

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

Passen Sie die Größe der Phase im Editor UI Builder an, indem Sie das Dropdown-Menü Breite auswählen.

Rückgängig machen und Wiederholen in UI Builder

Änderungen, die Sie an der Seite UI Builder vorgenommen haben, rückgängig machen und wiederholen. Machen Sie jede Aktion rückgängig, 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 Schaltfläche „Rückgängig machen“ ( “ ) oder „Wiederholen“ ( “ ) wählen, um eine Aktion rückgängig zu machen. Sie können auch auf die Dropdownliste „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 Dropdownliste „Rückgängig machen“ auswählen.

UI Builder Konfigurationsbereich

Verwenden Sie den Konfigurationsbereich, um mit Komponenten zu arbeiten, einschließlich zum Anordnen, Formatieren und Einrichten von Ereignishandlern.

• Wählen Sie die Registerkarte Konfig aus, um -Komponenten zu konfigurieren. Jede Komponente verfügt über unterschiedliche Konfigurationsoptionen, mit denen Sie die erforderlichen Teile der Komponente steuern können. Zum Beispiel ist eine Schaltflächenkomponente einfach, und Sie können nur ihre Darstellung, ihre Bezeichnung und einige Eigenschaften konfigurieren. Eine Listenkomponente ist komplexer und enthält Dutzende bearbeitbarer Listenparameter.

  

• Wählen Sie im Konfigurationsbereich die Registerkarte Stile aus, um einer Komponente einen Stil hinzuzufügen. Sie können standardbasierte Cascading Style Sheets (CSS) verwenden, um den visuellen Stil einer Komponente zu ändern. Sie können beispielsweise eine Hintergrundfarbe, einen Rahmen oder einen anderen CSS-Stil hinzufügen oder ändern.

  

  Weitere Informationen finden Sie unter Ändern Sie die Standarddarstellung von Komponenten.
• Wählen Sie die Registerkarte Ereignisse , um Ereignisse zu konfigurieren, die Ihren Komponenten, Seiten, Datenressourcen und deklarativen Aktionen Aktionen hinzufügen. Wenn Sie Ihrer Seite UI Builder Komponenten hinzufügen, werden diese nicht für die Ausführung von Aktionen konfiguriert. Beispielsweise ist eine Schaltflächenkomponente statisch und führt erst dann eine Aktion aus, wenn Sie eine Ereignisaktion an sie binden, z. B. das Löschen eines Datensatzes.

  

  Weitere Informationen finden Sie unter Verwalten Sie -Aktionen auf UI Builder-Seiten.
• Spalte lNutzen Sie die Layouts, um die Anordnung von Komponenten auf einer Seite zu steuern. Wenn Sie einer Seite UI Builder ein Spaltenlayout hinzufügen, 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 die Höhe, Breite, Ränder, Hintergrund, Rahmen und Abstände Ihres Spaltenlayouts, Ihrer Spalten und Komponenten festlegen. CSS-Raster sind das leistungsfähigste Layoutsystem. CSS Grid basiert auf einem zweidimensionalen Raster, mit dem Sie die Erstellung Ihrer Seiten steuern können.

  

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

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

Zeigen Sie eine Vorschau einer Seite UI Builder an, um zu sehen, wie die Seite als Webseite aussieht.

Wählen Sie die Schaltfläche zum Testen der Variante, an der Sie gerade arbeiten, einschließlich modaler Elemente, Viewports, Komponenten, Datenressourcen und dynamischer Daten. Die Vorschau einer Seitenvariante ist nützlich, um zu sehen, wie sie aussieht und funktioniert, während Sie eine Experience erstellen.

Eine andere Methode zur 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 Vorschau und dann URL-Pfad öffnen oder wählen Sie Vorschau > URL-Pfad öffnen .

Weitere Informationen finden Sie unter Erfahren Sie, wie Sie Ihre UI Builder -Experience anzeigen und testen können.

Entwicklerbearbeitung in UI Builder

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

• Erstellen Sie eine Seite in UI Builder
  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.
• Bearbeiten Sie eine Seite
  Bearbeiten Sie eine Seite, um den Seitennamen, den Pfad und die Parameter zu ändern.
• Fügen Sie Ihrer Seite UI Builder eine Zielgruppe hinzu
  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 bringen.
• Seitenvariante erstellen
  Eine Seitenvariante in UI Builder ist eine Variation einer Seite, die im gleichen Pfad vorhanden ist und verschiedene Zielgruppen anhand von Anwenderkriterien anspricht.
• Responsive Authoring
  Verwenden Sie reaktionsfähiges Authoring, um UI Builder -Seiten zu erstellen, die sich reibungslos an verschiedene Formfaktoren (Größen) wie Desktop, Tablet und Mobilgerät anpassen lassen.
• Erfahren Sie, wie Sie Ihre UI Builder -Experience anzeigen und testen können
  Zeigen Sie eine Vorschau Ihrer Experience in UI Builder an, um zu sehen, wie sie aussieht und funktioniert, während Sie eine Experience erstellen. Mithilfe einer Vorschau können Sie sicherstellen, dass Ihre Experience wie erwartet funktioniert, dass die Datenressourcen verfügbar sind und dass die Layouts ordnungsgemäß eingerichtet sind.