Build a Mobile App page in Salesforce

In this Salesforce tutorial, we will learn to build a Custom Mobile App page in Salesforce Lightning, and along with that, we will learn about the activation of the mobile app page in a Salesforce Lightning application in mobile view.

Mobile App Page in Salesforce

In Salesforce a Mobile App Page is a customized app page created with the help of Lightning App Builder. This Mobile App Page consists of various elements such as fields, filters, components, actions, and layouts. Mobile app pages improve user experience when they are using Salesforce on their Mobile devices.

Create Mobile App Page in Salesforce from the App Builder

To create a Mobile App Page in Salesforce Lightning, 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 app builder, then from the options in the dropdown, select the option Lightning App Builder.

Create a mobile app page in Salesforce

Step-2: In the Lightning App Builder, we can see a list of Lightning App Pages. Here, click on the New button.

Create a mobile app page in Salesforce

Step-3: As we click on the New button, a pop-up window will appear. In this window, select the option App Page to create a mobile app page and then click on the Next button.

Custom Mobile App Page in Salesforce Lightning

Step-4: In this step, we will enter the mobile app name in the Label tag. In this case, I have entered the label as New Mobile App Page, and after entering the Label, click on the Next button.

Create Custom Mobile app page in Salesforce

Step-5: In this window, we will select the template format for the mobile app page. In this case, I have selected the Header and Left Sidebar template format for the mobile app page.

Salesforce Custom Mobile App Page

Step-6: In this step, we will set the page view to the Phone view. On the top of the app page click on the dropdown on the Desktop button and in the dropdown select the option Phone.

Salesforce Lightning Mobile App Page

Step-7: In this step, we will add standard components to the template regions of the mobile app page. To add these standard components go to the right sidebar and from there drag and drop these standard components to the template region of the mobile app as shown in the picture below.

Add Custom Components to mobile app page in Salesforce

Step-8: On the left-hand sidebar, we can change the template format from the Change button and click on the Select button under the Actions heading to add action on the mobile app page.

Build Mobile App Page in Salesforce

Step-9: In the Actions tab, we can see two columns Available and Selected. No w, we will pick actions like Log a Call and Email and then press the right arrow to add these actions to the Selected column, and last click on OK to make changes.

Create a Mobile app page in Salesforce Lightning

Step-10: Till we have created the Mobile App Page, click on the Save button to start the activation process.

Salesforce Lightning Build Mobile App Page

Step-11: As we click on the Save button a pop-up window with the message Page Saved. From here we can activate this Mobile App Page to make it visible to all users. To activate the Mobile app page click on the Activate button.

Salesforce Activate Mobile App Page

Step-12: In the Activation window, we will first see the Page Settings tab. Here, we change the icon of the mobile app page by clicking on the Change near app icon. To activate this mobile app page for all Salesforce users, activate the radio button Activate for all users and then click on the Lightning Experience tab.

Salesforce Lightning Mobile App Page activation

Step-13: In the Lightning Experience tab, select the application to which you have to assign this mobile app page and after selecting the app click on the button Add page to the app. We can select multiple apps to assign this Salesforce Mobile App page. Now, click on the Mobile Navigation tab.

Salesforce Lightning Custom Mobile App Page

Step-14: In the Mobile Navigation tab we can set the position for the app page by dragging it up or down and after setting the position of the app page click on the Save button.

Mobile App Page In Salesforce Lightning

Now we have successfully created and activated a Lightning Mobile app page in Salesforce Lightning.

See also  How to Clone Opportunity in Salesforce

Read How to add a Dashboard to an app page in Salesforce

Create Mobile App Page in Salesforce from App Manager

To Create Mobile App Page in Salesforce from App Manager, go to the setup page of Salesforce Lightning and follow the steps below.

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

Lightning Mobile App page in Salesforce

Step-2: On the Lightning Experience App Manager, we will see a list of lightning apps and from here select an app in which you have to create a Lightning Mobile App page. In this case, I have selected a Lightning app mobile app.

On the right side of the app, click on the dropdown button, and from the options in the dropdown select Edit.

Create a Custom Mobile App Page in Salesforce

Step-3: In this step, click on the Pages tab on the top of the screen then from the options in the dropdown click on the + New Page.

Salesforce Mobile App Page in Lightning

Step-4: As we click on New Page, a pop-up window will appear. On this screen select the option App Page to create a new mobile app page and then click on the Next button.

Build a Custom Mobile App Page in Salesforce

Step-5: In this step, enter the name of the mobile app page in the Label tag. In this case, I have named it the Sales Mobile Page after entering the Label and clicking on the Next button.

Create a Lightning Mobile App Page in Salesforce

Step-6: After entering the label, select the template format for the mobile app page. In this case, I have selected the Header and Left Sidebar template format and after selecting the template format click on the Next button.

Salesforce Lightning New Mobile App Page

Step-7: Now we will add standard components to the mobile app page to populate the template regions. To add these standard components, pick the standard component from the left sidebar and drop it into the template region,

Add Standard Components to Mobile App Page in Salesforce

Step-8: After adding the standard components click on the Save button on the upper left side of the screen.

Created a New Mobile App page in Salesforce

Step-9: As we click on the Save button, a pop-up window will appear. If you have to activate this window then click on Activate button and if you want to just save this mobile app page then click on the Not Yet button.

Salesforce Lightning New Custom Mobile App Page

Now we have successfully built a Mobile App Page in Salesforce Lightning from Lightning App Manager.

See also  Public Calendar in Salesforce

Conclusion

In this Salesforce tutorial, we have learned about creating a Custom Mobile App Page in Salesforce Lighting. I explained to you the two possible ways to create a mobile app page, the first is with the help of Lightning App Builder and the second way is through Lightning App Manager. Along with this we also learned about the activation of the mobile app page in a lightning application.

You may like to read: