Client-Statusparameter erstellen und an eine Komponente binden (erweiterte Funktion)

Erstellen und binden Sie einen Client-Statusparameterwert an eine Komponente in UI Builder. Durch Hinzufügen anwenderdefinierter Werte zu Ihren Komponenten können diese Komponenten dann automatisch über ein Skript aktualisiert werden.

Vorbereitungen

Erforderliche Rolle: ui_builder_admin

Warum und wann dieser Vorgang ausgeführt wird

Sie können einer Seite zwei Komponenten hinzufügen und sie dann mithilfe von Client-Statusparametern und -skriptsverbinden. Erstellen Sie zunächst einen Client-Statusparameter, und binden Sie ihn dann an eine der Komponenten, z. B. eine Bezeichnung. Als Nächstes erstellen Sie ein Client-Skript und binden es mithilfe eines Ereignishandlers an eine zweite Komponente, z. B. eine Schaltfläche. Wenn Sie den Ereignishandler erstellen, binden Sie den Wert des Client-Statusparameters an ihn, um die beiden Komponenten zu verbinden. Wenn Sie auf eine Komponente klicken, ändert sich der Status der anderen Komponente. Clientstatus sind nützlich, da Sie Ihren Komponenten anwenderdefinierte Werte hinzufügen können, die automatisch über ein Skript aktualisiert werden können. Stellen Sie sich einen Client-Status als einen Bucket zum Speichern von Informationen vor, die für die Seite spezifisch sind.

Sie können Ihrer Seite beispielsweise eine Schaltflächen- und eine Bezeichnungskomponente hinzufügen. Die Schaltfläche ändert den Wert der Bezeichnung, z. B. das Ändern der Textfarbe.

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 zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder.
3. Erstellen oder öffnen Sie eine Seite.
   Weitere Informationen finden Sie unter Verwalten Sie Seiten und Seitenvarianten UI Builder ..
4. Fügen Sie Ihrer Seite zwei Komponenten hinzu.
   Weitere Informationen finden Sie unter Komponenten hinzufügen und konfigurieren.
5. Um einen Client-Statusparameter mit einem zugeordneten Wert zu definieren, wählen Sie im unteren linken Bereich Client-Statusparameter aus.
   
6. Wählen Sie + Hinzufügen aus.
   
7. Geben Sie einen Namen für den Client-Status, den Typ und den Anfangswert ein.

   Der Clientstatus unterstützt Zeichenfolgen, Zahlen, boolesche Werte und JSON. Sie können beispielsweise den Namen dynamic_label_value, den Typ Zeichenfolgeund den Anfangswert Anfangswert eingeben.

   
8. Binden Sie den Wert des Client-Statusparameters an Ihre Komponente.
   1. Wählen Sie die Komponente aus, an die Sie den Client-Statusparameter binden möchten.
   2. Öffnen Sie den Konfigurationsbereich, und wählen Sie die Registerkarte Konfigurieren aus.
   3. Zeigen Sie auf das Feld, an das Sie Daten binden möchten, und wählen Sie das Symbol für die dynamische Datenbindung (Symbol für ).
      
      Das Fenster „Datenbindung“ wird angezeigt.

      

   4. Wählen Sie Clientstatus auf der Registerkarte Datentypen.
   5. Doppelklicken Sie auf das Client-Skript, das Sie an die Komponente binden möchten.
      
   6. Wählen Sie Übernehmen.
      
9. Wählen Sie Speichern.
10. Binden Sie den Client-Statuswert an eine Komponente, und erstellen Sie ein Skript, um die zweite Komponente mit der ersten zu verbinden.
    1. Wählen Sie im linken Bereich das Symbol + neben Client-Skriptsaus.
       
    2. Geben Sie einen Skriptnamen ein, der die Aufgabe beschreibt.
       Sie können beispielsweise Bezeichnungswert aktualisieren eingeben, weil das Skript genau das tun soll.
    3. Fügen Sie im Now Code-Editor Ihr Skript hinzu.

       Angenommen, Sie wählen eine aufzurufende API und die Parameter für die API, z. B. einen Status und einen Wert. Sie können beispielsweise api.setState aufrufenund dynamic_label_value als ersten Parameter und NEW VALUE als zweiten Parameter angeben.

       
11. Fügen Sie Ihrer zweiten Komponente einen Ereignishandler hinzu, um das neu erstellte Clientskript aufzurufen.
    1. Wählen Sie auf Ihrer Seite die Komponente aus, an die Sie das Skript binden möchten.
    2. Wählen Sie die Registerkarte Events aus.
    3. Wählen Sie + Neuen Ereignishandler hinzufügen aus.
    4. Wählen Sie im Abschnitt Skripts der Ereignishandler das von Ihnen erstellte Skript aus, und wählen Sie +, um es als Ereignishandler für die Komponente hinzuzufügen.
       
12. Wählen Sie Speichern.
13. Um eine Vorschau Ihrer Seite anzuzeigen und die Komponenten zu testen, um sicherzustellen, dass sie verbunden sind, wählen Sie Vorschauaus.
    Wenn Sie eine Komponente auswählen, sollte dies den Status der zweiten Komponente ändern. Wählen Sie beispielsweise die Komponente „Schaltfläche“ aus, um den Text der Wertkomponente „Bezeichnung“ von Anfänglicher Wert in NEUERWERTzu ändern.

Ergebnisse

Was Sie in diesem Verfahren getan haben:

• Zwei Komponenten wurden zu Ihrer Seite hinzugefügt.
• Es wurde ein Client-Statusparameter mit einem Anfangswert definiert.
• Client-Statusparameter an die erste Komponente gebunden.
• Es wurde ein Client-Skript erstellt, das einen Wert aktualisiert, der durch den Client-Statusparameter definiert wird.
• Es wurde ein Ereignishandler für die zweite Komponente erstellt, um das neue Clientskript aufzurufen, das Sie gerade erstellt haben
• Die zweite Komponente wurde ausgewählt, sodass der Status der ersten Komponente geändert wurde.