---
sourceDocument: Australia Build or modify applications
sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/pt-BR/application-development

 Release :

    - australia

ft:locale :

    - pt-BR

ft:publication_title :

    - Australia Build or modify applications

ft:clusterId :

    - cadev

bundleId :

    - cadev

workflow :

    - Development, Data, and Analytics


---

# Using client state parameters in UI Builder

# Using client state parameters in UI Builder {#ariaid-title1}

* Versão de lançamento: Australia
* 
* Atualizado 12 de mar. de 2026
* 
* ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 3 min. de leitura

Create a simple counter by adding the stylized text component and two buttons to an experience page. Use a client state parameter to implement the functionality so that when the buttons are selected the count increases or
decreases.

## Antes de Iniciar

Role required: ui_builder_admin

## Procedimento

1. Navigate to AllNow Experience FrameworkUI Builder.
2. Open an experience to work in or create an experience by selecting Create \> Experience.  
   See [Configure how users interact with your applications in UI Builder](https://servicenow-prod.fluidtopics.net/dUVGdKGQs6AbFNSw~vNKcQ "Learn what an experience is in UI Builder. Understand what an experience contains.") for more information on creating experiences.
3. [Create a page in UI Builder](https://servicenow-prod.fluidtopics.net/SclXrv5libg5iBN91G7scQ "Create a page in UI Builder for a portal, workspace, or custom application so that you can build a web experience for your users.") or open a page.
4. Add a column layout by selecting + Add content in the content tree under Body.
5. On the Layouts tab, select Two columns.
6. Add the first component by selecting + Add content in the content tree under Column 1.  
   1. In Search, type <kbd class="ph userinput">sty</kbd>.
   2. Select the Stylized text component.  
   3. In the configuration panel, select None - Configure the component manually.  
   {#create-simple-counter-component__substeps_ryf_bc3_x1c}
7. Add the second component by selecting + Add content in the content tree under Column 2.
   1. In Search, type <kbd class="ph userinput">button</kbd>.
   2. Select Button Iconic.  
   3. In the configuration panel, select None - Configure the component manually.
   4. In Icon, select Square Arrow Up Fill.  
   {#create-simple-counter-component__substeps_cxn_2c3_x1c}
8. Add the third component by pointing to Button iconic 1 in the content tree, selecting the Menu icon, and selecting Add after.  
   1. In Search, type <kbd class="ph userinput">button</kbd> as you did in the previous step.
   2. Select Button Iconic as you did in the previous step.
   3. In the configuration panel, select None - Configure the component manually as you did in the previous step.
   4. In Icon, select a different icon this time, the one named Square Arrow Down Fill.  
   {#create-simple-counter-component__substeps_ebk_jc3_x1c}
9. Select Save.  
   The stylized text component and the two button iconic components are saved and appear on the stage.

10. Add a client state parameter by going to Data and scripts, pointing to Client state parameters, and selecting the Add new (plus) icon.
    1. Change the Name by entering <kbd class="ph userinput">count</kbd>.
    2. Change the Type to Number.
    3. Set the Initial value by entering the number <kbd class="ph userinput">0</kbd>.
    4. Select the X to close the window.  
    {#create-simple-counter-component__substeps_o1t_qc3_x1c}
11. Bind the stylized text component to the client state parameter.
    1. Select the stylized text component on the stage.
    2. In the configuration panel, point to the Text field and select the Bind data or use scripts icon.  
    3. On the Data types tab, select Client states.
    4. Double-click on the count pill.
    5. Select Apply.  

       The Text field changes to count.
    {#create-simple-counter-component__substeps_akq_xc3_x1c}
12. Now configure the buttons to increase or decrease the number.
    1. Select the top button on the stage.
    2. In the configuration panel, select the Events tab.
    3. Select + Add event handler.
    4. Under Page-level event handlers, select Update client state parameter.
    5. In Client State Parameter Name, select count.
    6. Point to the New Value field and select the Bind data or use scripts icon.  
    7. On the Data types tab, select Client states.
    8. Double-click on the count pill.
    9. Select the Formulas tab.
    10. In the list, select Math.
    11. Double-click on the ADD pill.
    12. In the right pill at the top, remove the text and enter <kbd class="ph userinput">1</kbd>.  
    13. Select Apply.
    14. Select Add.
    {#create-simple-counter-component__substeps_apn_bd3_x1c}
13. Now configure the second button by following the same process that you used for the first button, but select the SUB pill instead of the ADD pill.
    1. Select the bottom button on the stage.
    2. In the configuration panel, select the Events tab.
    3. Select + Add event handler.
    4. Under Page-level event handlers, select Update client state parameter.
    5. In Client State Parameter Name, select count.
    6. Point to the New Value field and select the Bind data or use scripts icon.
    7. On the Data types tab, select Client states.
    8. Double-click on the count pill.
    9. Select the Formulas tab.
    10. In the list, select Math.
    11. Double-click on the SUB pill.
    12. In the right pill at the top, remove the text and type <kbd class="ph userinput">1</kbd>.
    13. Select Apply.
    14. Select Add.
    {#create-simple-counter-component__substeps_g1s_kd3_x1c}
14. Test the counter by selecting Preview.
15. Select the up arrow button to increase the count and the down arrow button to decrease the count.  
{#create-simple-counter-component__steps_dms_bg3_x1c}

## Resultado

You added a button component to increase the count by one and another button component to decrease the count by one. You added the stylized text component to show the count as it increased and decreased.

For detailed, technical information about the button component, see [Button Overview \& API](https://developer.servicenow.com/dev.do#!/reference/next-experience/washingtondc/now-components/now-button/overview).

For detailed, technical information about the stylized text component, see [Stylized Text Overview](https://developer.servicenow.com/dev.do#!/reference/next-experience/washingtondc/now-components/now-stylized-text/overview).