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
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.
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.
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)
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:
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
6.In the left side ,scroll down until you find the tab u created , in those add form component
now on the right side bind the sys_id for the form component dynamically like below,
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 @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.
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.
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)
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:
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
6.In the left side ,scroll down until you find the tab u created , in those add form component
now on the right side bind the sys_id for the form component dynamically like below,
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 @Dinesh Chilaka , 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
Now i have a Side bar tab that renders map using Iframe + Portal URL.
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 ?
@Kachu ,
Steps to achieve your requirement using declarative action is,
1. Refer this video how to link declarative action to open a pop-up from ui builder
in above video , it will cover how to open a pop-up from the UI Builder when the declarative action clicked.
2. Here Instead of opening Pop-up , create one client state parameter and update that using Update client State parameter as id=id of your tab and bind that client state parameter like below
here you don't need to use Tab Selected Event Handler.
If my response helped, mark my response as helpful and accept the solution.
