Daten mithilfe von Controllern an Seiten UI Builder binden (erweiterte Funktion)

Controller vereinfachen die Verknüpfung von Daten und Ereignislogik, um Komponentenvoreinstellungen in UI Builderzu aktivieren.

Mit Controllern können Seitengeneratoren Daten und Skripts auf einfache Weise mit ihren Seiten in UI Builderverbinden. Ein Controller ist eine Art von Datenressource, die von Komponentenvoreinstellungen zum Binden von Daten an Komponenten verwendet wird. Controller unterscheiden sich von anderen Datenressourcen dadurch, dass sie Daten und Ereignislogik enthalten, die Voreinstellungen für Komponenten ermöglicht. Ein Controller überträgt Daten vom Server zu einer Komponente und bringt aktualisierte Daten basierend auf Interaktionen mit der Komponente zurück zum Server. Weitere Informationen zu Komponentenvoreinstellungen finden Sie unter Komponenten mithilfe von Voreinstellungen automatisch konfigurieren.

Hinweis:

Das Erstellen von Controllern wird in Xanadunicht unterstützt.

Controller werden standardmäßig hinzugefügt, wenn Sie eine UI Builder -Seitenvorlage verwenden. Sie können Controller zu Seiten UI Builder hinzufügen, ohne dass sich ein Controller im Datenressourcen-Drawer befindet, oder indem Sie eine Komponentenvoreinstellung auswählen, nachdem Sie einer Seite eine Komponente hinzugefügt haben. Sie können anzeigen, welche Controller auf Ihrer Seite konfiguriert sind, indem Sie das Drawer für Datenressourcen öffnen.

Abbildung : 1. Controller im Datenressourcen-Drawer

Arten von Datencontrollern in UI Builder

Datencontroller

Datencontroller entscheiden, welche Informationen auf den Seiten UI Builder angezeigt werden sollen. Datencontroller verwenden Datenressourcen, um Informationen in Echtzeit zu synchronisieren und Daten/Tabellen zu aktualisieren, wenn ein Anwender Informationen eingibt. Sie können Datencontroller manuell zu einer Seite hinzufügen.

UI-Controller

UI-Controller werden bei der Verwendung von UI Builder -Seitenvorlagen zu Seiten hinzugefügt und können nicht manuell hinzugefügt werden.

Verwenden von Controllern mit Voreinstellungen in UI Builder

Sie können einer Seite UI Builder mehrere Controller hinzufügen, aber denselben Controller nicht zweimal verwenden. Wenn Sie versuchen, eine Komponentenvoreinstellung zu verwenden, die einen Controller benötigt, werden Sie von UI Builder aufgefordert, sie hinzuzufügen.

Nicht alle Komponenten funktionieren mit Controllern, aber Sie können in der Komponentenbibliothek leicht sehen, welche funktionieren. Wenn auf der Seite UI Builder ein Controller konfiguriert ist, können Sie die Komponentenbibliothek öffnen, um anzuzeigen, welche Komponenten über Voreinstellungen verfügen. Komponenten mit verfügbaren Voreinstellungen werden in der Komponentenbibliothek hervorgehoben.

Abbildung : 2. Komponenten mit Voreinstellungen

Fügen Sie einen Controller hinzu

Fügen Sie Ihrer Seite einen Daten-Controller hinzu, um Komponentenvoreinstellungen zu verwenden.

Vorbereitungen

Erforderliche Rolle: admin

Warum und wann dieser Vorgang ausgeführt wird

Der Datensatz-Controller ist der einzige Controller, den Sie einer Seite in Xanaduhinzufügen können.

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
   Weitere Informationen finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
3. Erstellen oder öffnen Sie eine Seite oder Seitenvariante.
   Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter Seite in UI Builder erstellen.
4. Wählen Sie im Datenressourcen-Drawer das Symbol + aus.
5. Wählen Sie Datenressource.
   
6. Geben Sie Formular in das Suchfeld ein.
7. Wählen Sie den Controller aus, den Sie Ihrer Seite hinzufügen möchten.
8. Wählen Sie Hinzufügen.
   
9. Füllen Sie die Felder aus, um den Controller zu konfigurieren.
   

Ergebnisse

Der Formular-Controller wird im Abschnitt „ Datenressourcen “ angezeigt.

Bearbeiten Sie einen Controller

Konfigurieren Sie einen Controller, um Daten aus einer Tabelle abzurufen.

Vorbereitungen

Erforderliche Rolle: admin

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
   Weitere Informationen finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
