Salesforce has come a very long way with regards to the design of page layouts and record page customization. However, every now and again, a client will ask us for a solution that seems simple to them, only to find out that there is some design limitation which can only be overcome through the use of a custom component or other custom development. One such example is this question that we received from a client (that I’m paraphrasing):
“Can Salesforce let us separate different sets of fields on the same record detail page by tabs or by sections?”
It seemed odd to me that this would not be a standard configuration option within Salesforce Lightning App Builder, and even more odd that when I Googled the question, I was only met with this Salesforce Success Community Article and others like it with comments from vendors pitching their costly solutions to this problem on the AppExchange. There was no way I was going to go back to my client and advise them to pay for an app to meet this small and simple requirement, so instead, we came up with a solution (that some may call a “hack”) that delivers this exact functionality. The best part about this solution is that any Salesforce admin can configure this with no code! Keep reading to find out how to do it.
A standard Lightning Contact record page looks like this:
First, we should determine what fields we wish to display and how we would like them to be displayed within the page layout. For this example, we will separate out the addresses and phone numbers of the Contact record page within their own sub-tab. All of the other fields will be displayed in the ‘Details’ tab.
Now that we have a plan of attack, let’s navigate to a Contact record and access the setup of that object by clicking on the gear icon and selecting “Edit Object”. To have the Address and Phone fields displayed separately, we need to create an Action with a page layout for each separate section. To do this, follow the steps below:
Step 1: Once the Contact object is displayed within the Object Manager in Setup, select the “Buttons, Links, and Actions” menu.
Step 2: Click on the “New Action” button located on the right-hand side of the screen. Once the “New Action” page is displayed complete the following steps:
- Action Type: Update a Record
- Label: Contact Addresses
- Name: Contact_Addresses
Step 3: Hit “Save” and continue
Step 4: Add or remove the fields you wish to be displayed. For this example, we are removing all default fields and just adding the “Mailing Address” and the “Other Address”. Below what your layout should look like.
Step 5: Create a new “Action” for the Phone fields. Click on “Buttons, Links, and Actions” within the Contact Object Manager menu. Click on the “New Action” button and complete the fields to show the following:
- Action Type: Update a Record
- Label: Contact Phones
- Name: Contact_Phones (This field will automatically populate based on information entered in the Label field.)
Step 6: Once the page editor is displayed, remove all the default fields and add the “Phone”, “Mobile”, “Home Phone”, and the “Other Phone”. Above is what your layout should look like.
Step 7: Click on the “Lightning Record Page” within the Contact object manager menu and then select the “Contact Record Page”.
Step 8: When the Contact_Record_Page “Lighting Page Details” page displays, click on the “Edit” button. This will display the Lightning App Builder Page. From here we will edit the lightning page layout to separate the fields into different tab sections of the Contact record page.
Find the “Tabs” Lighting Component on the left side of the screen. Drag and drop that component just below the “Details” and “Related” tabs. See image above.
Step 9: Add another tab and rename the tabs so your page looks like the above screenshot
Step 10: Drag and drop the Contact fields into the “Contact Info” section so your page looks like the above screenshot
Step 11: Click on the “Addresses” tab. Find the “Related Records” Lightning Component and drag and drop that within the Addresses tab. Adjust the menu on the right-hand side of the screen to the following:
- Lookup Field: Use This Contact
- Update Action: Contact Addresses
Step 12: Repeat these steps with the Phone tab. Find the “Related Records” Lightning Component and drag and drop that within the Phone tab. Hit Save and Activate!
Final Step: Update the Contact page layout and remove the Address and Phone fields from the main contact record page layout. Those fields are no longer needed since we have separated them out in the different sub-tabs.
That’s it! Navigate back to the contact record and your page should look exactly like this:
If this quick “Salesforce Hack” helps you, please let us know by reaching out to us on Twitter or LinkedIn!
