Creating a Wizard with Salesforce Lightning Design System

Creating A Wizard with Salesforce 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 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:






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





Nitin Indora

Account Information

Contact Information




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





Nitin Indora

Opportunity Information





9. Save the second page.Navigate to the URL for the first page:/apex/Wizard3 and copy in the following:





Nitin Indora

Confirmation




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

Responses

Popular Salesforce Blogs