How to Build Custom Record Page for Mobile App in Salesforce Lightning

In this Salesforce tutorial, we will discuss building a custom record page for a Mobile App in Salesforce Lightning.

We are going to cover the following points in this tutorial.

  • Create a customized object record page for a Salesforce Mobile app.
  • Activate the custom record page for the users in the Salesforce App.

Record Pages for Salesforce Mobile App

In Salesforce lighting, we can a Record Page for the Desktop application and Mobile Applications with the help of Lightning App Builder, that too without code and just in 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, it was to create a custom record page for the Salesforce Mobile App. Now in the below steps, I will show how I handled this situation and came out of it.

Create a Lightning Record Page for the Mobile app

To create a customized object record page for a mobile app, first log in to your Salesforce developer account and follow the steps below.

Step-1: On the Setup page of Salesforce Lightning, go to the Quick Find box and search for App Builder and from the options in the dropdown select Lightning App Builder.

Record page for mobile app in Salesforce

Step-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 Mobile app

Step-3: As we click on the New button a 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

Step-4: In this step, we will add a Label and Object for the record page. In the Label tag enter the name of the custom record page and in this case, I’ve named it the 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. After adding Label and Object click on the Next button.

Create a New Mobile Record Page in Salesforce

Step-6: In this step, we will 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

Step-7: As we click on the Done button, 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

Step-8: 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

Step-9: 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

Step-10: 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 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

Step-11: 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 Operator should be Equal. Last click on the Done button.

Component Visibility in Salesforce Mobile record page

Step-12: 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

Till we have created a record page, we will move ahead toward the activation of this record page in a Salesforce Lightning app.

Step-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

Step-2: As we click on the Activation button a 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

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

Activation of Record Page in Salesforce Mobile app

Step-4: In this step, we select the application to which we have to assign this record page. I have selected the app Mobile App for this Custom Record Page.

Activate Record Page in Salesforce Mobile app

Step-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, 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

Step-6: In this step, 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

Step-7: In the window Selected Profiles we have to select the profile to display this 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

Step-8: As we click on the Next button, 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

As we click on the Save button, the record page “Custom Opportunity Page” will be activated in the selected mobile app.

Now we have successfully created and activated a custom record page in the Salesforce Lightning Mobile App.

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: