Try our conversational search powered by Generative AI!

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
    DbLocalizationProvider v8.0 Released

    I’m pleased to announce that Localization Provider v8.0 is finally out.

    valdis | Feb 28, 2024 | Syndicated blog

    Epinova DXP deployment extension – With Octopus deploy

    Example how you can use Epinova DXP deployment extension in Octopus deployment.

    Ove Lartelius | Feb 28, 2024 | Syndicated blog

    Identify Azure web app instance id's for an Optimizely CMS site

    When running Optimizely CMS in Azure, you will be using an instance bound cloud license. What instances are counted, and how can you check them? Le...

    Tomas Hensrud Gulla | Feb 27, 2024 | Syndicated blog

    Introducing Image Transformer - AI Assistant for Optimizely

    We've got something super cool to share with you, and it's all about giving your images a fresh spin. Image Transformer, the latest feature from ou...

    Luc Gosso (MVP) | Feb 26, 2024 | Syndicated blog