UI Builder Client script to set form Field value

SundaramR · 3 weeks ago

Hello,
I have a UI Builder page with a form component, and the form controller (id=record) is set to use the incident table. I want to update a form field’s value using a client script. I tried two methods based on the documentation, but neither worked. I’m looking for guidance on how to set a form field value using a client script.

document site.

document site

both of them throws method not found error.

   api.data.record.setFieldValue('short_description', 'Updated from UI Builder');

   api.data.gform.setValue({fieldName: 'short_description', value: 'short description'});

Below snippet works, but I am looking to set the value using api object.

/**
* @Param {params} params
* @Param {api} params.api
* @Param {any} params.event
*/
function evaluateEvent({api, event}) {
	return {
		fieldName: "short_description",
		value: "Deploy Scope",
		displayValue: ""
	};

Thanks

Deepak Shaerma · 3 weeks ago

Hi @SundaramR
You are getting api.data.glide_form_1.setValue is not a function because in UI Builder, Data Resources (like glide_form_1) are read-only state objects (JSON). They are not JavaScript class instances. They hold data (like the current values of fields), but they do not have methods like .setValue(), .save(), or .submit() attached to them that you can call directly in code.
In UI Builder, you cannot "imperatively" drive the form (e.g., form.setValue()) inside a script. You must use an Event-Driven approach.
The Solution: Use api.emit()
To update a field from a script using the api object, you must:
Define a Page Event.
Set that event to trigger the Glide Form > Set Value handler.
Emit that event from your script.
Here is the step-by-step implementation:
Step 1: Add the "Glide Form" Data Resource (If not done)
Make sure you have the Glide Form data resource added to your page.
Table: @context.props.table (or your specific table)
Sys ID: @context.props.sysId (or your specific ID)
Step 2: Create a "Handled Event"
We need a bridge between your script and the UI Builder event system.
In the Content Tree (left sidebar), click on Body (or your main page element).
In the Configuration panel (right sidebar), click the Events tab.
Click + Add event mapping.
Select Handled events (sometimes called "Page event") and click Add.
Name the event: UPDATE_FORM_FIELD.
Click Add.
Step 3: Configure the Event Handler
Now, tell UI Builder what to do when this event happens.
With the new UPDATE_FORM_FIELD event selected, look at the Event Handler section.
Search for and select Glide Form > Set value (Make sure you select the one nested under your Glide Form data resource).
Configure the inputs for this handler using the payload you will send from the script:
Field Name: @payload.fieldName
Value: @payload.value
Display Value: @payload.displayValue (optional)
Click Add.
Step 4: Update Your Script

/**

* @Param {params} params

* @Param {api} params.api

* @Param {any} params.event

*/

function evaluateEvent({api, event}) {

// Logic to determine your values

var newShortDesc = 'Updated via API Emit';

// Instead of calling setValue directly, we emit the event we created

api.emit('UPDATE_FORM_FIELD', {

fieldName: 'short_description',

value: newShortDesc,

displayValue: newShortDesc // Optional

});

}

Happy to help! If this resolved your issue, kindly mark it as the correct answer ✅ and Helpful and close the thread 🔒 so others can benefit too.

Warm Regards,

Deepak Sharma

Community Rising Star 2025

View solution in original post

Deepak Shaerma · 3 weeks ago

Hi @SundaramR
You are getting api.data.glide_form_1.setValue is not a function because in UI Builder, Data Resources (like glide_form_1) are read-only state objects (JSON). They are not JavaScript class instances. They hold data (like the current values of fields), but they do not have methods like .setValue(), .save(), or .submit() attached to them that you can call directly in code.
In UI Builder, you cannot "imperatively" drive the form (e.g., form.setValue()) inside a script. You must use an Event-Driven approach.
The Solution: Use api.emit()
To update a field from a script using the api object, you must:
Define a Page Event.
Set that event to trigger the Glide Form > Set Value handler.
Emit that event from your script.
Here is the step-by-step implementation:
Step 1: Add the "Glide Form" Data Resource (If not done)
Make sure you have the Glide Form data resource added to your page.
Table: @context.props.table (or your specific table)
Sys ID: @context.props.sysId (or your specific ID)
Step 2: Create a "Handled Event"
We need a bridge between your script and the UI Builder event system.
In the Content Tree (left sidebar), click on Body (or your main page element).
In the Configuration panel (right sidebar), click the Events tab.
Click + Add event mapping.
Select Handled events (sometimes called "Page event") and click Add.
Name the event: UPDATE_FORM_FIELD.
Click Add.
Step 3: Configure the Event Handler
Now, tell UI Builder what to do when this event happens.
With the new UPDATE_FORM_FIELD event selected, look at the Event Handler section.
Search for and select Glide Form > Set value (Make sure you select the one nested under your Glide Form data resource).
Configure the inputs for this handler using the payload you will send from the script:
Field Name: @payload.fieldName
Value: @payload.value
Display Value: @payload.displayValue (optional)
Click Add.
Step 4: Update Your Script

/**