Creating a Wizard with Salesforce Lightning Design System

Creating A Wizard with Salesforce Lightning Design System

Nitin Sep 1, 2017
17,854  Views

Define three Visualforce pages in the 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 the Lightning Design System since the three pages and the custom controller reference to 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 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
Categories: Salesforce Implementation
Tagged: , , ,

Popular Salesforce Blogs

Report

Harassment or bullying behavior
Harassment or bullying behavior
Contains mature or sensitive content
Contains misleading or false information
Mobile App Reported Contents
Contains abusive or derogatory content
Contains spam, fake content or potential malware

Block Member?

Please confirm you want to block this member.

You will no longer be able to:

  • See blocked member's posts
  • Mention this member in posts
  • Invite this member to groups
  • Message this member
  • Add this member as a connection

Please note: This action will also remove this member from your connections and send a report to the site admin. Please allow a few minutes for this process to complete.

Report

You have already reported this .