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.

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

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.

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.

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.

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.

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.

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.

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.

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

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.

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

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,

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

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.

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

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:

• How to add standard component in app page in salesforce lightning
• How to delete an App Page in Salesforce Lightning