---
sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - de-DE

ft:publication_title :

    - Yokohama Erstellen oder ändern Sie Anwendungen

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Creator


---

Clientskripts definieren und an Komponenten binden
==================================================

Clientskripts definieren und an Komponenten binden {#ariaid-title1}
===================================================================

* Freigeben Version: Yokohama
* 
* Aktualisiert 30. Januar 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 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](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-event-handler-ui-builder "Eine Aktion, die ausgeführt wird, wenn ein Ereignis auftritt.") hinzufügen, um den Client-Status zu aktualisieren, ein behandeltes Ereignis Ihrer Seite auszugeben oder einen [Datenressourcenvorgang](https://servicenow-prod.fluidtopics.net/mZ96gyZdCdeoW4mbvWWkzw#gloss-data-resource-ui-builder "Eine dynamische, wiederverwendbare Methode zum Definieren, welche Daten für die Komponenten einer Seite abgerufen werden sollen.") 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)](https://servicenow-prod.fluidtopics.net/DvLKAYv1ucDcvER_k~cN7w "Der Now Code-Editor ist eine Schnittstelle im Stil eines Rich-Text-Editors, die Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), JavaScript, Extensible Markup Language (XML) und JavaScript Object Notation (JSON) unterstützt. Verwenden Sie den Now-Code-Editor, um die UI-Konfiguration, die Konfiguration der Datenressourcen, Stile, Ereignisse sowie clientseitige und serverseitige Skripts in Next Experience UI Builder-Komponenten zu ändern.").

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.
{#define-client-scripts__ul_vyt_2xg_d4b}

Prozedur
--------

1. Navigieren zu AlleNow Experience-FrameworkUI Builder.
2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie auswählen ErstellenExperience.  
   Weitere Informationen finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält.").
3. Öffnen oder erstellen Sie eine Seite.  
   Weitere Informationen zum Erstellen einer Seite in UI Builderfinden Sie unter [Seite in UI Builder erstellen](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu 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](https://servicenow-prod.fluidtopics.net/u0roCpbWC9yIy7XURU_kKw#add-components "Erfahren Sie, wie Sie Ihrer Seite in UI BuilderKomponenten hinzufügen. Eine Seite wird durch das Hinzufügen von Komponenten erstellt.").
5. Wählen Sie + neben Client-Skripts.  
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.
8. **Wahlweise:** Fügen Sie eine Skripteinbindung oder Zugehörige Komponentenhinzu, 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 Ereignisseaus.
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.
11. Wählen Sie Speichern.
12. Um eine Vorschau Ihrer Skriptkomponente anzuzeigen, wählen Sie ![die Schaltfläche Vorschau, die die Seitenvariante öffnet.]().