How to implement a Field Decorator that opens a Modal to select and set a record value in UI Builder

[ayanshnamde]

I am working on a requirement in UI Builder and looking for the best way to implement a specific interaction.

Requirement:

1. I have a form with a field (Type: Number or String).

2. I need to add a Field Decorator (icon) next to this field.

3. When a user clicks this decorator, a Modal should open.

4. Inside that Modal, a List of Records should be displayed.

5. When a user clicks/selects a specific record from that list, the Modal should close, and that Record Number should automatically populate back into the original field on the form.

Questions:

• Is this achievable using standard UI Builder components and events?

• What is the best way to pass the selected value from the Modal back to the main form field?

• Could someone guide me on the high-level steps (Events, Client Scripts, or Data Resources) needed to link the Modal selection to the field value?

I would appreciate any examples or documentation links related to this logic.

Thanks in advance!

[Matthew_13 · Accepted solution]

Hi my Buddy,

Yes, this is doable in UI Builder with standard components. The easiest way is to place an icon/button next to the field UIB doesn’t always support classic field decorators the same way and use a modal + list/table + events.

Follow these steps:

1. Add an icon next to the field (Icon Button in the same container/row).

2. On click, open a modal (toggle a boolean state like isModalOpen = true).

3. Inside the modal, use a Data Resource to query the target table and show results in a Data Table/List.

4. On row select, dispatch an event (ex: RECORD_SELECTED) with the selected record’s number (and ideally sys_id too).

5. On the main page, add an event handler for RECORD_SELECTED to:

   • set the original field value (via state binding or the form component’s set value action)

   • close the modal

This pattern keeps the modal reusable and is usually cleaner than client scripting. You only need custom scripting if you truly require the decorator to be embedded inside the Record Form control itself.

Hope this helps my Friend 🙂

@ayanshnamde - Please mark as Solution Accepted and Thumbs Up if you found Helpful!!

[ayanshnamde]

Hi @Matthew_13 ,
That’s great. I tried following the same steps, but could you please provide a detailed step-by-step guide so that I can perform the task accurately?

Additionally, I have another question:
If I receive data from an integration and I do not want to store it in any table due to security constraints, is there a way to use that data directly as a data resource without persisting it in the database?

[ayanshnamde]

Hi @Matthew_13 
That’s great. I tried following the same steps, but could you please provide a detailed step-by-step guide so that I can perform the task accurately?

Additionally, I have another question:
If I receive data from an integration and I do not want to store it in any table due to security constraints, is there a way to use that data directly as a data resource without persisting it in the database?