Introduction

In real-world Salesforce applications, users often need to fill large forms containing many fields.
Displaying all fields on a single page can confuse users and increase errors.

A Multi-Step Wizard Visualforce Page solves this problem by breaking the process into steps such as:
● Step 1 – Basic Information
● Step 2 – Additional Details
● Step 3 – Review & Save

Each step guides the user clearly and controls navigation between steps.

What is a Multi-Step Wizard?

A Multi-Step Wizard is a Visualforce page that:
● Displays one section at a time
● Maintains data across steps
● Uses Apex controller logic for navigation
● Performs validations step-by-step

Key idea:
One page + one controller + multiple steps controlled by logic

Why Use a Multi-Step Wizard?

Main reasons to use wizard design:
● Better user experience
● Reduced data-entry errors
● Logical flow of information
● Easier validation handling
● Professional UI design

Project Requirement

In this project, we will create a 3-Step Wizard to create an Account record.

Wizard steps:
● Step 1 – Account Basic Details
● Step 2 – Business Information
● Step 3 – Review & Save

Step 1: Design Wizard Flow

Before coding, clearly plan:
● Number of steps
● Fields in each step
● Navigation rules

Example design:

● Step 1
○ Account Name
○ Phone

● Step 2
○ Industry
○ Annual Revenue

● Step 3
○ Review all values
○ Save record

Step 2: Create Apex Controller

The controller controls:
● Current step
● Data storage
● Navigation logic
● Final save

Key Controller Concepts

● Integer variable to track step
● Getter methods to show/hide sections
● Navigation methods (Next / Previous)
● Save logic

Sample Apex Controller

public with sharing class AccountWizardController {

    public Integer stepNumber { get; set; }
    public Account acc { get; set; }

    public AccountWizardController() {
        stepNumber = 1;
        acc = new Account();
    }

    // Step visibility methods
    public Boolean isStep1() {
        return stepNumber == 1;
    }

    public Boolean isStep2() {
        return stepNumber == 2;
    }

    public Boolean isStep3() {
        return stepNumber == 3;
    }

    // Navigation methods
    public void nextStep() {
        stepNumber++;
    }

    public void previousStep() {
        stepNumber--;
    }

    // Save record
    public PageReference saveAccount() {
        insert acc;
        return new PageReference('/' + acc.Id);
    }
}

Step 3: Create Visualforce Page

The Visualforce page uses conditional rendering to show steps.

Important Visualforce Concepts Used

● <apex:outputPanel rendered="">
● <apex:commandButton>
● <apex:form>
● Controller getter methods

Sample Visualforce PDF Page

<apex:page controller="AccountWizardController">
    <apex:form>

        <apex:pageBlock title="Account Creation Wizard">

            <!-- STEP 1 -->
            <apex:outputPanel rendered="{!isStep1}">
                <apex:pageBlockSection title="Step 1: Basic Details">
                    <apex:inputField value="{!acc.Name}" />
                    <apex:inputField value="{!acc.Phone}" />
                </apex:pageBlockSection>

                <apex:commandButton value="Next" action="{!nextStep}" />
            </apex:outputPanel>

            <!-- STEP 2 -->
            <apex:outputPanel rendered="{!isStep2}">
                <apex:pageBlockSection title="Step 2: Business Info">
                    <apex:inputField value="{!acc.Industry}" />
                    <apex:inputField value="{!acc.AnnualRevenue}" />
                </apex:pageBlockSection>

                <apex:commandButton value="Previous" action="{!previousStep}" />
                <apex:commandButton value="Next" action="{!nextStep}" />
            </apex:outputPanel>

            <!-- STEP 3 -->
            <apex:outputPanel rendered="{!isStep3}">
                <apex:pageBlockSection title="Step 3: Review">
                    <apex:outputText value="Name: {!acc.Name}" /><br/>
                    <apex:outputText value="Phone: {!acc.Phone}" /><br/>
                    <apex:outputText value="Industry: {!acc.Industry}" /><br/>
                    <apex:outputText value="Revenue: {!acc.AnnualRevenue}" />
                </apex:pageBlockSection>

                <apex:commandButton value="Previous" action="{!previousStep}" />
                <apex:commandButton value="Save" action="{!saveAccount}" />
            </apex:outputPanel>

        </apex:pageBlock>
    </apex:form>
</apex:page>

Step 4: Data Persistence Across Steps

Why data is not lost:
● Same controller instance
● Same Account object
● View state stores values

Important point:
Visualforce view state automatically retains object values between steps

Step 5: Adding Validation Logic

Validation can be done:
● In Apex before moving to next step
● Using required fields
● Using addError()

Example validation logic:

if(String.isBlank(acc.Name)) {
    acc.Name.addError('Account Name is required');
}

Step 6: Enhancing User Experience

Enhancements you can add:
● Step indicator (Step 1 of 3)
● Progress bar
● Error messages
● Confirmation message

Real-Time Use Cases

● Account onboarding process
● Lead qualification wizard
● Opportunity creation flow
● Custom approval data entry

Best Practices

● Keep steps small and logical
● Validate before moving forward
● Use meaningful step titles
● Avoid heavy view state
● Use with sharing

Common Mistakes

● Not handling previous button
● Large data in view state
● Missing validation
● Poor step naming

Advantages of Multi-Step Wizard

● Clean UI
● Better user focus
● Reduced form abandonment
● High data accuracy

Limitations

● View state size increases
● Not ideal for huge datasets
● Needs careful controller design

Conclusion

A Multi-Step Wizard Visualforce Page is an excellent solution for handling complex data-entry processes in Salesforce.
By combining conditional rendering, Apex navigation logic, and step-wise validation, developers can create professional, user-friendly workflows.

This pattern is reusable and scalable for many business processes.

VF Page Beginner to Advance

Multi-Step Wizard VF Page