---
sourceDocument: Yokohama Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/yokohama/application-development

 Release :

    - yokohama

ft:locale :

    - en-US

ft:publication_title :

    - Yokohama Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Update a component's state using client state parameters

# Update a component's state using client state parameters {#ariaid-title1}

* Release version: Yokohama
* 
* Updated January 30, 2025
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 minutes to read

Create and bind a client state parameter value to a component in UI Builder. By adding custom values to your components, these components can then be automatically updated through a script.

## Before you begin

Role required: ui_builder_admin

## About this task

You can add two components to a page and then connect them by using [client state parameters](https://servicenow-prod.fluidtopics.net/zrx4f9YaC1RRjhOLAHK~EQ#gloss-client-state-parameter-ui-builder "Page variables that are defined for a page to store a piece of data (a client state) only for that page. For example, create three client state parameters to store the input needed to create a record and specify when to refresh the list. Page variables can be updated using client scripts and events to make a page dynamic.") and [scripts](https://servicenow-prod.fluidtopics.net/zrx4f9YaC1RRjhOLAHK~EQ#gloss-client-script-ui-builder "Client-side JavaScript that interact with components and client state parameters on a page. Client scripts are mapped to events as event handlers in UI Builder."). Start by creating a client state parameter and then binding the client state parameter to one of the components, such as a label. Next, you create a client script and bind it to a
second component, such as a button, using an event handler. When you create the event handler, bind the client state parameter value to it to connect the two components. If you click one component, it changes the state of the
other component. Client states are useful because you can add custom values to your components that can be automatically updated through a script. Think of a client state as a bucket for storing information that is specific to
the page.

For example, you can add a button and label component to your page. The button changes the value of the label, such as changing the text color.

## Procedure

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting CreateExperience.  
   See [Configure how users interact with your applications in UI Builder](https://servicenow-prod.fluidtopics.net/nDWg0NsWQpdF_OppvTVe5g "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. Create or open a page.  
   For more information, see [Manage UI Builder pages and page variants](https://servicenow-prod.fluidtopics.net/gTnZkApUadVKq3LWn7k3HA "Learn what a page is in UI Builder. Understand the building blocks of a UI Builder page, such as column layouts and components.").
4. Add two components to your page.  
   For more information, see [Add and configure components](https://servicenow-prod.fluidtopics.net/J6n1ilCnrc90JWEGwzeCiA#add-components "Learn how to add components to your page in UI Builder. A page is built by adding components.").
5. To define a client state parameter with an associated value, select Client state parameters in the lower-left panel.  
6. Select + Add.  
7. Enter a name for the client state name, type, and initial value.  
   The client state supports Strings, Numbers, Boolean, and JSON. For example, you could enter the name as <kbd class="ph userinput">dynamic_label_value</kbd>, the type as <kbd class="ph userinput">String</kbd>, and the initial value as
   <kbd class="ph userinput">Initial Value</kbd>.
8. Bind the value of the client state parameter to your component.
   1. Select the component that you want to bind the client state parameter to.
   2. Open the configuration panel and select the Configure tab.
   3. Point to the field that you want to bind data to and select the dynamic data binding icon (![Dynamic data binding icon.]()).  
      The data binding modal appears.

   4. Select Client states in the Data types tab.
   5. Double-click the client script that you want to bind to the component.  
   6. Select Apply.  
   {#state-parameters__substeps_dvq_rh2_cqb}
9. Select Save.
10. Bind the client state value to one component and create a script to connect the second component to the first.
    1. In the left pane, select the + icon next to Client scripts.  
    2. Enter a script name that describes the task.  
       For example, you could enter <kbd class="ph userinput">Update Label Value</kbd> because that is what you want the script to do.
    3. In the Now Code Editor, add your script.  
       Let's say that you choose an API to call, and the parameters for the API, such as a state and a value. For example, you could call the <kbd class="ph userinput">api.setState</kbd>, and include the<kbd class="ph userinput"> dynamic_label_value</kbd> as the first parameter, and a <kbd class="ph userinput">NEW VALUE</kbd> as the second parameter.
    {#state-parameters__substeps_w4m_nq3_d4b}
11. Add an event handler to your second component to call the new client script that you created.
    1. Select the component on your page that you want to bind the script to.
    2. Select the Events tab.
    3. Select + Add a new event handler.
    4. Under the Scripts section of event handlers, select the script that you created, and select + to add it as an event handler for the component.  
12. Select Save.
13. To preview your page and test the components to ensure they're connected, select Preview.  
    When you select one component, it should change the state of the second component. For example, select the Button component to change the Label value component text from Initial Value to NEW VALUE.

## Result

What you did in this procedure:

* Added two components to your page.
* Defined a client state parameter that had an initial value.
* Bound the client state parameter to the first component.
* Created a client script that updates a value that is defined by the client state parameter.
* Created an event handler for the second component to call the new client script that you just created
* Selected the second component so that it changed the state of the first component.
{#state-parameters__ul_njc_2q3_d4b}

*[\>]: and then