Using a Salesforce Data Import Wizard - All you Need to Know
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โฆ
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
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.