Create a Visualforce Page for the Salesforce Mobile App Using SLDS

Let’s create a Visualforce page that displays your recently accessed accounts and is styled with the Lightning Design System (SLDS) and add it to the mobile navigation menu.

1. First, let’s create the Visualforce page.

2. Open the Developer Console and click File | New | Visualforce Page. Enter SLDSPage for the page name.

3. In the editor, replace any markup with the following.

   • The <apex:slds /> tag allows you to access SLDS stylesheets. This component is an easy alternative to uploading SLDS as a static resource and using it in your Visualforce pages.
   • The <div class="slds-scope"> wrapper is necessary around any SLDS-styled content. SLDS styles only apply to elements contained inside of it.

4. This page is also mobile-friendly. Let’s add the page to the Salesforce mobile menu.

5. Enable the page for mobile apps.

   1. From Setup, enter Visualforce Pages in the Quick Find box, then select Visualforce Pages.

   2. Click Edit next to the SLDSPage Visualforce page in the list.

   3. Select Available for Lightning Experience, Experience Builder sites, and the mobile app.

   4. Click Save.

6. Create a tab for the Visualforce page.

   1. From Setup, enter Tabs in the Quick Find box, then select Tabs.

   2. In the Visualforce Tabs section, click New.

   3. In the Visualforce Page drop-down list, select SLDSPage.

   4. In the Tab Label field, enter SLDS Page.

      Notice that the Tab Name field is filled in automatically

   5. Click in the Tab Style field and select the Diamond style.

      The icon for this style appears as the icon for the page in the Salesforce mobile navigation menu.

   6. Click Next, then Next, then Save.

7. Add the tab to the mobile navigation menu.

   1. From Setup, enter Mobile Apps in the Quick Find box, then select Salesforce Navigation.

   2. Select the SLDS Page tab and click Add.

      The SLDS item is added at the bottom of the Selected list.

   3. Click Save.