Creating a Multi-Step Wizard Using Custom Pages and PCF

Long forms overwhelm users. Breaking a complex task into clear, guided steps — a multi-step wizard — makes it feel simple: one question at a time, a progress bar, and validation before moving on. With Power Apps Custom Pages and a PCF control, you can build exactly that inside Dynamics 365.

This final article in our series on hosting PCF controls in modal popups shows how to create a multi-step wizard, in plain language.

What a Good Wizard Does

• Shows one step at a time so users aren’t overwhelmed.
• Displays a progress indicator (Step 2 of 4).
• Validates each step before allowing Next.
• Lets users go Back without losing data.
• Saves everything to Dataverse only at the final Submit.

Two Ways to Build It

• Power Fx approach: keep a gStep variable and show/hide screen sections based on its value. Great for simple wizards, fully low-code.
• PCF approach: build the whole wizard as one React PCF control that manages its own steps and state. Best for complex logic, custom UI, and reuse.

This guide focuses on the PCF approach, which gives you the most control.

Step 1 – Track the Current Step

The wizard keeps the active step and the collected data in React state, and renders the matching step:

const [step, setStep] = React.useState(1);
const [form, setForm] = React.useState({});

const next = () => { if (validate(step)) setStep(s => s + 1); };
const back = () => setStep(s => Math.max(1, s - 1));

return (
  <>
    <ProgressBar current={step} total={4} />
    {step === 1 && <StepOne form={form} onChange={setForm} />}
    {step === 2 && <StepTwo form={form} onChange={setForm} />}
    {/* ...steps 3 and 4... */}
  </>
);

Step 2 – Validate Before Moving On

Each step checks its own fields. If something’s missing or invalid, show a message and block Next — so bad data never reaches the end:

function validate(step) {
    if (step === 1 && !form.name)  { toast("Name is required"); return false; }
    if (step === 2 && !form.email) { toast("Email is required"); return false; }
    return true;
}

Step 3 – Submit at the End

Only on the final step do you write to Dataverse. Save everything in one place, then close the dialog and refresh the form (see Refresh Model-Driven Forms After Closing Custom Pages):

async function submit() {
    await context.webAPI.createRecord("lead", {
        subject: form.name, emailaddress1: form.email, /* ...rest... */
    });
    this._notifyOutputChanged();   // tell the page we're done
}

UX Tips for Wizards

• Keep each step short — a few related fields only.
• Always show where the user is and how many steps remain.
• Preserve data when going Back.
• Disable Next until the step is valid, and show a spinner on Submit.
• Confirm success clearly before closing.

Great Use Cases

• Lead or customer onboarding
• Guided quote or order creation
• Support case intake
• Multi-part approvals
• Data-quality “complete your profile” flows

Conclusion

A multi-step wizard turns an intimidating form into a friendly, guided experience. Built as a PCF control inside a Custom Page, it manages its own steps and validation, saves once at the end, and closes cleanly — a perfect capstone to everything in this series. Combine it with a reusable dialog framework, clean data passing, and responsive design, and you have modern, professional Dynamics 365 experiences.

Related: start with Open a PCF Control in a Modal Popup Using Custom Pages and Build a Reusable PCF Dialog Framework. Want a guided experience built for your CRM? Talk to the CloudVerve team.