Visualforce Developer Guide

Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Overriding Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrating Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Salesforce Platform Development Process
Tell Me More: Where Visualforce Pages Can Appear in the Salesforce App
Guidelines and Best Practices
Sharing Visualforce Pages Between Mobile and Desktop
Excluding Visualforce Pages from Mobile or Desktop
Creating Visualforce Pages That Work in Mobile and Desktop
Choosing an Architecture for Visualforce Pages in the Salesforce App
Optimizing the Performance of Visualforce Pages in the Salesforce App
Visualforce Components and Features to Avoid in the Salesforce App
Known Visualforce Mobile Issues
Considerations and Limitations for Using Visualforce in the Salesforce App
Prepare a Support Request for Problems with Visualforce Pages in the Salesforce App
Choosing an Effective Page Layout
User Input and Interaction
Managing Navigation
Introduction to the Salesforce Lightning Design System
Applying SLDS to Visualforce Pages
Use SLDS Icons in Visualforce
Create a Visualforce Page for the Salesforce App Using SLDS
Responsive Page Design Using SLDS
Using Visualforce Pages as Custom Actions
Performance Tuning for Visualforce Pages
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Best Practices
Standard Component Reference
Appendices
Glossary
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Create a Visualforce Page for the Salesforce 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, Lightning Communities, and the mobile app.
    1. 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.
Visualforce latest accounts page styled with the Lightning Design System.