Ram Kumar K
Dec 23, 2020
(1 votes)

Guided Journey – Developing a Wizard Component using EPiServer CMS

Guided Journey – Developing a Wizard Component using EpiServer CMS


The purpose of the online guided journey is to showcase all programs or services offered by MEDC and its partners in the state of Michigan. By self-identifying, a user will be able to quickly get to a listing of resources available along with a link to where more information can be found on each of the programs or services. 

Functional Prototype Design:

Guided Journey Requirements

Development Approach:

The user must choose a path to go down to.

We would like to build ourselves a cool, simple, and flexible wizard component block using Episerver CMS, Bootstrap, and frontend JavaScript framework.

We would like to make this component as simple and user friendly as possible for content authors to create Guided Journeys.


When the user clicks on Path 1,  we provide them with options to choose from Path 1.1, path 1.2, and Path 1.3, and if they click on Path 1.1, they will be given options to choose Path 1.1.1, Path 1.1.2, Path 1.1.3, and so on.

 The following illustrates the requirement from the Architect's point of view.

This can be achieved in different ways, using nested blocks (performance and maintenance nightmare?), or link list (maybe). I choose my new fascination “Generic Property List”.



Based on the prototype, the guided Journey requires the following

    1. Step Image – Contentreference/URL
    2. Step Title- String
    3. Path Data - Custom PropertyList
      1. Path Title - String
      2. Path Description (Needed for end of Journey modal) - XHTMLString
      3. Path Resource Link (Needed for end of Journey modal) - URL
      4. Step Image - Contentreference/URL
      5. Step Title - String
      6. Path Data - Custom PropertyList
        1. Path Title
        2. Path Description (Needed for end of Journey modal)
        3. Path Resource Link (Needed for end of Journey modal)
        4. Step Image
        5. Step Title
        6. Path Data
        7. Not sure Text
      7. Not Sure Text - XHTMLString
    4. Not sure text - XHTMLString


    Each step is a JSON object, the Path data property from the step object is an array of more steps (nested JSON object).


    CMS Generic property list used in Block:

     Guided Journey CMS Block

    JSON Output:




    Wizard component block on a page:

    Guided Journey Wizard

    "A successful application never really is complete but is constantly being improved, hopefully based around users needs." 

    Please share your comments if you would like to approach it differently.

     “Wishing you a season that’s merry and bright with the light of God’s love.” 

    Dec 23, 2020


    Valina Eckley
    Valina Eckley Dec 28, 2020 09:31 PM


    I just had a request to build out a simular wizard.  This is a good approach :)  Thank you for shairing.

    Giuliano Dore
    Giuliano Dore May 11, 2021 11:10 AM

    Excellent idea

    Please login to comment.
    Latest blogs
    AI-Assistant: The 'Change Tone' Shortcut

    The AI-Assistant for Optimizely is constantly evolving, adjusting, and transforming to meet your digital needs, providing a cutting-edge advantage...

    Luc Gosso (MVP) | Sep 27, 2023 | Syndicated blog

    How to fix scheduled job 'Remove Abandoned BLOBs' if it keeps failing

    Optimizely inlcudes a job named 'Remove Abandoned BLOBs'. This post will help you fix it if it's no longer working.

    Henning Sjørbotten | Sep 26, 2023 | Syndicated blog

    Optimizely Web Experimentation Metrics

    Within the domain of Optimizely Web Experimentation Metrics, the emphasis is on objective key performance indicators (KPIs) selected to assess an...

    Matthew Dunn | Sep 23, 2023 | Syndicated blog

    Optimizely For you Intranet

    Having been at Optimizely and in the CMS industry for nearly 16 years I have seen clients’ intranet requirements go from a simple site just to hous...

    Robert Folan | Sep 22, 2023