Salesforce LWC 3 Column Record Page
As a Salesforce developer, I once had a requirement to build a 3 column record detail layout like this:
What made the 3 column layout interesting was that it allowed you to click a Related List record in the center column and see its details in the right column.
Read on to learn about the background for this requirement and the solution I built with Lightning Web Components (LWC).
Problem
The company that had the 3 column layout requirement had a growing Salesforce org with about 20 custom objects at the time:
- Some were used during the sales process; for example, to capture market intelligence data on trends and competitors.
- Others were for capturing post-deal (Closed-Won/Closed-Lost Opportunity) data related to implementation, customer feedback, etc. as well as deal win/loss analysis.
An emerging role at the company was the deal analyst, which had these responsibilities:
- analyzing won and lost deals to identify trends;
- making recommendations to increase wins;
- collaborating with sales teams to understand deal dynamics and challenges.
The data the deal analysts needed was across many standard and custom objects, and therefore many pages. Custom reports helped to join together some of the data, but the team still had use cases to be in the application at the record-level and wanted access to more data with less clicks.
The company was using default layouts with little to no customization, so the Account object looked similar to the below. The analysts wanted to be able to browse Contacts, Opportunities, Cases, etc. related to the Account without having to open new screens. And they wanted this same functionality for all objects in the org. Therefore a metadata-driven solution seemed best.
Solution
I used the Lightning App Builder to create some custom record detail pages as a first step to solving the requirements, but it didn’t take care of this one: select a related list record and see the full record on the same page.
At the time, the lightning/uiRelatedListApi wire adapter had just been released. It lets you consume Related List metadata in LWCs.
I ended up building these LWCs for the solution:
- <c-all-related-lists>: shows a <c-related-list> component for each related list configured for the object in its default layout by using getRelatedListsInfo.
- <c-related-list>: uses getRelatedListInfo to get a single related list’s metadata and getRelatedListRecords to get its data. This component will publish a selected record to a message channel that the <c-selected-record> component subscribes to.
- <c-selected-record>: Used to show the details of a record selected in <c-related-list>.
I put together an example of these 3 LWCs in action in a Github repository here.
Here’s how I incorporated these LWCs onto Lightning Pages for all the objects in my project:
After you add the components to a Lightning Page and activate it, the page should look similar to this when viewing a record:
The Related Lists that show in the middle component depend on those that exist in the default layout for your object, you don’t need to code or configure which related lists to show there, decide how to order them, etc. This worked very well for my project, because an Admin controlled which related lists belonged on which objects, and I was able to take advantage of the Admin’s work by making the LWC metadata-driven.
Select any record in the middle section of related lists, and its full details should show on the right:
Conclusion
The 3 column layout saved the deal analysts time by allowing them to more conveniently see the data they needed with less clicks. The solution also saved me, the developer, time since it was metadata-driven; this meant I could reuse the LWCs across any Lightning Page to enable the 3 column layout with no additional coding necessary.
Next Steps
I hope this information was helpful. Possible next steps you could take with the code include adding more functionality to the related lists component such as a Create New button, add sorting and pagination (e.g., display only 5 related list records in the table at a time), or many other possibilities. What will you do next? Thanks for reading!