3. Erstellen oder öffnen Sie eine Seite.
   Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter Seite in UI Builder erstellen.
4. Wählen Sie im Drawer „ Daten und Skripts “ den Controller aus, den Sie bearbeiten möchten.
   
5. Füllen Sie die Felder des Formulars aus.

   Tabelle : 1. Formular-Controller-Formular

   Feld	Beschreibung
   Typ	„Controller“ ist als Typ für alle Controller vordefiniert.
   Tabelle	Fügen Sie eine Tabelle hinzu, aus der der Controller Daten abrufen soll.
   Sys-ID	Geben Sie den eindeutigen Bezeichner für einen Datensatz ein, geben Sie einen Wert an, oder verwenden Sie -1, um einen neuen Wert zu generieren.

6. Schließen Sie das Dialogfeld „Controller bearbeiten“.
7. Wählen Sie Speichern.

Löschen Sie einen Controller

Löschen Sie einen Controller, den Sie nicht mehr benötigen, in UI Builder.

Vorbereitungen

Erforderliche Rolle: admin

Warum und wann dieser Vorgang ausgeführt wird

Controller können nicht von Seiten gelöscht werden, die mit einer Seitenvorlage erstellt wurden.

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen Erstellen > Experience.
   Weitere Informationen finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
3. Öffnen Sie die Seite mit dem Controller, den Sie löschen möchten.
4. Wählen Sie das Menüsymbol ( ) neben dem Controller, den Sie löschen möchten.
   
5. Wählen Sie Löschen.
   
   Der Controller wird aus den lokalen Instanzen der Datenressourcen entfernt.

Zeigen Sie Eigenschaften und Ereignisse in der Controller-API an

Die öffentliche Controller-API definiert die Ausgabedaten, die ein Controller für eine Voreinstellung bereitstellt. Dies umfasst die Eigenschaftswerte und behandelten Ereignisse, die von einer Komponente verwendet werden, wenn eine Voreinstellung ausgewählt wird. Eigenschafts- und Ereignisinformationen können in UI Builder angezeigt werden.

Die Komponenteneigenschaftswerte in einer Voreinstellung können statische Werte oder Pfade zu Controller-Ausgabedaten sein. Sie können den Datenressourceninspektor in UI Builder verwenden, um die Werte aus der Controller-Datenstruktur anzuzeigen, die von einer Voreinstellung verwendet wird. Um die Nutzlast anzuzeigen, die von einem Ereignis in der Voreinstellung übertragen wird, können Sie in der Ereignishandler-Auswahl nach diesem Ereignis suchen.

Eigenschaften werden in der Controller-API angezeigt

Im UIB-Dateninspektor können Sie voreingestellte Eigenschaften anzeigen. Wenn Sie die verfügbaren Werte kennen, können Sie das Verhalten einer Komponente in Ihrem Design besser nachvollziehen und Eigenschaften in der Voreinstellung identifizieren, die Sie möglicherweise überschreiben möchten.

Dieses Verfahren setzt voraus, dass Sie eine Komponente mit einer Voreinstellung auf der Seite platziert und einen Controller konfiguriert haben. Anweisungen hierzu finden Sie unter Controller hinzufügen.

Auf der Konfigurationsregisterkarte werden voreingestellte Eigenschaftswerte als Pfad zur Controller-Ausgabe angezeigt. Der Basisdatenpfad wird als @data ausgedrückt.<controller_name> . Der Rest des Pfads wird aus dem Inhalt der Kategorien innerhalb der Controller-Datenhierarchie erstellt. Sie können diesen Pfad verwenden, um die aktuellen Werte für den Datensatz anzuzeigen, für den der Controller konfiguriert wurde.

1. Um die Datenressourcen für eine Komponente anzuzeigen, wählen Sie in der Sidebar unten links das Datensymbol.

   

   Der dreispaltige UIB-Dateninspektor wird angezeigt.

2. Wählen Sie in der ersten Spalte, in der die Datenressourcen aufgelistet sind, den Controller aus, dessen Ausgabe Sie anzeigen möchten.
   Die Konfigurationsdaten für den ausgewählten Controller werden auf der Registerkarte Konfig der zweiten Spalte angezeigt. Dies sind die Eingabeeigenschaften, die Sie eingegeben haben, als Sie den Controller für die erste Komponente mit einer Voreinstellung konfiguriert haben, die Sie auf der Seite platziert haben. Sie können diese Verbindungswerte hier bearbeiten, wenn Sie möchten.

   Hinweis:

   Wenn Sie -1 für den Wert im Feld Sys-ID konfigurieren, wird der Controller für einen neuen Datensatz konfiguriert. Der Controller generiert dann eine vollständige GUID, die Sie zum Speichern von Daten für den Datensatz verwenden können, bevor er gespeichert wird. Auf diese Weise können Sie Aktionen in einem neu erstellten Datensatz ausführen, z. B. das Speichern von Anhängen.
   
   
   
