how to fetch the existing incident record in UI builder input fields and update the existing record

Sangeetha8 · Friday

I had a requirement to fetch the existing incident record in UI builder input fields and update the existing record

How to make the submit button work to update the record.I created this UI builder from guidance for playbook

Anyone please help me on this

Anand2799 · Friday

Hi @Sangeetha8 ,

You can use the OOB form component to show/edit/update record details

ChallaR · Friday

1. Ensure the Form Component Is Bound to the Incident Record

In UI Builder, open your page variant.
Select the Form component.
Make sure it is bound to the Incident table and a specific record via sys_id.

2. Add a Button Component

In the Content Tree, navigate to where you want the button (e.g., Action Bar).
Click Add Component → Button.
Label it as Submit or Update.

3. Create a Client State Parameter (Optional)

If you want to store temporary values before updating:

Go to Client State Parameters.
Add a parameter like description or short_description.

4. Configure the Button’s Event Handler

Select the Button → go to Events tab.
Click Add Handler.
Choose [Record] Update Record as the handler.

Configure the Handler:

Table: incident
Record sys_id: Bind this to the form’s record sys_id (e.g., context.record.sys_id)
Fields to update: Bind each field (e.g., description, short_description) to either:
- Form input fields
- Client state parameters

You can use the Bind Data icon to link fields to form values or client states.

5. Save and Test

Click Preview → Open URL Path.
Select an existing incident record.
Modify the fields and click Submit.
Confirm the record is updated in the backend.

Please mark the answer as correct , if this is helpful .

Thanks,

Rithika.ch

Connectmustaq · Friday

Hi @Sangeetha8 ,

Create a data resource to fetch the incident, bind input fields to its values, and configure the Submit button to invoke an "Update Record" data resource targeting the same incident. Update logic is handled through event mapping on button click.

Step-by-Step Solution

1. Fetch the Incident Record

Add a data resource (such as "Record" or "Lookup Record") in UI Builder.
Target the Incident table and specify the sys_id (get this from page or context).
Bind your input fields (e.g., short description, state) to this record’s values so they pre-populate.

2. Prepare for Update

Add a data resource of type Update Record, name it for clarity (e.g., update_incident_record).
Set it to use the Incident table and the same sys_id. Do not set it to run immediately—set it to "Only when invoked".

3. Wire Your Submit Button

Select the Submit (or Save/Update) button component.
In the Events tab, add an event handler for the click event (usually “primary” if using the default button).
Choose “Invoke Data Resource” and select your Update Record resource.
Map the input fields to the fields to be updated in the Incident record (e.g., short description, state). You can do this visually or with scripting for more control.

Optional: Use Scripting (Advanced)

For more dynamic field updates, open your Update Record event handler to “Script” mode.

function handler({api, event, helpers, imports}) {
api.data.update_incident_record.execute({
table: "incident",
recordId: api.context.props.sysId,
templateFields: {
short_description: api.state.short_description,
state: api.state.state_value
},
useSetDisplayValue: false
});
}

//Where api.state.short_description and api.state.state_value are bound to your UI input fields

Best Practice:
Always test your configuration by querying an incident’s sys_id, modifying values in the UI, and submitting to verify the update occurs as expected. Use console debugging and UIB preview.

If custom logic is needed (validation, complex mapping), prefer scripting within the Submit button’s event handler.

if it is helpful, please hit the thumbs button and accept the correct solution by referring to this solution in the future it will be helpful to them.

Thanks & Regards,

Mohammed Mustaq Shaik