Salesforce BigObjects

        big.png

What is a BigObject?

Big Objects allow for storage of massive amounts of data on the Salesforce platform. The biggest draw for Big Objects is that they can provide consistent performance for objects with records upwards of a billion. Big Objects is a new type of objects that Salesforce provides. Maybe the most important thing I can tell is that they do not count against the storage limit. Big Objects let you store and manage large amounts of data.

High Points

  1. The API name ends with __b instead of __c or __x like custom and external objects.
  2. Big objects support only object and field permissions. This is an important one if there is sharing restrictions based on roles around the object data.
  3. You must use the Metadata API to define or add a field to a custom big object. You can’t do it through the UI. This one might not be as bad if admins aren’t required to modify Big Object definitions.
  4. You can create up to 100 big objects per org. The limits for big object fields are similar to the limits on custom objects, and depend on your org’s license type.
  5. Big objects don’t support transactions that include big objects, standard objects, and custom objects.
  6. We can create as many custom fields as we want but right now it only supports these field types: DateTime, Lookup, Number, Text and Long TextArea.

By looking at storage usage, it appears Salesforce does not calculate Big Object records’ size. Only the count. Data storage and File storage are calculated in size.

1.png

There are two types of Big Objects:

Standard big objects — defined and included in standard salesforce products to support data requirements for certain features. Example of a standard big object is FieldHistoryArchive which salesforce uses to track upto a year’s worth of Field History data as a part of the Field Audit Trailproduct. Useful for regulated industry data that is required to be archived.

Custom big objects — defined and deployed through the Metadata API. Metadata components required to define a custom object include:

An object file contains the object definition, fields and index. Similar to custom object files with minor differences specifically the index.
A permission set (optional) to defined the object and field level permissions for the object.
A package to deploy the metadata definitions and permission.

How to Create a BigObject?

You need to define them via Metadata API and then do a deployment via cmd or workbench.

Before start Creating High Points:

  1. Indexes are required and in order to include them, you need to be on API 39.0 onwards.
  2. Once you deploy one, you cannot make any modification like amend a field type, change label, etc. However in a declarative way you can do small changes like the label and API name.

<?xml version=”1.0″ encoding=”UTF-8″?>
<CustomObject xmlns=”http://soap.sforce.com/2006/04/metadata”&gt;
<deploymentStatus>Deployed</deploymentStatus>
<fields>
<label>Record ID</label>
<type>Text</type>
<unique>false</unique>
<fullName>Id__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Owner ID</label>
<type>Text</type>
<unique>false</unique>
<fullName>OwnerId__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Deleted</label>
<type>Text</type>
<unique>false</unique>
<fullName>IsDeleted__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Hire Form Id</label>
<type>Text</type>
<unique>false</unique>
<fullName>Name__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Created Date</label>
<type>Text</type>
<unique>false</unique>
<fullName>CreatedDate__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Created By ID</label>
<type>Text</type>
<unique>false</unique>
<fullName>CreatedById__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Last Modified Date</label>
<type>Text</type>
<unique>false</unique>
<fullName>LastModifiedDate__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Last Modified By ID</label>
<type>Text</type>
<unique>false</unique>
<fullName>LastModifiedById__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>System Modstamp</label>
<type>Text</type>
<unique>false</unique>
<fullName>SystemModstamp__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Last Viewed Date</label>
<type>Text</type>
<unique>false</unique>
<fullName>LastViewedDate__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Last Referenced Date</label>
<type>Text</type>
<unique>false</unique>
<fullName>LastReferencedDate__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>First Name</label>
<type>Text</type>
<unique>false</unique>
<fullName>NitinIndora__First_Name__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Last Name</label>
<type>Text</type>
<unique>false</unique>
<fullName>NitinIndora__Last_Name__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Email</label>
<type>Text</type>
<unique>false</unique>
<fullName>NitinIndora__Email__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Phone</label>
<type>Text</type>
<unique>false</unique>
<fullName>NitinIndora__Phone__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Status</label>
<type>Text</type>
<unique>false</unique>
<fullName>NitinIndora__Status__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Candidate</label>
<type>Text</type>
<unique>false</unique>
<fullName>NitinIndora__Candidate__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<fields>
<label>Description</label>
<type>Text</type>
<unique>false</unique>
<fullName>NitinIndora__Description__c</fullName>
<required>false</required>
<length>255</length>
</fields>
<label>NitinIndora__Hire_FormBig</label>
<pluralLabel>NitinIndora__Hire_FormBigs</pluralLabel>
</CustomObject>

