When your related list keep growing on any object page layout, It does not looks good as Users might need to scroll down more. Do you want to overcome with this situation? Do you want to provide good user experience as an admin?
The answer is yes, You can provide a good User Experience with collapsible Related List. The Lightning Experience comes up with many standard Component which you can use to customize your Lightning Page Layout. To make related list as Collapsible, We need two standard Component used together on the Layout. They are:-
- Accordion : Use the Accordion component to organize your components into collapsible sections. You can put multiple components in each section and customize the section name.
- Related List – Single : To include all related lists for a record, use the Related Lists component.
I am demonstrating the capability for Account Record page Layout in Lightning. You need to follow the below steps:-
- Navigate to an account record in lightning Experience
- Click on the setup icon available on the right top corner of your screen
- Select Edit Page Option. It will open the record page in Lightning App Builder
- Hover your mouse on Related List Component and click on delete to remove it from the page
- Drag the Accordion Component on the page where Related list was located. By default it has two sections. You can remove the section or change the label of it.
- To Change the label of section, Click on section name available in the right hand side and it will open a list of available name to use as label or you can use any custom name too.
- Make sure to add number section equals to your total number of related list on that Object. Once You have added the section, It’s time to use Related List – Single component inside the section which we have created on Accordion Component.You will have option to add component inside it as shown below:
- Once you drag a Related List – Single component inside the section, You will as shown below:
- You need to correct related list inside each section as per name. For example in image shown above, we need to select the Contact related list for Contact section but currently it is Activity History. So, click on Related list drop down in right side and select contact from there. Make sure you have selected Use This [Object Name] in Parent record option.
- You can also change the display behavior of related list by clicking on Change related List display option available on the right hand side by choosing either tile or List or leave it as default.
- Repeat the process for each section you have created in Accordion and make sure you have inserted the correct related list as per label of the section.
- Now, its time for saving the page and Activate it. Click on the Save button available on the right top corner of the page beside activation button. Once it is saved, Make sure to activate it as assign to org or profile or App.
- It will navigate you back to the record page and you will see your changes.
- To open any related list, you can just click on the arrow mark and it will close existing section and open the clicked one.
Considerations:-
- Only one related List can be open at once
- You can have up to 25 sections in Accordion Component, but Salesforce recommend no more than 10.
- Make sure that the page layout for your users includes the related list you want to use when using related list – single component. If using a parent record, update the parent record’s page layout.
- Related List – Single component is supported in API version 39.0 and later. You can use it in record pages only.
