Build Custom Record Page for Mobile App in Salesforce Lightning

In this Salesforce tutorial, we will discuss the Salesforce mobile app and how to build custom record page for Mobile App in Salesforce Lightning.

Salesforce Mobile App

In Salesforce Lightning, we can create Record Pages for Desktop and Mobile Applications with the help of Lightning App Builder, without code and with just a few clicks.

However, unlike the Home page, custom record pages are not only supported in Lightning Experience on desktop but also in Salesforce Mobile Applications.

In Salesforce, Record pages are designed to be mobile-responsive, ensuring that users can access and interact with records on their mobile devices seamlessly, providing a better user experience.

While working for an organization that uses Salesforce as its CRM tool, I was asked to build a record page for the Mobile app view. The sales team uses the Salesforce Mobile App extensively to access customer information, update opportunities, and close deals.

To ensure that the sales team can efficiently perform operations from their mobile devices, a custom record page was created for the Salesforce Mobile App.

Create a Lightning Record Page for the Mobile app

To create a customized object record page for a mobile app. Here are the following steps:

1. Click on the Setup, search App Builder in the Quick Find Box, and select Lightning App Builder.

Record page for mobile app in Salesforce

2. In the Lightning App Builder Setup page click on the New button to create a new record page.

New Record page for a Salesforce Build Custom Record Page for Mobile App in Salesforce Lightning app

3. The pop-up window will appear and here we can see options to create a custom lightning page. Now from here select the option Record page and then click on the Next button.

Build a custom record page for salesforce mobile app

4. Here we will add a Label and Object for the record page. Here we fill the Label as Custom Opportunity page. In the Object field search and select the object type for the custom Record page.

In this case, I have selected Opportunity as an object for the record page. Click on the Next button.

Create a New Mobile Record Page in Salesforce

5. Now select the template format from the list of template formats on the left-hand side. For this record page, I have selected the template format Header and Left Sidebar. After selecting the template format for the record page, click on the Done button.

Template format for Salesforce mobile app record page

6. The Lightning app builder will open here we first set the page view to mobile view and for that click on the Desktop dropdown on the top of the screen, and from the options in the dropdown click on the Phone option.

Salesforce Lightning Mobile App Custom Record Page

7. Now we will standard components to the templates of the app page. On the left-hand side, we can a list of standard components under the heading Components and from here we will drag these components to the template region.

Since we are creating this record page to track opportunities so, to display opportunities, add the Highlights panel component to the top region as shown in the picture below.

Add Components to the Record page in Salesforce Mobile app

8. Now add the components Record detail – Mobile and Tabs to the template regions of the record app page.

Add components to salesforce Mobile app record page

9. In the Tabs component, we already have two tabs, Related and Details. Now to add more tabs, click on the Tabs component and on the right-hand sidebar, click on the button Add tab, and then click on the copy of details tab. Then, under the heading tab-label, select a tab.

In this case, I have selected the tab Chatter and after adding the tab click on the Done button.

Add tabs to the Salesforce Mobile record page

10. To add component visibility to the components, click on the Add Filter button under the heading Set Component Visibility. In the field Filter type select Record Field, and in the Field, select the fields from the list.

In this case, I have selected Opportunity Name as a Field, and the Operator should be Equal. Click on the Done button.

Component Visibility in Salesforce Mobile record page

11. We have created the Record page for the mobile app. Now click on the Save button to apply these changes.

Save Record mobile app page in Salesforce

Activation of Lightning Record Page in Salesforce App

1. In the Lightning app builder page click on the Activation button which is on the top of the screen near the Save button.

Activate Salesforce Record Page in Mobile app

2. The pop-up window will appear on the screen. in this window, we can see three tabs ORG DEFAULT, APP DEFAULT, and APP, RECORD TYPE, AND PROFILE. Here click on the tab APP, RECORD TYPE, AND PROFILE.

Salesforce Lightning Mobile app record page Activation

3. In the tab APP, RECORD TYPE, AND PROFILE click on the Assign to Apps, Profiles, and Record Types button.

Activation of Record Page in Salesforce Mobile app

4. Here, we select the application to which we have to assign this record page. I have selected the Mobile App for this Custom Record Page.

Activate Record Page in Salesforce Mobile app

5. In this window, Select Form Factor. We will select the form factor that we want to apply to the application. There are three options for the form factor: Desktop and Phone.

In this case, I have selected the form factor Desktop and Phone. After selecting the form factor, click on the Next button.

Assign a Record page in Salesforce Mobile App

6. Now select the Record Type Master by activating the checkbox Master under the heading Record type. After selecting Record Type, click on the Next button.

Salesforce Mobile app record page

7. In the window Selected Profiles, we have to select the profile to display the record app page.

To select the profiles go to the Profile column and activate the checkbox of the profile that you have to select and after selecting the profiles click on the Next button.

Select profile For Salesforce Record Page in Mobile App

8. The Review Assignments window will appear. In this window, we can review the app, record type, profile, and form factor that will display the “Custom Opportunity Page” record page. After reviewing the assignments, click on the Save button.

Salesforce Lightning Mobile app record page Review Activation

Conclusion

In this Salesforce tutorial, we have learned about building a custom record page for the mobile app in Salesforce. We first created a custom record page for a mobile app with the help of Lightning App Builder and later activated that record page in a Salesforce mobile app.

You may like to read:

Agentforce in Salesforce

DOWNLOAD FREE AGENTFORCE EBOOK

Start with AgentForce in Salesforce. Create your first agent and deploy to your Salesforce Org.

Salesforce flows complete guide

FREE SALESFORCE FLOW EBOOK

Learn how to work with flows in Salesforce with 5 different real time examples.