3. Wählen Sie in der dritten Spalte die Ausgaben der obersten Ebene aus.

   Dies ist die übergeordnete Ebene der Controller-Datenhierarchie, angegeben mit dem Präfix @data., gefolgt von der Controller-ID. Diese Kombination stellt den Stammpfad zu den Daten dar. Die Daten, die in den Ausgaben der obersten Ebene enthalten sind, werden im angrenzenden Codefeld angezeigt und können von Voreinstellungen und Skripts verwendet werden. Andere Eigenschaften auf dieser Ebene sind einige allgemeine Eigenschaften, die für alle Datensätze gelten.

   

   Wenn die Voreinstellung der Controller-Ausgabe eine Komponenteneigenschaft zuordnet, wird anstelle des Werts der Pfad zur Ausgabe angezeigt. Pfade werden als @data.<Controller-ID>.<Pfad von oberster Ebene zur Ausgabeeigenschaft> gekennzeichnet und können als Werte oder als Teil von Formelausdrücken verwendet werden.

   In diesem Beispiel ergibt die Zuordnung in der Voreinstellung einen Pfad zu @data.gform.table.

   
   
   
4. Um Daten unterhalb der obersten Ebene anzuzeigen, wählen Sie die untergeordnete Kategorie aus, die durch den Pfad im voreingestellten Eigenschaftswert angegeben wird.

   Der Name der untergeordneten Kategorie wird im Pfad als @data angezeigt.<controller ID> .<category> . Die Daten aus dieser Kategorie werden dann an diesen Pfad angehängt. Der Stammpfad über dem Codefeld gibt die verwendete untergeordnete Kategorie an. In diesem Beispiel wird der Pfad zur Eigenschaft Ansicht in der Formularkategorie als @data.gform.form.viewausgedrückt. Mit diesem voreingestellten Wert werden Formulare in der Arbeitsbereichsansicht angezeigt.

   
   
   

   In diesem Beispiel werden mehrere Controller-Ausgabeeigenschaften in einem Formelausdruck verwendet, um ein Objekt zu erstellen.

   
   
   
5. Um einen geskripteten Eigenschaftswert anzuzeigen, wählen Sie das Sperrsymbol neben der Eigenschaft.

   Dadurch wird die Eigenschaft in den Bearbeitungsmodus versetzt, und ein Dialogfeld zum Bearbeiten des Skripts wird geöffnet.

   

Ereignisse in der Controller-API [ APIanzeigen

Sie können behandelte Ereignisse, die einer Komponente durch eine Voreinstellung zugeordnet sind, und ihre Nutzlasten auf der Registerkarte Ereignisse im Konfigurationsbereich von UI Builder anzeigen. Wenn die Datenzuordnung für ein Ereignis für Ihren Anwendungsfall nicht geeignet ist, können Sie zusätzliche Daten-Handler hinzufügen.

Hinweis:

Mit der Voreinstellung bereitgestellte Daten-Handler-Zuordnungen können nicht bearbeitet werden.

1. Wählen Sie die Registerkarte Events in UI Builder.
2. Um die Zuordnung für ein voreingestelltes Ereignis anzuzeigen, wählen Sie die Ereigniskachel aus.

   Ein Modal mit den Nutzlasteigenschaften für das voreingestellte Ereignis wird angezeigt. Sie können das Ereignis in diesem Modal deaktivieren.

   
   
   
3. Um dem Ereignis einen Ereignishandler hinzuzufügen, wählen Sie unter der Ereigniskachel die Option + Ereignishandler hinzufügen aus.
   
   
   

   Ein Modal mit einer Liste verfügbarer, behandelter Ereignisse wird angezeigt. Sie können eine beliebige Aktion aus der Liste auswählen, einschließlich eines Ereignis-Handlers von einem der aufgeführten Controller.

4. Wählen Sie in der Liste einen Ereignis-Handler aus, und wählen Sie Hinzufügenaus.

   Der neue Handler wird unter der Ereigniskachel aufgeführt.