Oh the poor, misunderstood accordion component.
Everyday, millions of users embrace his older brother Tabs, creating thousands of dynamic Lightning pages with him front & center. They click his nice index bars, love having everything separated and could not imagine having a page without Tabs on there at least once.
Since Spring ’18, the Accordion component has been sitting, waiting, and hoping for the day Salesforce Admins realize it has a place on their Lightning Pages. To help our Accordion friend celebrate his pending 1st Birthday, we are granting that wish here with 3 builds to help you embrace the accordion in your orgs and like me, find room in your adminheart for this powerful component.
To set the mood appropriately, here is some gratuitous accordion playing:
The Related List Stack
You have an object that has 10 related lists on it, users click on the related tab and page explodes as the 10 related lists packed full of records spill down the page. Now users are scrolling looking for records, are unable to see the other parts of the page, etc.
Your users say, is there anyway to hide all these related list until I want to see them? Luckily we have just the hero to save the day.
For this build we’ll use two components: single related lists & the accordion.
Add your accordion to the right side bar at the top of the page. Create a section for each Related List on your page and then add a Related List – Single component to each accordion section, selecting the appropriate related list. *Pro-tip: Single related lists can pull in lists from related objects!
Now as Tabs is spilling his related lists down the page and waiting for them to load, our main squeeze, Accordion (get it…), has things under control for our users.
Add your Accordion Component, add a section for each related list, and assign a default.
Assign the Related List – Single component to each section – select the appropriate related list.
Now check out the results – your Related Lists are neatly organized on the right side of the page instead of spilling way down the page layout.
Activity Timeline Accordion Edition
The Activity Timeline is the star of the standard component family but it also consumes a lot of space when it is placed on the page. Its very helpful, but sometimes users want to see a more compact view tasks, events, and emails and thanks to the Accordion component, we can give all of our users the experience they desire.
For this build we’ll use these components: Accordion, Activity Timeline, Tabs, and two single related lists.
Add your accordion to the page and create two sections: Activity Timeline & Activities.
Add your Activity Timeline to the bottom section and set this as the default open section. Next, we’ll add the tabs component in the first section, with one tab labeled ‘Upcoming Activities’ and the other ‘Past Activities.’ Add a single related list component to each tab and assign the ‘Open Activities’ related list and ‘Activity History’ list respectively.
Your users can now toggle between the Activity Timeline layout and the more compact related list view.
Add your Accordion, Assign Tabs to the first section with your two related list components, and then your Activity timeline component in the second section.
Now your users and choose the activity experience that works best for them in the moment.
The Record Detail Accordion
One of the first posts in the Lightning Layout Trick series was Record Detail Tabs. Using Quick Actions & related record components, we remove fields from the page layout to help clean up the page, avoid using multiple page layouts, record types, etc.
The Accordion offers all the same benefits but in a more space saving design. With Detail Tabs, I typically place a a tab component beneath the primary Details component or split out in the main tabs (which can get crowded). Using the accordion, you’ll see a much more compact view that is easy to switch between.
Add your Accordion and name your sections
Assign your Related Record components w/ the appropriate Quick Actions
Move over record detail tabs, there is a more compact component in town!
Can I do a mass delete in a related list in Lightning?
Not from a related list – if you use a tool like the Mass Editor chrome extension, you can mass delete from a list view. just be careful and backup (you can export to csv using Mass Editor) before you do.