Multiple Column Record Detail Page in Lightning

As a Salesforce developer, you might have come across the requirement to place fields across multiple columns on the record detail page.

Traditionally, this can be done using a standard Page Layout. However, standard page layouts have their limitations, as they have options for 1-column and 2-column layouts only. What if you need to display the fields dynamically across multiple (more than two) columns?

Faced with a similar constraint, I created a custom reusable Lightning Component that can be dragged on the Lightning Record Page in Lightning App Builder and be used for any Salesforce Object. This allows the user to Display more than two columns (up to 12) on the Record Detail page.

To share the component with the community, I have uploaded the component and related classes on GitHub, which also links the ready-to-use package. GitHub repository link:
https://github.com/shruti1819/Multiple-column-Record-Detail-Page

Now, let me give you a quick walkthrough:

Refer to the code from GitHub or install the ready-to-use package for component availability. To use this Lightning component, you will need to create Field set for the Objects you wish to use the component. To create a fieldset, drag all the fields you want to display across multiple columns into the fieldset.

Once done, the component can be directly used on your record detail page. Just follow the basic steps mentioned below.

1. Go to Lightning App Builder, create a new Lightning Page of type Record Page, and click Next.

2. Enter the Label of your Page and select the necessary Object.

3. Choose the required Page Template.

4. Drag the component MultipleColumnRecordPagefrom the Lightning Component Pane on the left

• Enter the API name of the Field Set and select the Number of Columns in the Properties pane on the right side of the Lightning Page Canvas
• Click on the Save button on the top right and Activate the Page

There you go!!

Now, you are all set to test the functionality. Open any object record you have selected in step 2 and check if you can see the component you added.

Once done, as per your requirement, you can add more fields in the Fieldset and configure the number of columns accordingly. This custom Detail Page component also has an option to Edit the record (Edit button) and supports Inline Editing. It can be added to the standard Lightning Record Page as well.

For Business users, the functionality can be used in applications where UI is crowded with information. For example, in the case of Real Estate listings or travel sites, there is a requirement to display a lot of data across multiple columns/sections. This component can be handy in such cases.

If you are a Salesforce user, you can directly install the package, and no coding skills are required, making it easy to use and saving time.

I also would like to share that as per the Release Notes (Winter ’20), Lightning record pages are no longer limited to Lightning Experience on the desktop! With the new Salesforce mobile app, your users can have a truly seamless experience across desktop and Mobile. Unlike earlier, now all your Lightning record pages look the same in the mobile app as they look on Lightning Experience on desktop.

Hope this solution will help you as well! Do let us know in comments!