UI builder - How can i get these tabs configured in Ui builder

Kachu
Kilo Sage

Kachu_0-1766092107045.png


In Ui builder can we get the tabs configured as the image showed above ?
The requirement is to show all the child tasks as tabs for the individual to work simultaneously even related list to show as this instead of tabs inside of the record. How can i achieve that.

I appreciate your help. Thanks

1 ACCEPTED SOLUTION

DineshK24367716
Mega Guru

Hi @Kachu ,

To achieve this you need to do something from the UI Builder,

1.Open that page in UI Builder. If that page is read-only duplicate that page and inactivate the original page.

Screenshot 2025-12-31 at 7.23.34 PM.png

Here mention table Name as Your Table Name.

2.From UI Builder Page, you need to add a data resource to get all the child tasks of the currently opened record.

so, there is a data resource called Look up Multiple Records , add that and give table name as your current opened table name and give condition as parent is current opened form(how to get the sys_id of the current opened form is the whenever we are giving conditions there we will observe the dynamic bind symbol from the select props.sys_id.

Screenshot 2025-12-31 at 7.26.55 PM.png

3.Through that data broker script you will get all the child tasks, you will need to create one client script in ui builder, add the script like this..

 

/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    var results=api.data.look_up_multiple_records_1.results;
    results.forEach(function(result){
        result.id=result._row_data.uniqueValue;
        result.label=result._row_data.displayValue;
    });
    api.data.look_up_multiple_records_1.results=results;

}

 

4.There are events for the data resources , in those there is an event called Data fetch Succeeded call the above client client here (Here look up multitple records 1 data resource is the resource which we we can used to get the child records)

 

Screenshot 2025-12-31 at 7.33.37 PM.png

 

5.One more final Step, in ui builder page on the left side we will see what are the components used in that page,

on left side scroll down until you find like below: 

 

Screenshot 2025-12-31 at 7.36.47 PM.png

 

on the right side ,click on add then select the Use a repeater and then give name of the tab and bind data like this

 

Screenshot 2025-12-31 at 7.50.12 PM.png

 

6.In the left side ,scroll down until you find the tab u created , in those add form component

 

Screenshot 2025-12-31 at 7.53.53 PM.png

 

now on the right side bind the sys_id for the form component dynamically like below,

Screenshot 2025-12-31 at 7.53.20 PM.png

 

Now save the page and open the page in the workspace now you will all the child tasks as separate tabs.
If my answer give solution to your question, mark it as helpful.

View solution in original post

7 REPLIES 7

DineshK24367716
Mega Guru

Hi @Kachu ,

To achieve this you need to do something from the UI Builder,

1.Open that page in UI Builder. If that page is read-only duplicate that page and inactivate the original page.

Screenshot 2025-12-31 at 7.23.34 PM.png

Here mention table Name as Your Table Name.

2.From UI Builder Page, you need to add a data resource to get all the child tasks of the currently opened record.

so, there is a data resource called Look up Multiple Records , add that and give table name as your current opened table name and give condition as parent is current opened form(how to get the sys_id of the current opened form is the whenever we are giving conditions there we will observe the dynamic bind symbol from the select props.sys_id.

Screenshot 2025-12-31 at 7.26.55 PM.png

3.Through that data broker script you will get all the child tasks, you will need to create one client script in ui builder, add the script like this..

 

/**
* @param {params} params
* @param {api} params.api
* @param {any} params.event
* @param {any} params.imports
* @param {ApiHelpers} params.helpers
*/
function handler({api, event, helpers, imports}) {
    var results=api.data.look_up_multiple_records_1.results;
    results.forEach(function(result){
        result.id=result._row_data.uniqueValue;
        result.label=result._row_data.displayValue;
    });
    api.data.look_up_multiple_records_1.results=results;

}

 

4.There are events for the data resources , in those there is an event called Data fetch Succeeded call the above client client here (Here look up multitple records 1 data resource is the resource which we we can used to get the child records)

 

Screenshot 2025-12-31 at 7.33.37 PM.png

 

5.One more final Step, in ui builder page on the left side we will see what are the components used in that page,

on left side scroll down until you find like below: 

 

Screenshot 2025-12-31 at 7.36.47 PM.png

 

on the right side ,click on add then select the Use a repeater and then give name of the tab and bind data like this

 

Screenshot 2025-12-31 at 7.50.12 PM.png

 

6.In the left side ,scroll down until you find the tab u created , in those add form component

 

Screenshot 2025-12-31 at 7.53.53 PM.png

 

now on the right side bind the sys_id for the form component dynamically like below,

Screenshot 2025-12-31 at 7.53.20 PM.png

 

Now save the page and open the page in the workspace now you will all the child tasks as separate tabs.
If my answer give solution to your question, mark it as helpful.

HI @DineshK24367716 , I have another requirement which i have been trying for so long it working partially but not able to complete it.
requirement:

Need Field Decorator  on Location field which i have added  as image below

Kachu_0-1768514908273.png

Now i have a Side bar tab that renders map using Iframe + Portal URL.

Kachu_1-1768514965793.png

Now when user clicks on Field decorator on the location. The side bar should open. I have tried using button  but its not working as expected. it opens up the empty side bar tab.  when i used tab selection and setting selected tab which is id of the tab. Can you please help me resolving this as well ?






@DineshK24367716  Also when i bind data with form it does not load the form on the workspace. below is the mapping i did. I tried by directly mapping repeater value still does not work.

Kachu_2-1768517814281.png

Kachu_3-1768517849490.png