Guided Journey – Developing a Wizard Component using EPiServer CMS

Guided Journey – Developing a Wizard Component using EpiServer CMS

 Requirement:

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:

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.

 Example:

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:

JSON Output:

Wizard component block on a page:

"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.”