Ram Kumar K
Dec 23, 2020
  2286
(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
    I'm running Optimizely CMS on .NET 9!

    It works 🎉

    Tomas Hensrud Gulla | Nov 12, 2024 | Syndicated blog

    Recraft's image generation with AI-Assistant for Optimizely

    Recraft V3 model is outperforming all other models in the image generation space and we are happy to share: Recraft's new model is now available fo...

    Luc Gosso (MVP) | Nov 8, 2024 | Syndicated blog

    ExcludeDeleted(): Prevent Trashed Content from Appearing in Search Results

    Introduction In Optimizely CMS, content that is moved to the trash can still appear in search results if it’s not explicitly excluded using the...

    Ashish Rasal | Nov 7, 2024

    CMS + CMP + Graph integration

    We have just released a new package https://nuget.optimizely.com/package/?id=EPiServer.Cms.WelcomeIntegration.Graph which changes the way CMS fetch...

    Bartosz Sekula | Nov 5, 2024

    Block type selection doesn't work

    Imagine you're trying to create a new block in a specific content area. You click the "Create" link, expecting to see a CMS modal with a list of...

    Damian Smutek | Nov 4, 2024 | Syndicated blog

    .NET 8 FAQ

    I have previously written about .NET compatibility in general and .NET 8 in particular, see blog posts here , here and here . With the end of suppo...

    Magnus Rahl | Nov 4, 2024