Ram Kumar K
Dec 23, 2020
  1581
(1 votes)

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:

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.

 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:

     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

    Comments

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

    Awesome.

    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
    The new LinkItem property in Optimizely CMS, and why it matters

    In the past, we have used different tricks to achieve this. Now, the LinkItem property is finally built-in in Optimizely CMS 12!

    Tomas Hensrud Gulla | Mar 20, 2023 | Syndicated blog

    A day in the life of an Optimizely Developer - Vertical Slicing in CMS12

    There is such a vast choice these days in how you can build a website, aside from all of the different programming languages out there, there are...

    Graham Carr | Mar 20, 2023

    Tag Helpers in CMS 12

    Microsoft introduced the TagHelper back in the primordial soup of ASP.NET vNext which became .Net 5, then .NET Core then .Net 5 you know the drill…...

    MartinOttosen | Mar 20, 2023

    Security.txt with minimal api .net core

    Learn why security.txt is a good practice to implement and how easy it can be done.

    Luc Gosso (MVP) | Mar 20, 2023 | Syndicated blog

    Optimizely named a leader in the Gartner 2023 Magic Quadrant

    The Optimizely DXP and CMP are once again being recognised as leaders in the Magic Quadrant by Gartner.

    Ynze | Mar 20, 2023 | Syndicated blog

    Power Optimizely CMS with the brand new GPT-4 language model!

    On March 14th, OpenAI released opened a waiting list for access to their GPT-4 language model, which was also made available for paying users of...

    Tomas Hensrud Gulla | Mar 17, 2023 | Syndicated blog