How to update a record with the value from a field in UI Builder?

[Marc Mouries]

This is part 2 of How to read a record and set the value in an input field in UI Builder? 

Create a Page variable to store the field value

1. Go to Client state parameters (card icon on the left toolbar)
2. Click +Add
3. Set Name to "date_format"
4. Set Initial value to "@data.getsystemproperty.output.value"

Update the page variable when the value changes

1. Select the Input field
2. On the config panel on the right, go to the Events tab
3. In the section "Input value set", Click on "+Add a new event handler"
4. Search for "update", then select Update client state parameter
5. For "Client State Parameter Name", select "date_format"
6. For "New Value", click on the "dynamic data binding" icon and type "@payload.value"
7. Click Add.
8. Click Save

Create a script to update the value

1. Go to Page Scripts ( icon </> on the left toolbar)
2. Click +Add
3. Set Script name to a meaningful name. Ex: Update Property
4. 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);
   }

5. Notice how the call to "api.state.<name of variable> gives access to our page variables

Connect the Button to the Script

1. Select the "Save" button
2. Go to the config panel on the right
3. Click on the Events tab
4. Click on "+Add a new event handler"
5. in the new dialog, in the "</> Script" section, select "Update Property"
6. Click Add
7. Save your UIB Page

Test

1. Click on the Open button to preview the page
   
2. In the preview page, update the field value (ex: dd-mm-yy)
3. then Click on the Save button 
4. You will see the value printed in the console. All the required elements are connected. We now need to make the update permanent by
5. 1. adding an "update record" data resource
   2. and calling it with the new value stored in the page variable

Add an "Update record" data resource

1. Go to Data Resources ( icon database on the left toolbar)
2. Click +Add
3. Search for "Update record"
4. Select "Update record"
5. Click Add 

Call the "Update record" data resource

1. 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
     });
   }

2. Save the page 
3. Click on the Open button to preview the page
4. In the preview page, update the field value (ex: yyyy-mm-dd)
5. Click on the Save button
6. Check your record, and voila it was updated.

[Brad Tilton]

Just a quick note, you should be able to bypass the last page script and call the update record data resource directly from the button component. If you're just passing a single value to the record like in this example you don't need to use a page script to call the data resource as you can pass parameters to the data resource through the event handler. An example can be found in this exercise from my CreatorCon lab this year.

The page script can be really useful if you need to do some data manipulation before calling the data resource.

[Marc Mouries]

Thanks Brad. I forgot to mention that in this particular example, the sys_properties table is not accessible in the list of table when calling the update record data resource directly hence the use of a Page Script.

[Brad Tilton]

Ok that makes sense. There are definitely use cases where you have to use a page script, I just want everyone to try directly through the event handler first.

[Kate Flood]

Great article @Marc Mouries!

Some additional information I hope will be helpful: If you want to update multiple fields on the target table you need to use an encoded query. See my example here:

function handler({
    api,
    event,
    helpers,
    imports
}) {
    var local_ans = api.state.assmtQuestionList[0].questionList;
    var answerCount = local_ans.length;
    
    for (let i = 0; i < answerCount; i++) {

        var response = local_ans[i].response;
        var value = local_ans[i].value;
        var sysId = local_ans[i].sys_id;

        let fields = "response=" + response +"^value="+ value;

        api.data.update_record.execute({
            table: "x_snc_award_mgmt_deliverable_rubric_responses",
            recordId: sysId,
            templateFields: fields,
            useSetDisplayValue: false
        });
    }
}

This specific line shows how to specify multiple fields using "^" as the separator:

let fields = "response=" + response +"^value="+ value;