Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

UI Builder Client script to set form Field value

SundaramR
Tera Guru

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.

 

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

1 ACCEPTED SOLUTION

  • 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

5 REPLIES 5

Sarthak Kashyap
Mega Sage

Hi @SundaramR ,

 

Please try with below code 

console.log("Client Script Works")
api.data.record.setValue({fieldName: 'short_description', value: 'short description'}); // Here record is your form data resource id

Also check where are you adding the client script on which event ? try to add some logs and check if your client script is running or not

 

Please mark my answer correct and helpful if this works for you

Thanks and Regards,

Sarthak

this script gives this error:

 

Client Script Works
VM1690:26 Error : TypeError: api.data.record.setValue is not a function

Deepak Shaerma
Kilo Sage
Kilo Sage

Hi @SundaramR 

The error occurs because api.data.record in UI Builder is a Data Resource that returns a JSON object (the record state). It is not a class instance with methods like .setValue()
To use the syntax you attempted (api.data....setValue), you must explicitly add the GlideForm Data Resource to your page. This resource acts as a wrapper effectively exposing g_form methods to UIB scripts.

On the left panel, go to Data Resources. click add and search for and select GlideForm (sometimes listed as "Glide Form" or under the "Global" application).

/**
* @Param {params} params
* @Param {api} params.api
*/
function evaluateEvent({api, event}) {
    // Replace 'glide_form_1' with the actual ID of the resource you just added
    api.data.glide_form_1.setValue({
        fieldName: 'short_description',
        value: 'Updated from UI Builder via API'
    });
}

 

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

for this code I am getting this error message.

 

TypeError: api.data.glide_form_1.setValue is not a function