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

ayanshnamde
Tera Contributor

3 weeks ago

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!

0 Helpfuls
  • 212 Views
2 REPLIES 2

Matthew_13
Mega Sage

3 weeks ago

Hi Buddy,

Yes, this is definitely achievable using standard UI Builder patterns, and it’s a fairly common interaction once you break it down.

The cleanest approach is to treat the modal and the form as loosely coupled, and use state + events to pass the selected value back.

Here’s how I’d approach it:

  • Place an icon/button next to the field (or use a trailing icon if the input component supports it). When the user clicks this icon, open a modal.

  • Inside the modal, use a Data Resource to fetch the records and display them in a table/list component.

  • When the user clicks or selects a row, dispatch an event from the modal with the selected record details (for example, record number and sys_id).

  • On the main page (where the form lives), add an event handler to catch that event, store the selected value in state, and then set the form field value from that state.

  • After updating the field, close the modal.

This avoids tight coupling, keeps the modal reusable, and works well with UI Builder’s event-driven model.

So quickly:

  • Yes, this is doable with standard UI Builder components

  • Events + state are the best way to pass the selected value back

  • No custom client scripts are strictly required unless you want a true “decorator” behavior on the Record Form field itself

Hope this helps point you in the right direction. 🙂

 

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

0 Helpfuls

ayanshnamde
Tera Contributor
In response to Matthew_13

3 weeks ago

Hi @Matt ,

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?

0 Helpfuls