Clientskripts definieren und an Komponenten binden

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 1 Minute Lesedauer
  • Fügen Sie Client-Skripts in UI Builder hinzu, und bearbeiten Sie sie, um den Client-Status über Events zu aktualisieren. Sie können diese Skripts mithilfe eines Ereignishandlers an jede Komponente binden.

    Vorbereitungen

    Erforderliche Rolle: ui_builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Mit dem Now-Code-Editor können Sie JavaScript-Client-Skripts in UI Builder erstellen. Anschließend können Sie das Client-Skript als Ereignis-Handler hinzufügen, um den Client-Status zu aktualisieren, ein behandeltes Ereignis Ihrer Seite auszugeben oder einen Datenressourcenvorgang auszuführen. Sie können beispielsweise ein Skript schreiben, um ein Datum oder einen Zähler zu erhöhen, und das Skript an ein Komponentenereignis binden, z. B. an das Klicken auf eine Schaltfläche. Weitere Informationen zum Now-Code-Editor finden Sie unter Code mit dem Now Code Editor bearbeiten (erweiterte Funktion).

    Mit diesen Skripts können Sie die folgenden Aktionen ausführen:

    • Rufen Sie verfügbare Daten ab, bearbeiten Sie die Daten, und speichern Sie sie im Client-Status.
    • Greifen Sie auf Datenressourcenergebnisse zu.
    • Führen Sie Datenressourcenvorgänge aus.
    • Senden Sie Ereignisse.

    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.
    3. Öffnen oder erstellen Sie eine Seite.
      Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter Seite in UI Builder erstellen.
    4. Wahlweise: Wenn Sie keine Komponenten auf Ihrer Seite haben, fügen Sie Ihrer Seite eine Komponente hinzu.
      Sie können beispielsweise eine Überschriftskomponente hinzufügen. Weitere Informationen finden Sie unter Komponenten hinzufügen und konfigurieren.
    5. Wählen Sie + neben Client-Skripts.
      Pfeil, der auf die Schaltfläche „Client-Skripts“ in der Seitenleiste zeigt.
    6. Benennen Sie Ihr Skript.

      Anhand eines beschreibenden Namens wissen Sie, was das Skript tut. Es erleichtert auch das spätere Auffinden des Skripts, wenn Sie es einem Ereignis-Handler hinzufügen. Das folgende Beispiel zeigt ein einfaches Datums-Client-Skript.

    7. Schreiben Sie Ihr Skript, um eine Aktion auszuführen.
      Sie können beispielsweise ein einfaches Datumsskript schreiben, das Sie an eine Komponente binden. Beispielskript eines Client-Skripts.
    8. Wahlweise: Fügen Sie eine Skripteinbindung oder Zugehörige Komponenten hinzu, die im Importparameter Ihrer Client- Skriptfunktion angezeigt wird.
    9. Wählen Sie auf Ihrer Seite die Komponente aus, an die Sie das Skript binden möchten, und wählen Sie dann Eventsaus.
    10. Wählen Sie +Neuen Ereignishandler hinzufügen, wählen Sie das Skript aus, das Sie unter Skriptserstellt haben, und wählen Sie dann Hinzufügenaus.

      Das folgende Beispiel zeigt ein Datums-Client-Skript.

      Skripts, die im Bildschirm „Ereignis-Handler hinzufügen“ aufgeführt sind.
    11. Wählen Sie Speichern.
    12. Um eine Vorschau Ihrer Skriptkomponente anzuzeigen, wählen Sie die Schaltfläche Vorschau, die die Seitenvariante öffnet..