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

Erstellen Sie einen Client-Statusparameterwert, und binden Sie ihn an eine Komponente in UI Builder. Durch Hinzufügen benutzerdefinierter Werte zu Ihren Komponenten können diese Komponenten 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 Skripts verbinden. Erstellen Sie zunächst einen Client-Statusparameter und binden Sie den Client-Statusparameter an eine der Komponenten, z. B. eine Bezeichnung. Als Nächstes erstellen Sie ein Client-Skript und binden es mit einem Event Handler an eine zweite Komponente, z. B. eine Schaltfläche. Wenn Sie den Event-Handler erstellen, binden Sie den Statusparameterwert des Clients an ihn, um die beiden Komponenten zu verbinden. Wenn Sie auf eine Komponente klicken, ändert sich der Status der anderen Komponente. Client-Status sind nützlich, da Sie Ihren Komponenten benutzerdefinierte Werte hinzufügen können, die automatisch über ein Skript aktualisiert werden können. Stellen Sie sich einen Clientstatus als Bucket zum Speichern von Informationen vor, die für die Seite spezifisch sind.

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

Prozedur

1. Navigieren zu Alle > Now-Experience-Framework > UI Builder.
2. Öffnen Sie eine Experience, um in zu arbeiten, oder erstellen Sie eine Experience, indem Sie + Erstellenwählen.
   Weitere Informationen zum Erstellen von Experiences finden Sie unter Konfigurieren Sie, wie Benutzer mit Ihren Anwendungen in interagieren UI Builder.
3. Erstellen oder öffnen Sie eine Seite.
   Weitere Informationen finden Sie unter Verwalten Sie UI Builder Seiten und Seitenvarianten.
4. Fügen Sie Ihrer Seite zwei Komponenten hinzu.
   Weitere Informationen finden Sie unter Fügen Sie Komponenten hinzu, und konfigurieren Sie sie.
5. Um einen Client-Statusparameter mit einem zugehörigen Wert zu definieren, wählen Sie im linken unteren Bereich Client-Statusparameter aus.
   
6. Wählen Sie .
   
7. Geben Sie einen Namen für den Clientstatus, den Typ und den Anfangswert ein.

   Der Client-Status unterstützt Zeichenfolgen, Zahlen, boolesche Werte und JSON. Sie können beispielsweise den Namen als „dynamic_label_value“, den Typ als „ Zeichenfolge“ und den Anfangswert als „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 dynamische Datenbindung (Symbol für ).
      
      Das Dialogfeld für die Datenbindung wird angezeigt.

      

   4. Wählen Sie Client-Status auf der Registerkarte Datentypen aus.
   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, , und wählen Sie Öffnen.
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 neben Clientskripts das Symbol +aus.
       
    2. Geben Sie einen Skriptnamen ein, der die Aufgabe beschreibt.
       Sie können beispielsweise Bezeichnungswert aktualisieren eingeben, da dies das Skript sein 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 aus, z. B. einen Status und einen Wert. Sie können beispielsweise api.setState aufrufenund „dynamic_label_value“ als ersten Parameter und einen NEUEN WERT als zweiten Parameter angeben.

       
11. Fügen Sie Ihrer zweiten Komponente einen Event Handler hinzu, um das von Ihnen erstellte neue Client-Skript aufzurufen.
    1. Wählen Sie die Komponente auf Ihrer Seite aus, an die Sie das Skript binden möchten.
    2. Wählen Sie die Registerkarte Events aus.
    3. Wählen Sie + Neuen Event-Handler hinzufügen aus.
    4. Wählen Sie im Abschnitt „Skripts“ der Event-Handler das von Ihnen erstellte Skript aus, und wählen Sie +, um es als Event-Handler für die Komponente hinzuzufügen.
       
12. Wählen Sie Speichern.
13. Um eine Vorschau der Seite anzuzeigen und die Komponenten zu testen, um sicherzustellen, dass sie verbunden sind, wählen Sie Vorschauaus.
    Wenn Sie eine Komponente auswählen, sollte sich der Status der zweiten Komponente ändern. Wählen Sie beispielsweise die Schaltflächenkomponente aus, um den Text der Bezeichnungswertkomponente von AnfangswertinNEUERWERTzu ändern.

Ergebnisse

Was Sie in diesem Verfahren getan haben:

• Ihrer Seite wurden zwei Komponenten hinzugefügt.
• Client-Statusparameter mit einem Anfangswert definiert
• Client-Statusparameter an die erste Komponente gebunden.
• Client-Skript erstellt, das einen Wert aktualisiert, der durch den Client-Statusparameter definiert ist.
• Event Handler für die zweite Komponente erstellt, um das neue Client-Skript aufzurufen, das Sie gerade erstellt haben
• Die zweite Komponente wurde so ausgewählt, dass sie den Status der ersten Komponente ändert.