Salesforce is an integrated technology platform that enables companies to automate business processes. It is used as a software application that delivers Structured Query Language…
How to create a Salesforce wizard using the Lightning Component? What is a Wizard? A wizard is a sequence of a tab with the next…
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…
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;
}
}
<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
Step 2 of the New Customer Opportunity Wizard
Step 3 of the New Customer Opportunity Wizard
There was a problem reporting this post.
Please confirm you want to block this member.
You will no longer be able to:
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.
