Sep 26, 2024
55 Views
Comments Off on Creating A Wizard with Salesforce Lightning Design System
0 0

Creating A Wizard with Salesforce Lightning Design System

Written by

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

Article Categories:
Fashion
Ramya Singh
https://thestarbiznews.com

Ramya Singh isn't your average tech blogger. Sure, she's got the brains to understand the latest algorithms and the jargon to explain them in plain English. But she's also got a twinkle in her eye and a way of weaving technology into the fabric of everyday life that makes it nothing short of fascinating. Whether she's reviewing the latest smartphone, exploring the potential of virtual reality, or delving into the ethical implications of artificial intelligence, Ramya does it with a contagious enthusiasm that makes you want to learn more, do more, and be a part of the exciting world of tech. So, if you're looking for a tech blog that's informative, inspiring, and just plain fun, follow Ramya Singh. She'll take you on a journey through the ever-evolving landscape of technology, and you might just find yourself a little bit more tech-savvy (and a lot more excited) along the way.