Once you deploy it into your organization, you would find that object and there fields  under BigObject.

Coming soon links:-

How To Deploy Custom Big Objects workbench

Process billions of records with Async SOQL

Advertisements

Inserting Records in Account or (any other sObject) Through Postman in salesforce

We are using postman from API testing and request management to hit api by get or post and received data in the form of JSON and XML.

We can also add a record from postman to our Salesforce org.

We’re going to use OAuth2 and the authorization code flow.

Step 1: create your connected app

  • Inside Salesforce setup, navigate to Build > Create > Apps.
  • In the bottom panel of the page, where it says Connected Apps, click New. This will open a dialog to create a new connected app.
  • In Name, type “Postman”, and supply a mandatory contact email
  • Make sure Enable OAuth settings is ticked.
  • As an additional step, you need to ensure you add https://www.getpostman.com/oauth2/callback to the callback URL list (see below). This is the Postman endpoint that will receive the token.

postman1.png

postman2.png

Step2: OAuth with Postman

Postman has built-in OAuth-base authorization. In Postman, click on the Authorization tab and select “OAuth 2.0”.

postman3

Click on Get New Access Token to launch the OAuth dialog. Use the following values:

Token Name:  My Postman Token or (Any name)
Auth URL: https://login.salesforce.com/services/oauth2/authorize 
Access Token URL: https://login.salesforce.com/services/oauth2/token 
Client ID: (the consumer key from your connected app)
Client Secret: (the consumer secret from your connected app)
Scope: (you can leave this empty)
Grant Type: Authorization Code

postman6.png

Click on Request Token. This will take you to the Salesforce login screen, where you can type your credentials.

postman4

Click on Use Token and in the Add token to drop-down, select “Header”, so that the token will be added to the HTTP request headers. You’re now ready to call your web service.

Make the request

https://ap5.salesforce.com/services/data/v36.0/sobjects/Account/

Regarding inserting an Account in Salesforce, you have to POST a JSON request like this

{

“Name” : “From Postman in salesforce”

}

Click Send.

postman5.png

Get Status code 201 Created.

Get record Id.

And “Success”: true,

It will create a record in salesforce org.

account.png

WHICH SFDC API SHOULD I USE

Untitled

API Name What It’s For When to Use It Protocol Data Format Communication
REST API Accessing objects in your organization using REST. You want to leverage the REST architecture to integrate with your organization. No WSDL requirement.
Well-suited for browser-based applications, mobile apps, and highly-interactive social applications.
REST JSON, XML Synchronous
SOAP API Integrating your organization’s data with other applications using SOAP. You have pre-existing middleware services that need to work with WSDLs and XML data. SOAP/WSDL XML Synchronous
Chatter REST API Accessing Chatter feeds and social data such as users, groups, followers, and files using REST. You want to integrateChatter into a variety of applications, such as mobile apps, intranet sites, and third-party Web applications. REST JSON, XML Synchronous (photos are processed asynchronously)
Bulk API Loading or deleting large numbers of records. You have over a million records to process and speed is a requirement. REST CSV, XML Asynchronous
Metadata API Managing customizations in your organization and building tools that can manage the metadata model, not the data itself. You want to migrate changes, such as custom object definitions and page layouts, from asandbox to your production environment. SOAP/WSDL XML Asynchronous
Streaming API Providing a stream of data reflecting data changes in your organization. You need near real-time notifications of when records are created or updated. Bayeux JSON Asynchronous (stream of data)
Apex REST API Building your own REST API in Apex. ExposesApex classes as RESTful Web services. You need to build custom JSON responses or you want to expose custom functionality that you implemented in Apex. REST JSON, XML, Custom Synchronous
Apex SOAP API Creating custom SOAP Web services in Apex. Exposes Apex classes as SOAP Web services. You need to build custom XML responses or you want to expose custom functionality that you implemented in Apex . SOAP/WSDL XML Synchronous
Tooling API Building custom development tools forForce.com applications. You want to add functionality to your existing development and integration tools or you want to build specialized development tools for a specific application or service. Synchronous

