Create a New Visualforce Page
Create a Visualforce Page
What You’ll Do
- Create a simple Visualforce page to test that the Design System is working
Step 1: Create a Page
- In your org, navigate to Setup.
- In the left sidebar, in the Quick Find box type
pages
.
- In the sidebar, click Visualforce Pages and then New.
Complete the form as follows:
- For Label:
Trailhead_SLDS_Contacts
- For Name: (should default to
Trailhead_SLDS_Contacts
)
- Click Save
Step 2: Add the Initial Markup
After you've created the page, use your favorite authoring tool to include the following markup in the page:
Tip: You click Copy above any code snippet in Trailhead to easily copy and paste code.
<apex:page showHeader="false" standardStylesheets="false" sidebar="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<title>Salesforce Lightning Design System Trailhead Module</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Import the Design System style sheet -->
<apex:slds />
</head>
<apex:remoteObjects >
<apex:remoteObjectModel name="Contact" fields="Id,Name,Title,LastModifiedDate,PhotoUrl"/>
</apex:remoteObjects>
<body>
<!-- REQUIRED SLDS WRAPPER -->
<div class="slds-scope">
<!-- MASTHEAD -->
<p class="slds-text-heading_label slds-m-bottom_small"> Salesforce Lightning Design System Visualforce Workshop </p>
<!-- / MASTHEAD -->
<!-- PAGE HEADER -->
<!-- / PAGE HEADER -->
<!-- PRIMARY CONTENT WRAPPER -->
<div class="myapp slds-p-horizontal_medium">
<ul id="contact-list" class="slds-has-dividers_bottom-space"></ul>
</div>
<!-- / PRIMARY CONTENT WRAPPER -->
<!-- FOOTER -->
<!-- / FOOTER -->
</div>
<!-- / REQUIRED SLDS WRAPPER -->
<!-- JAVASCRIPT -->
<!-- / JAVASCRIPT -->
</body>
</html>
</apex:page>
Step 3: Preview
Save your page, and click the Preview button. You should see a simple header that says, “Salesforce Lightning Design System Visualforce Workshop”.
It might not look like much now, but this page serves as a great foundation for the rest of the project.
Over the course of the rest of the project, we will be extending this page markup step by step with additional Design System components. For reasons of brevity, we will not be explaining each Design System component class structure in depth. However, we will provide links to further documentation on the Design System website.