Passen Sie UI Builder Seiten mithilfe von -Komponenten an

  • Freigeben Version: Washingtondc
  • Aktualisiert 1. Februar 2024
  • 5 Minuten Lesedauer
  • Erfahren Sie, was eine Komponente in UI Builderist. Sehen Sie sich auch an, wie Komponenten in UI Builder funktionieren.

    Komponenten sind die Basiselemente Ihrer Seite UI Builder. Komponenten reichen von Kernelementen wie Schaltflächen und Bezeichnungen bis hin zu Komponenten für komplexere Erfahrungen wie Listen und Formulare.

    Sie können diese Komponenten zu Ihrer Seite UI Builder hinzufügen, um Ihren Arbeitsbereich oder Ihre Portal-Experience zu erstellen oder anzupassen. Zum Beispiel das Hinzufügen einer Aktivitätenstrom -Komponente zu Ihrer Seite, mit der Benutzer ihre Reiseanforderungsaktivität anzeigen können.

    Komponentenbibliothek mit einer Liste der verfügbaren Komponenten.

    Sie können Ihrer Seite UI Builder auf folgende Weise Komponenten hinzufügen.

    Tabelle : 1. Möglichkeiten zum Hinzufügen einer Komponente zu einer Seite
    Standort Beispiel
    Direkt von einer Seite in UI Builder (Option 1)

    Klicken Sie auf das Symbol zum Hinzufügen von Inhalten (Plus), wählen Sie die Registerkarte Komponenten und dann eine Komponente aus. Symbol „Inhalt hinzufügen“ in der Phase, in der das Toolbox-Fenster mit ausgewählter Registerkarte „Komponenten“ angezeigt wird.

    Direkt von einer Seite in UI Builder (Option 2)

    Wählen Sie in einem Spaltenlayout oder einer Komponente das Symbol „Vor“ (Plus) oder „Nach“ (Plus) hinzufügen, und wählen Sie dann eine Komponente aus.Animation, die zeigt, wie Sie das Symbol „+ Hinzufügen“ für eine Komponente auswählen und eine Komponente hinzufügen.

    Über die Inhaltsstruktur in UI Builder

    Wählen Sie in der Inhaltsstruktur + Komponente hinzufügen aus, und wählen Sie dann eine Komponente aus.

    Schwarzer Pfeil, der auf die Option „+ Komponente hinzufügen“ in der Inhaltsstruktur neben dem Toolbox-Fenster mit ausgewählter Registerkarte „Komponenten“ zeigt.

    Über das schwebende Menü über der Seite in UI Builder

    Wählen Sie in einem Spaltenlayout oder einer Komponente das Menüsymbol, dann Hinzufügen vor oder Hinzufügen nachund dann eine Komponente aus.Pfeil, der auf das erweiterte Menü in der Phase zeigt.

    Spaltenlayouts in UI Builder

    Fügen Sie Ihrer Seite UI Builder zuerst Spaltenlayouts und Spalten hinzu. Fügen Sie dann den Spalten in einem Spaltenlayout Komponenten hinzu, um Ihre Seite zu erstellen und anzupassen. Stellen Sie sich ein Spaltenlayout als einen definierten Teil des Bildschirms vor, dem Sie Komponenten wie Listen und Überschriften hinzufügen. Sie können beliebig viele Spaltenlayouts auf einer Seite UI Builder haben, mit bis zu sechs Spalten in jedem Spaltenlayout. Einer einzelnen Spalte können mehrere Komponenten hinzugefügt werden. Zeigen Sie die Struktur Ihrer Seite in der Inhaltsstruktur an.

    Inhaltsstruktur, die die Hierarchie von drei Spaltenlayouts mit Spalten mit Komponenten wie Farbauswahl, Avatar und stilisiertem Text zeigt.

    Weitere Informationen finden Sie unter Spaltenlayouts.

    Konfigurieren Sie Komponenten in UI Builder

    Es gibt drei Möglichkeiten, eine Komponente im Konfigurationsbereich zu konfigurieren.
    • Konfigurieren Sie die Komponenteneigenschaften.
    • Fügen Sie CSS-Stilüberschreibungen hinzu.
    • Richten Sie Event-Handler für die -Komponenten ein.
    Registerkarten des Konfigurationsbereichs zum Konfigurieren, Formatieren und Hinzufügen von Events zu Komponenten.
    Registerkarte „Konfigurieren“
    Komponenteneigenschaften variieren je nach Komponente. Die Komponentenkonfiguration kann einfach sein, wie bei einfachen Elementen wie Schaltflächen, Überschriften und Bezeichnungen. Komponenten wie Listen und Formulare erfordern eine umfangreiche Konfiguration. Wählen Sie für Symbol- und Bildkomponenten aus einer Vielzahl von Optionen aus, oder verwenden Sie ein benutzerdefiniertes Symbol oder Bild. Sie können Komponenteneigenschaften mit dem Low-Code-JSON-Editor von UI Builderändern. Weitere Informationen zum Konfigurieren von Komponenten finden Sie unter Next Experience-Komponenten.
    Für jede Eigenschaft auf der Registerkarte „Komponentenkonfiguration“ können Sie aus den folgenden Optionen wählen.

    Symbole für dynamische Datenbindung und Skripterstellung werden angezeigt, wenn Sie den Mauszeiger über ein Feld bewegen.

    • Statisch: Verwenden Sie Daten aus einer Liste, oder geben Sie Ihre eigenen Daten ein. Die Daten stellen keine Verbindung zu einer externen Datenquelle her.
    • Dynamische Datenbindung: Eine Möglichkeit, eine Komponenteneigenschaft an eine Datenressource, eine Seiteneigenschaft oder einen Clientstatus zu binden.
    • Skript: Geben Sie JavaScript-Code ein, um einen Eigenschaftswert auszufüllen.
    Registerkarte „Stile“.
    Sie können die Cascading Style Sheets (CSS) für einzelne Komponenten ändern. Ändern Sie Farbrahmen, Schriftgröße usw.
    Registerkarte „Events“
    Konfigurieren Sie Event-Zuordnungen auf Seiten- und Variantenebene. Fügen Sie auch gesendete Events und behandelte Events für Ihre Variante hinzu. Die komplexeren Experience-Komponenten stützen sich stark auf dynamische Daten, die von einer Datenressource bereitgestellt werden. Das Binden dynamischer Daten an eine Komponente ist eine wichtige Funktion. Sie stellen Daten aus Tabellen, Datensätzen oder anderen Elementen auf Ihrer Seite dynamisch zur Verfügung. Durch das Verfügbarmachen von Daten können Sie Ihre Komponenten wiederverwenden. Außerdem können Sie auf die Konfigurationsfelder zeigen, um Symboldaten oder Skriptoptionen für jedes Feld anzuzeigen.

    Wenn Sie Komponenten auf der Seite hinzufügen und konfigurieren, zeigt die Phase Ihre Arbeit. Wenn Sie Änderungen vornehmen und die Aktualisierungen nicht in die Phase geladen werden, wählen Sie das Menüsymbol „Öffnen“ und dann Entwickler > Neu laden der Phase erzwingen. Beim erneuten Laden der Phase werden Ihre Änderungen angezeigt, aber nicht gespeichert. Um Ihre Arbeit zu speichern, wählen Sie oben rechts Speichern aus.

    Experience-Ansicht mit ausgewähltem Menü „Öffnen“ mit den Optionen „Entwickler“ und „Neu laden der Phase erzwingen“.

    Komponentenvoreinstellungen in UI Builder

    Verwenden Sie Voreinstellungen, um Komponenten auf kompatiblen Seiten automatisch zu konfigurieren. UI Builder Seitenvorlagen enthalten Controller, die in Voreinstellungen zum Definieren von Komponentenkonfigurationswerten verwendet werden. Weitere Informationen finden Sie unter Konfigurieren Sie Komponenten automatisch mithilfe von Voreinstellungen.

    Eigenschaften der Überschriftenkomponente, die durch eine Voreinstellung konfiguriert werden.

    Abschnitte mit Komponenteneigenschaften

    Komponenteneigenschaften werden in Abschnitte mit ähnlichen Eigenschaften gruppiert. Öffnen und schließen Sie Abschnitte, indem Sie auf die Pfeile rechts neben den Eigenschaftsüberschriften klicken. UI Builder-Administratoren können basierend auf UI-Richtlinien auswählen, welche Komponentenkonfigurationseigenschaften angezeigt oder ausgeblendet werden.

    Die Abschnitte für Komponenteneigenschaften wurden erweitert, um alle verfügbaren Eigenschaften anzuzeigen.

    Komponentenformel-Editor

    Verwenden Sie den Komponentenformel-Editor UI Builder im Konfigurationsbereich, um Formeln zu binden oder zu ändern. Sie können Text, Datenbindungen und/oder Formeln eingeben. Formeln können aus einer beliebigen Kombination der drei Eingabetypen bestehen. Der Komponentenformel-Editor unterstützt logische, arithmetische, Vergleichs-, Negations- und funktionale Transformationstypen.

    Komponentenformel-Editor mit einer Beispielformel.

    Jede dem Komponentenformel-Editor hinzugefügte Funktion wird automatisch vervollständigt. Der Komponentenformel-Editor zeigt eine Bezeichnung für jede Eingabe der Funktion an, damit Sie wissen, welche Parameter jede Funktion benötigt. Weitere Informationen zu den unterstützten Funktionen im Komponentenformel-Editor finden Sie unter Unterstützte Funktionen im Komponentenformel-Editor von UI Builder ..

    Komponenten-ID

    Verwenden Sie die Komponenten-ID, wenn Sie ein Skript hinzufügen oder Daten an die Komponente binden, um auf die Komponente zu verweisen. Eine Komponenten-ID wird automatisch erstellt und basiert auf der Komponentenbezeichnung, wenn Sie einer Seite eine Komponente hinzufügen. Sie können die Komponenten-ID beliebig ändern, solange sie eindeutig ist. Wählen Sie im Konfigurationsbereich den Namen der Komponente aus, um die Komponenten-ID anzuzeigen.

    Feld Komponentenbezeichnung, in dem Sie eine Komponentenbezeichnung hinzufügen oder bearbeiten, die in der Inhaltsstruktur angezeigt wird.

    Transparenz der Komponenten

    Wählen Sie im Konfigurationsbereich das Augensymbol aus, um die Sichtbarkeit der Komponenten festzulegen. Die Sichtbarkeit der Komponente basiert auf einer Eigenschaft der Komponente selbst und nicht auf der Person, die sie anzeigt. Sie können eine Komponente basierend auf Bedingungen anzeigen oder ausblenden. Beispiel: Ausblenden eines Bilds, wenn ein defekter Link vorhanden ist.

    Sie können die Sichtbarkeit basierend auf der dynamischen Datenbindung oder durch Bearbeiten eines geskripteten Eigenschaftswerts festlegen.

    Legen Sie den Testwert fest, um zu testen, was passiert, wenn die Sichtbarkeit auf „true“, „false“ oder „none“ festgelegt wird.

    Komponentensichtbarkeitsoptionen auf der Konfigurationsregisterkarte.

    Doppelte Komponenten

    Erstellen Sie eine exakte Kopie einer konfigurierten Komponente auf Ihrer Seite UI Builder, mit Ausnahme des Namens und der ID. Eine duplizierte Komponente kopiert alle Eigenschaften, Bindungen und Events. Weitere Informationen finden Sie unter Duplizieren Sie eine Komponente.

    Komponentenmenü mit Pfeil, der auf eine doppelte Option zeigt.