Verwalten Sie UI Builder Seiten und Seitenvarianten

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

UI Builder Schnellstart

Erstellen Sie Seiten in UI Builder als Teil einer Arbeitsbereichs- oder benutzerdefinierten Portal-Experience. UI Builder Seiten bestehen aus Layouts und Komponenten. Sie erstellen eine Seite mit 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 Benutzer Reiseanforderungen hinzufügen und übermitteln können. Die Art und Weise, wie Sie Ihre Seite erstellen, ist grenzenlos.

Hinweis:

Ein Entwickler sollte jeweils 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 Ihren Arbeitsbereich oder Ihre Portal-Experience zu erstellen oder anzupassen. Fügen Sie beispielsweise ein Spaltenlayout hinzu, und platzieren Sie in einer Spalte eine Schaltflächenkomponente, mit der Benutzer Anforderungen senden können.

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

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

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	Spalten mit Komponenten füllen.
Komponente	Basiselemente einer Seite, z. B. Schaltflächen, Listen und Formulare.
Modal	Verwenden Sie ein Modal, um einen Seitentyp in UI Builder zu erstellen, der oben auf der Seite gerendert wird und eine Aktion erfordert.
Popover	Ein Popover ist ein Containertyp, der über einer UI Builder -Seite angezeigt wird, wenn er durch ein Event 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 UI Builder Seiten mithilfe von -Komponenten an.

Erstellen Sie eine UI Builder-Seite

Erstellen Sie eine UI Builder -Seite, um eine Seiten-Experience von Grund auf zu erstellen, oder verwenden Sie eine Seitenvorlage. Erstellen Sie eine Seite komponentenweise. Wenn Sie eine der vordefinierten Seitenvorlagen verwenden, beginnen Sie mit einer Basisstruktur und können diese an Ihre Anforderungen 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, aber der Pfad muss eindeutig sein. Die URL-Vorschau zeigt den Pfad Ihrer -Seite.

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

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

Eine UI Builder-Seite erstellen: Erweiterte Einstellungen

Fügen Sie der Seite UI Builder erforderliche Parameter hinzu. Ein erforderlicher Parameter ist ein Datenelement, das für Ihre Seite erforderlich ist, 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. Beispielsweise können Sie 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 es an die URL angehängt wurde.

Fügen Sie der 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 der Reihenfolge funktionieren, in der sie angegeben werden.

Legen Sie die Zielgruppen- und Bedingungseinstellungen für 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 selben Pfad, mit der Sie Experiences für verschiedene Zielgruppen mithilfe von Benutzerkriterien 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 Erstellen Sie eine Seitenvariante.

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 Incident hinzufügen und eine Datenressource daran binden, um Testdaten zum Incident für diese Tabelle zu übernehmen.

Um Testwerte zum Anzeigen von Daten abzurufen, fügen Sie eine Datenressource hinzu, und konfigurieren Sie 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 Nach einem einzelnen Datensatz suchenhinzu. Binden Sie im Feld Tabelleden Incident-Testwert dynamisch an eine context.props.table- Tabelle, wie in der folgenden Abbildung dargestellt.

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 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 verschiedene Zielgruppen mit unterschiedlichen Inhalten mithilfe von Benutzerkriterien ansprechen. Sie können beispielsweise eine Homepage für Service Desk-Mitarbeiter und eine Variante der Seite für Manager erstellen, die unter derselben 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 der Mitarbeiter verwalten können. Sie legen die Zielgruppe für die Managerseite für alle Benutzer mit 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 Erstellen Sie eine Seitenvariante.

Bearbeiten Sie die Einstellungen der UI Builder-Seite

Sie können die Einstellungen der Seite UI Builder jederzeit ändern, indem Sie Einstellungen in der Experience-Ansicht UI Builder 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. Sie zeigt nicht nur jedes Spaltenlayout, jede Spalte und jede Komponente auf Ihrer Seite UI Builder an, sondern ermöglicht es Ihnen auch, Ihre Komponenten leicht zu finden und mit ihnen zu 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 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 die 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 leichter 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 + Komponente hinzufügen oder das Symbol + in der Phase auswählen.

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