Salesforce Coding Utility Chrome Extension

Salesforce Coding Utility Chrome Extension

0to1Code

SFCU

Hi Everyone,

In this post, I will introduce my new salesforce coding utility chrome extension. This is a very cool extension. I have made this for me and my friends. But after some time, we felt that we are addicted to this extension very much and it can be useful for another developer too. That’s why I published it and I hope you will like it.

About SFCU:
This extension provides you following features:
1. Code in maximized window:
We can code in Developer console and Setup tab(Like VisualForce Pages, Apex Classes, Apex Triggers, Visualforce Components). In Developer Console, we can code in maximized window but using the Setup tab we don’t have the option to maximize the window. In this case, it is difficult to code and see compile time errors on the page.
Using this extension you just need to check the Maximize checkbox, which will appear on…

View original post 195 more words

Creating a Wizard with Lightning Design System

Define three Visualforce pages in lightning design system for each of the three steps in the wizard, plus a single custom controller that sets up navigation between each of the pages and tracks the data that the user enters.

It’s important to understand the best procedure for creating the Visualforce pages in lightning design system, since the three pages and the custom controller reference each other. you can’t create the controller without the pages, but the pages have to exist in order for you to refer to them in the controller.

To create the wizard pages and controller:

  1. Navigate to the URL for the first page: /apex/Wizard1
  2. Click Create Page Wizard1.
  3. Repeat the two steps above for the other pages in the wizard:  Wizard2 and Wizard3.
  4. Create the CreatingWizard controller by adding it as an attribute to the <apex:page> tag on one of your pages (for example, <apex:pagecontroller=”CreatingWizard”>, and clicking Create Apex controller CreatingWizard. Paste in all of the following controller code:

public class CreatingWizard{

Account account;
Contact contact;
Opportunity opportunity;
OpportunityContactRole role;

public Account getAccount() {
if(account == null) account = new Account();
return account;
}

public Contact getContact() {
if(contact == null) contact = new Contact();
return contact;
}

public Opportunity getOpportunity() {
if(opportunity == null) opportunity = new Opportunity();
return opportunity;
}

public OpportunityContactRole getRole() {
if(role == null) role = new OpportunityContactRole();
return role;
}

public PageReference step1() {
return Page.Wizard1;

}

public PageReference step2() {
return Page.Wizard2;

}

public PageReference step3() {
return Page.Wizard3;
}
public PageReference save() {
account.phone = contact.phone;
insert account;
contact.accountId = account.id;
insert contact;
opportunity.accountId = account.id;
insert opportunity;
role.opportunityId = opportunity.id;
role.contactId = contact.id;
insert role;
PageReference opptyPage = new PageReference('/' +
opportunity.id);
opptyPage.setRedirect(true);

return opptyPage;
}

}

5. Save the controller.

6. Create Component “WizardHeader” for use header in all pages:

<apex:component >
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">  
<apex:stylesheet value="{!URLFOR($Resource.SLDS080, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />

<div class="slds-page-header" role="banner">
<div class="slds-grid">
<div class="slds-col slds-has-flexi-truncate">
  <div class="slds-media">
    <div class="slds-media__figure">
     <svg aria-hidden="true" class="slds-icon slds-icon--large slds-icon-standard-user">
        <use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/standard-sprite/svg/symbols.svg#opportunity')}"></use>
      </svg>
    </div>
    <div class="slds-media__body">
      <h1 class="slds-text-heading--medium slds-m-right--small slds-truncate slds-align-middle" title="Record Title">Creating Wizard</h1>
      
    </div>
</div>
</div>
</div>
<div class="slds-grid slds-page-header__detail-row ">
    <div class="slds-col--padded slds-size--1-of-4">
      <dl>
        <dt>
          <p class="slds-truncate" title="Field 1">Lightning Design System Wizard Powered by</p>
        </dt>
        <dd>
          <p class="slds-text-heading--small" title="Description that demonstrates truncation with a long text field"> Nitin Indora</p>
        </dd>
      </dl>
    </div>
    </div>
</div>
</html>
</apex:component>

7. Save the component.Navigate to the URL for the first page:/apex/Wizard1 and copy in the following:

<apex:page controller="CreatingWizard" showHeader="false" sidebar="false" standardStylesheets="false">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
<head>
  <title>Nitin Indora</title>
</head>
<div class="slds"> 
<c:WizardHeader />

<div data-reactid=".5.0.1" role="alert" class="slds-notify slds-notify--alert slds-theme--inverse-text slds-theme--alert-texture slds-m-top--large">
    <span class="slds-assistive-text">Success</span>
    <h2><svg class="slds-icon icon-text-email slds-icon--small slds-m-right--x-small" aria-hidden="true">
        <use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/utility-sprite/svg/symbols.svg#check')}"/></svg>
        <span>New Customer Opportunity Step 1 of 3</span>
    </h2>
</div>
    
<apex:form >
    <div class="slds-text-heading--medium">Account Information</div>
    <div class="slds-form--stacked">
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="accountName">Account Name</label>
        <div class="slds-form-element__control">
          <apex:inputField id="accountName" value="{!account.name}" styleclass="slds-input"/>
        </div>
      </div>
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="accountSite">Account Site</label>
        <div class="slds-form-element__control">
          <apex:inputField id="accountSite" value="{!account.site}" styleclass="slds-input"/>
        </div>
      </div>
    </div>

    <div class="slds-text-heading--medium slds-m-top--medium">Contact Information</div>    
     <div class="slds-form--stacked">
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="contactFirstName">First Name</label>
        <div class="slds-form-element__control">
          <apex:inputField id="contactFirstName" value="{!contact.firstName}" styleclass="slds-input"/>
        </div>
      </div>
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="contactLastName">Last Name</label>
        <div class="slds-form-element__control">
          <apex:inputField id="contactLastName" value="{!contact.lastName}" styleclass="slds-input"/>
        </div>
      </div>
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="contactPhone">Phone</label>
        <div class="slds-form-element__control">
          <apex:inputField id="contactPhone" value="{!contact.phone}" styleclass="slds-input"/>
        </div>
      </div>
    </div>
 
   <apex:commandButton action="{!step2}" value="Next" styleClass="slds-button slds-button--brand slds-m-top--medium"/>
</apex:form>
</div>
</html>
</apex:page>

8. Save the first page.Navigate to the URL for the first page:/apex/Wizard2 and copy in the following:

<apex:page controller="CreatingWizard" showHeader="false" sidebar="false" standardStylesheets="false">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
<head>
  <title>Nitin Indora</title>
  <apex:stylesheet value="{!URLFOR($Resource.SLDS080, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
</head>
<div class="slds">
    <c:WizardHeader />

    <div data-reactid=".5.0.1" role="alert" class="slds-notify slds-notify--alert slds-theme--inverse-text slds-theme--alert-texture slds-m-top--large">
        <span class="slds-assistive-text">Success</span>
        <h2><svg class="slds-icon icon-text-email slds-icon--small slds-m-right--x-small" aria-hidden="true">
            <use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/utility-sprite/svg/symbols.svg#check')}"/></svg>
            <span>New Customer Opportunity Step 2 of 3</span>
        </h2>
    </div>
 
 <apex:form >
 <div class="slds-text-heading--medium slds-m-top--medium">Opportunity Information</div>         
      <div class="slds-form--stacked">
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="opportunityName">Opportunity Name</label>
        <div class="slds-form-element__control">
          <apex:inputField id="opportunityName" value="{!opportunity.name}" styleclass="slds-input"/>
        </div>
      </div>
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="opportunityAmount">Amount</label>
        <div class="slds-form-element__control">
          <apex:inputField id="opportunityAmount" value="{!opportunity.amount}" styleclass="slds-input"/>
        </div>
      </div>
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="opportunityCloseDate">Close Date</label>
        <div class="slds-form-element__control">
          <apex:inputField id="opportunityCloseDate" value="{!opportunity.closeDate}" styleclass="slds-input"/>
        </div>
      </div>
      
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="opportunityStageName">Stage</label>
        <div class="slds-form-element__control">
          <apex:inputField id="opportunityStageName" value="{!opportunity.stageName}" styleclass="slds-input"/>
        </div>
      </div>
      
      <div class="slds-form-element">
        <label class="slds-form-element__label" for="contactRole">Role for Contact {!contact.firstName} {!contact.lastName}</label>
        <div class="slds-form-element__control">
          <apex:inputField id="contactRole" value="{!role.role}" styleclass="slds-input"/>
        </div>
      </div>
      
    </div>
      
    <apex:commandButton action="{!step1}" value="Previous" styleClass="slds-button slds-button--brand slds-m-top--medium"/>
    <apex:commandButton action="{!step3}" value="Next" styleClass="slds-button slds-button--brand slds-m-left--medium slds-m-top--medium"/>
  </apex:form>
  </div>
  </html>
</apex:page>
9. Save the second page.Navigate to the URL for the first page:/apex/Wizard3 and copy in the following:
<apex:page controller="CreatingWizard" showHeader="false" sidebar="false" standardStylesheets="false">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">    
<head>
  <title>Nitin Indora</title>
  <apex:stylesheet value="{!URLFOR($Resource.SLDS080, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
</head>
<div class="slds">
<c:WizardHeader />

<div data-reactid=".5.0.1" role="alert" class="slds-notify slds-notify--alert slds-theme--success slds-theme--alert-texture slds-m-top--large">
    <span class="slds-assistive-text">Success</span>
    <h2><svg class="slds-icon icon-text-email slds-icon--small slds-m-right--x-small" aria-hidden="true">
        <use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/utility-sprite/svg/symbols.svg#check')}"/></svg>
        <span>New Customer Opportunity Step 3 of 3</span>
    </h2>
</div>

<apex:form >
  <div class="slds-card slds-m-top--large">
  <div class="slds-card__header slds-grid">
    <div class="slds-media slds-media--center slds-has-flexi-truncate">
      <div class="slds-media__figure">
        <svg aria-hidden="true" class="slds-icon slds-icon-standard-contact slds-icon--small">
          <use xlink:href="{!URLFOR($Resource.SLDS080, '/assets/icons/standard-sprite/svg/symbols.svg#contact')}"></use>
        </svg>
      </div>
      <div class="slds-media__body">
        <h2 class="slds-text-heading--small slds-truncate">Confirmation</h2>
      </div>
    </div>
    <div class="slds-no-flex">
      
    </div>
  </div>
  <div class="slds-card__body">
    <ul>
      <li class="slds-tile slds-hint-parent">
        <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
          <p class="slds-tile__title slds-truncate"><a href="#">Account Information</a></p>
          
        </div>
        <div class="slds-tile__detail">
          <dl class="dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Account Name:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate"><apex:outputText value="{!account.name}"/></p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Account Site:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate"><apex:outputText value="{!account.site}"/></p>
            </dd>
          </dl>
        </div>
      </li>
      <li class="slds-tile slds-hint-parent">
        <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
          <p class="slds-tile__title slds-truncate"><a href="#">Contact Information</a></p>
        </div>
        <div class="slds-tile__detail">
          <dl class="dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">First Name:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate"><apex:outputText value="{!contact.firstName}"/></p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Last Name:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate"><apex:outputText value="{!contact.lastName}"/></p>
            </dd>
          
          <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Phone:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate"><apex:outputText value="{!contact.phone}"/></p>
            </dd>
          
          <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Role:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate"><apex:outputText value="{!role.role}"/></p>
            </dd>
          </dl>
        </div>
      </li>
      <li class="slds-tile slds-hint-parent">
        <div class="slds-grid slds-grid--align-spread slds-has-flexi-truncate">
          <p class="slds-tile__title slds-truncate"><a href="#">Opportunity Information</a></p>
        </div>
        <div class="slds-tile__detail">
          <dl class="dl--horizontal slds-text-body--small">
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Opportunity Name:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate"><apex:outputText value="{!opportunity.name}"/></p>
            </dd>
            <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Amount:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate"><apex:outputText value="{!opportunity.amount}"/></p>
            </dd>
         
          <dt class="slds-dl--horizontal__label">
              <p class="slds-truncate">Close Date:</p>
            </dt>
            <dd class="slds-dl--horizontal__detail slds-tile__meta">
              <p class="slds-truncate"><apex:outputText value="{!opportunity.closeDate}"/></p>
            </dd>
          </dl>
        </div>
      </li>
    </ul>
    
    <apex:commandButton action="{!step2}" value="Previous" styleClass="slds-button slds-button--brand slds-m-top--medium"/>
    <apex:commandButton action="{!save}" value="Save" styleClass="slds-button slds-button--brand  slds-m-left--medium slds-m-top--medium"/>
  </div>
  
</div>
 
    
</apex:form>
</div>
</html>
</apex:page>

Step 1 of the New Customer Opportunity Wizard

wizard1

Step 2 of the New Customer Opportunity Wizard

wizard2

Step 3 of the New Customer Opportunity Wizard

wizard3

How to use the Lightning Design System within a Visualforce page

There are  few things when working with the Design System in Visualforce:


<apex:stylesheet value="{!URLFOR($Resource.SLDS080, 'assets/styles/salesforce-design-system-vf.css')}" />

Create a first page


<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"> 

<head>
 <title>My First Lightning Design System</title>
 <apex:stylesheet value="{!URLFOR($Resource.SLDS080, 'assets/styles/salesforce-lightning-design-system-vf.css')}" />
</head> 

<body> 

 <!-- REQUIRED SLDS WRAPPER -->
 <div class="slds"> 

 <!-- MASTHEAD -->
 <p class="slds-text-heading--label slds-m-bottom--small">
 The Design System is ready to use in your Visualforce pages.
 </p>
 <!-- / MASTHEAD --> 

 <!-- PRIMARY CONTENT WRAPPER -->
 <div class="myapp"> 

 
 <section aria-labelledby="badges">
 <h2 id="badges" class="slds-text-heading--large slds-m-vertical--large">Visualforce pages</h2>
 <div>
 <button class="slds-button slds-button--neutral">Button neutral</button><a href="#" class="slds-button slds-button--neutral">Anchor Button Neutral</a>
 <button class="slds-button slds-button--neutral" disabled="">Disabled</button>
 <button class="slds-button slds-button--neutral slds-button--small">Button Small</button>
 </div>
 </section> 

 </div>
 <!-- / PRIMARY CONTENT WRAPPER --> 

 </div>
 <!-- / REQUIRED SLDS WRAPPER --> 

</body>
</html>
</apex:page>

Preview
Design_System