---
sourceDocument: Zurich Build or modify applications
sourceDocumentLink: https://www.servicenow.com/docs/r/zurich/application-development

 Release :

    - zurich

ft:locale :

    - en-US

ft:publication_title :

    - Zurich Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Define and bind client scripts to components

# Define and bind client scripts to components {#ariaid-title1}

* Release version: Zurich
* 
* Updated July 31, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 1 minute to read

Add and edit client scripts in UI Builder so that you can update
the client state through events. You can bind these scripts to any component by using an
event handler.

## Before you begin

Role required: ui_builder_admin

## About this task

You can create JavaScript client scripts in UI Builder by using the Now Code editor. Then, you can add the client script as an [event handler](https://www.servicenow.com/docs/2arqazAs26lelmRHkX_Vdw#gloss-event-handler-ui-builder "An action performed when an event occurs.") to update the client state, emit a handled event of your page, or execute a [data resource](https://www.servicenow.com/docs/2arqazAs26lelmRHkX_Vdw#gloss-data-resource-ui-builder "A dynamic, reusable way of defining what data to fetch for a page's components.") operation. For example, you could write a script to increment a date or counter, and bind the script to a component event, like a button click. For more information about the
Now Code Editor, see [Edit code with the Now Code Editor (advanced feature)](https://www.servicenow.com/docs/o6ktHTtxgqtU0q~R7JDRmw "Now Code Editor is a rich-text editor like interface that supports Cascading Style Sheets (CSS), Hypertext Markup Language (HTML), JavaScript, Extensible Markup Language (XML), and JavaScript Object Notation (JSON). Use Now Code Editor to modify UI configuration, data resource configuration, styles, events, client-side and server-side scripts in Next Experience UI Builder components.").

With these scripts, you can do the following actions:

* Get available data, manipulate the data, and store it in the client state.
* Access data resource results.
* Execute data resource operations.
* Dispatch events.
{#define-client-scripts__ul_vyt_2xg_d4b}

## Procedure

1. Navigate to AllNow experience frameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   For more information, see [Configure how users interact with your applications in UI Builder](https://www.servicenow.com/docs/iNIKh5D0WTwLggJ~MxG1qQ "Learn what an experience is in UI Builder. Understand what an experience contains.").
3. Open or create a page.  
   For more information about how to create a page in UI Builder, see [Create a page in UI Builder](https://www.servicenow.com/docs/L3uxkn_s6l5qDdkDxGac3g "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.").
4. **Optional:** If you do not have any components on your page, add a component to your page.  
   For example, you can add a Heading component. For more information, see [Add and configure components](https://www.servicenow.com/docs/2TGg~O~VTqAhbPfHyQKG7A#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").
5. Select + next to Client scripts.  
6. Name your script.  
   A descriptive name helps you know what the script does. It also makes it easier to find the script later when you add it to an event handler. The following example shows a simple date client script.
7. Write your script to perform an action.  
   For example, you could write a simple date script that you bind to a component.
8. **Optional:** Add a Script include or Associated components, which shows up in the `imports` parameter of your client script function.
9. Select the component on your page that you want to bind the script to and then select Events.
10. Select +Add a new event handler, select the script that you created under Scripts, and then select Add.  
    The following example shows a date client script.
11. Select Save.
12. To preview your scripted component, select ![Preview button that opens the page variant.]().

*[\>]: and then