Zeigen Sie eine kurze Beschreibung eines Layouts oder einer Komponente an, indem Sie auf 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 hier Ihre Spaltenlayouts und Komponenten hinzu, indem Sie entweder die Schaltfläche + wählen oder aus dem Komponentenbereich auf die Seite ziehen.

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

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

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

In der Phase vorgenommene Änderungen werden im Stilebereich auf der rechten Seite angezeigt. Durch Änderungen im Stilebereich 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 die Dropdown-Liste Breite auswählen.

Rückgängig machen und Roto in UI Builder

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

Die Funktionen „Rückgängig machen“ und „Wiederholen“ finden Sie in der Header-Symbolleiste. Sie können auf die Schaltfläche „Rückgängig machen“ ( “ ) oder „Wiederholen“ ( „Wiederholen“ ) klicken, um eine Aktion rückgängig zu machen. Sie können auch auf die Dropdown-Liste „Rückgängig machen“ klicken, um mehrere Schritte zurückzugehen. Sie können im Datenregal vorgenommene Änderungen 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, Formatieren und Einrichten von Event-Handlern.

• Wählen Sie die Registerkarte Konfiguration 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 ihr Erscheinungsbild, ihre Bezeichnung und einige Eigenschaften konfigurieren. Eine Listenkomponente ist komplizierter und enthält Dutzende von bearbeitbaren Listenparametern.

  

• 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. Fügen Sie beispielsweise eine Hintergrundfarbe, einen Rahmen oder einen anderen CSS-Stil hinzu oder ändern Sie sie.

  

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

  

  Weitere Informationen finden Sie unter Aktionen auf UI Builder-Seiten verwalten (erweiterte Funktion).
• Spalte lyouts regelt, wie Komponenten auf einer Seite angeordnet werden. 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 Höhe, Breite, Ränder, Hintergrund, Rahmen und Auffüllung des Spaltenlayouts, der Spalten und der Komponenten festlegen. Das CSS-Raster ist das leistungsstärkste Layoutsystem. CSS-Raster basiert auf einem zweidimensionalen Raster, mit dem Sie steuern können, wie Sie Ihre Seiten erstellen.

  

  Weitere Informationen finden Sie unter Organisieren Sie Komponenten auf UI Builder-Seiten.

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

Zeigen Sie eine Vorschau einer UI Builder -Seite 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 dynamische Daten. Die Vorschau einer Seitenvariante ist nützlich, um zu sehen, wie sie aussieht und funktioniert, während eine Experience erstellt wird.

Eine andere Methode zur Vorschau einer Seite besteht darin, den URL-Pfad vom Server anzufordern. Verwenden Sie diese Methode, um zu testen, ob ein Benutzer die Variante sieht, wenn er die Seite öffnet. Klicken Sie auf den Dropdown-Pfeil neben Vorschau, und wählen Sie URL-Pfad oder wählen Sie Vorschau > URL-Pfad .

Weitere Informationen finden Sie unter Erfahren Sie, wie Sie Ihre Experience UI Builder 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 richtige Rolle als Entwickler verfügen.

• Erstellen Sie eine Seite in UI Builder
  Erstellen Sie eine Seite in UI Builder für ein Portal, einen Arbeitsbereich oder eine benutzerdefinierte Anwendung, damit Sie eine Web-Experience für Ihre Benutzer erstellen können.
• 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.
• Erstellen Sie eine Seitenvariante
  Eine Seitenvariante in UI Builder ist eine Variation einer Seite, die im selben Pfad vorhanden ist und anhand von Benutzerkriterien verschiedene Zielgruppen anspricht.
• Erfahren Sie, wie Sie Ihre Experience UI Builder 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. Durch die Vorschau wird sichergestellt, dass Ihre Experience wie erwartet funktioniert, dass die Datenressourcen verfügbar sind und die Layouts korrekt eingerichtet sind.