Wizard - Fod.DemoPage

Supported Layouts

The wizard component supports two layout orientations to fit different page designs.

Horizontal (Default)

Steps arranged in a row. Best for wide containers and standard form wizards.

Project Information

Enter the basic details about your project.

Project Name

This name will be used throughout the wizard

Project Description

Vertical

Steps stacked vertically. Best for narrow sidebars or when step titles are long.

Project Information

Enter the basic details about your project.

Project Name

This name will be used throughout the wizard

Project Description

razor

@* Horizontal (default) *@
<FodWizardComponent Steps="@_steps"
                    ServiceRequestContext="@_context"/>

@* Vertical *@
<FodWizardComponent Steps="@_steps"
                    ServiceRequestContext="@_context"
                    Orientation="WizardOrientation.Vertical"/>

Step States

Visual reference for all wizard step states. Use these CSS classes to understand and test each state in isolation.

1

current --current

completed --completed

3

incomplete --incomplete

blocked --blocked

5

available --completed + clickable

html

<!-- Current: active step with blue border -->
<div class="fod-progress-step fod-progress-step--current">
    <div class="fod-progress-step__circle">1</div>
    <span class="fod-progress-step__label">Step</span>
</div>

<!-- Completed: filled blue circle with checkmark -->
<div class="fod-progress-step fod-progress-step--completed">
    <div class="fod-progress-step__circle">✓</div>
    <span class="fod-progress-step__label">Step</span>
</div>

<!-- Incomplete: grey border, muted text -->
<div class="fod-progress-step fod-progress-step--incomplete">
    <div class="fod-progress-step__circle">3</div>
    <span class="fod-progress-step__label">Step</span>
</div>

<!-- Blocked: red border, danger color -->
<div class="fod-progress-step fod-progress-step--blocked">
    <div class="fod-progress-step__circle">!</div>
    <span class="fod-progress-step__label">Step</span>
</div>

<!-- Available: completed step reachable via direct navigation -->
<div class="fod-progress-step fod-progress-step--completed fod-progress-cell--clickable">
    <div class="fod-progress-step__circle">✓</div>
    <span class="fod-progress-step__label">Step</span>
</div>

Basic Linear Wizard

A standard 3-step wizard with sequential navigation. Validation runs before proceeding to the next step, and auto-save is enabled by default.

Project Information

Enter the basic details about your project.

Project Name

This name will be used throughout the wizard

Project Description

razor

<FodWizardComponent Steps="@_steps"
                ServiceRequestContext="@_context"
                ValidateBeforeNext="true"
                AutoSaveEnabled="true"
                OnStepChanged="HandleStepChanged"
                OnComplete="HandleWizardComplete"/>

@code {
    private List<WizardStep> _steps =
    [
        new WizardStep
        {
            StepId = "step-one",
            Title = "Project Info",
            ComponentType = typeof(DemoStepOne),
            Order = 1
        },
        new WizardStep
        {
            StepId = "step-two",
            Title = "Features",
            ComponentType = typeof(DemoStepTwo),
            Order = 2
        },
        new WizardStep
        {
            StepId = "step-three",
            Title = "Confirmation",
            ComponentType = typeof(DemoStepThree),
            Order = 3
        }
    ];
}

Direct Navigation

When AllowDirectNavigation is enabled, users can click on completed steps to jump back to them directly. This is useful for review workflows.

Project Information

Enter the basic details about your project.

Project Name

This name will be used throughout the wizard

Project Description

razor

<FodWizardComponent Steps="@_steps"
                ServiceRequestContext="@_context"
                AllowDirectNavigation="true"/>

@* With AllowDirectNavigation="true", users can click
   on completed steps to jump back to them directly *@

Vertical Orientation

The wizard can be displayed vertically, which is useful for narrower layouts or when steps have longer titles.

Project Information

Enter the basic details about your project.

Project Name

This name will be used throughout the wizard

Project Description

razor

<FodWizardComponent Steps="@_steps"
                ServiceRequestContext="@_context"
                Orientation="WizardOrientation.Vertical"/>

Conditional Steps

Steps can be shown or hidden based on runtime conditions. Toggle the switch below to see the conditional step appear or disappear.

Show Conditional Step:

Project Information

Enter the basic details about your project.

Project Name

This name will be used throughout the wizard

Project Description

razor

private List<WizardStep> CreateConditionalSteps() =>
[
    new WizardStep
    {
        StepId = "step-one",
        Title = "Project Info",
        ComponentType = typeof(DemoStepOne),
        Order = 1
    },
    new WizardStep
    {
        StepId = "step-conditional",
        Title = "Conditional",
        ComponentType = typeof(DemoStepConditional),
        Order = 2,
        IsConditional = true,
        ShowCondition = ctx => _showConditionalStep
    },
    new WizardStep
    {
        StepId = "step-three",
        Title = "Confirmation",
        ComponentType = typeof(DemoStepThree),
        Order = 3
    }
];

Save & Restore Draft

The wizard supports saving its current state as a draft and restoring it later. This enables users to continue incomplete workflows.

Project Information

Enter the basic details about your project.

Project Name

This name will be used throughout the wizard

Project Description

razor

<FodWizardComponent @ref="_wizard"
                Steps="@_steps"
                ServiceRequestContext="@_context"
                WizardId="my-wizard-id"
                OnSaveDraft="HandleDraftSaved"/>

@code {
    private FodWizardComponent? _wizard;
    private WizardStateDto? _savedDraft;

    // WizardId enables automatic persistence to browser storage.
    // Drafts are auto-restored on page load when WizardId is set.

    private async Task SaveDraft()
    {
        await _wizard!.SaveDraftAsync();
    }

    private void HandleDraftSaved(WizardStateDto draft)
    {
        _savedDraft = draft;
    }

    private void RestoreDraft()
    {
        _wizard!.RestoreFromState(_savedDraft!);
    }

    private void Reset()
    {
        _wizard!.Reset();  // Clears form but keeps draft for restore
    }

    private async Task ClearDraft()
    {
        await _wizard!.ResetAsync();  // Clears form AND persisted draft
    }
}

Event Handling

The wizard emits events for step changes, validation failures, and completion. Use these to integrate with your application logic.

Event Log

No events yet. Interact with the wizard above.

csharp

<FodWizardComponent Steps="@_steps"
                ServiceRequestContext="@_context"
                OnStepChanged="HandleStepChanged"
                OnValidationFailed="HandleValidationFailed"
                OnComplete="HandleWizardComplete"
                OnSaveDraft="HandleDraftSaved"/>

@code {
    private void HandleStepChanged(WizardStepChangedEventArgs args)
    {
        Console.WriteLine($"Step changed: {args.FromStepId} → {args.ToStepId}");
    }

    private void HandleValidationFailed(ValidationResult result)
    {
        foreach (var error in result.Errors)
        {
            Console.WriteLine($"Validation error: {error.Key}: {error.Value}");
        }
    }

    private void HandleWizardComplete(WizardCompletedEventArgs args)
    {
        Console.WriteLine($"Wizard completed: {args.ServiceRequestId}");
    }

    private void HandleDraftSaved(WizardStateDto draft)
    {
        Console.WriteLine($"Draft saved at step {draft.CurrentStepIndex}");
    }
}

API Reference - FodWizard

Properties and events available on the FodWizardComponent.

No properties defined.

API Reference - WizardStep Configuration

Configuration options for wizard step definitions.

No properties defined.

API Reference - WizardStepBase

Base class for wizard step components with lifecycle hooks.

No properties defined.