1. Go to Client state parameters (card icon on the left toolbar)
2. Click +Add
3. Set N*ame* to "date_format"
4. Set Initial value to "@data.getsystemproperty.output.value"
5. Select the Input field
6. On the config panel on the right, go to the Events tab
7. In the section "Input value set", Click on "+Add a new event handler"
8. Search for "update", then select Update client state parameter
9. For "Client State Parameter Name", select "date_format"
10. For "New Value", click on the "dynamic data binding" icon and type "@payload.value"
11. Click Add.
12. Click Save
13. Go to Page Scripts ( icon </> on the left toolbar)
14. Click +Add
15. Set Script name to a meaningful name. Ex: Update Property
16. For now, to show how the different pieces connect together quickly, we'll simply print a message, so add the following snippet n the code editor:
    function handler({api, event, helpers, imports}) {  console.log("Update Property Script"); console.log("date_format = " + api.state.date_format);
    }
17. Notice how the call to "api.state. gives access to our page variables
18. Select the "Save" button
19. Go to the config panel on the right
20. Click on the Events tab
21. Click on "+Add a new event handler"
22. in the new dialog, in the "</> Script" section, select "Update Property"
23. Click Add
24. Save your UIB Page
25. Click on the Open button to preview the page
    
26. In the preview page, update the field value (ex: dd-mm-yy)
27. then Click on the Save button
28. You will see the value printed in the console. All the required elements are connected. We now need to make the update permanent by
29. 1. adding an "update record" data resource
    
    1. and calling it with the new value stored in the page variable
30. Go to Data Resources ( icon database on the left toolbar)
31. Click +Add
32. Search for "Update record"
33. Select "Update record"
34. Click Add
35. Update the Page script with the following code:
    function handler({api,event, helpers, imports}) { let fields = "value=" + api.state.date_format; api.data.update_record_1.execute({ table: "sys_properties", recordId : api.data.getsystemproperty.output.sysId, templateFields: fields, useSetDisplayValue: false });
    }
36. Save the page
37. Click on the Open button to preview the page
38. In the preview page, update the field value (ex: yyyy-mm-dd)
39. Click on the Save button
40. Check your record, and voila it was updated.

Labels:

• Multiple Versions
• UI Builder : Next Experience