Using client state parameters in UI Builder

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.

Avant de commencer

Role required: ui_builder_admin

Procédure

1. Navigate to All > Now Experience Framework > UI 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 for more information on creating experiences.
3. Create a page in UI Builder 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 sty.
   2. Select the Stylized text component.

      

   3. In the configuration panel, select None - Configure the component manually.

      

7. Add the second component by selecting + Add content in the content tree under Column 2.
   1. In Search, type button.
   2. Select Button Iconic.

      

   3. In the configuration panel, select None - Configure the component manually.
   4. In Icon, select Square Arrow Up Fill.

      

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 button 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.

      

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 count.
    2. Change the Type to Number.
    3. Set the Initial value by entering the number 0.
    4. Select the X to close the window.

       

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.

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 1.

        

    13. Select Apply.
    14. Select Add.
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 1.
    13. Select Apply.
    14. Select Add.
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.

    

Résultats

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.

For detailed, technical information about the stylized text component, see Stylized Text Overview.