Creating Stepper for user onboarding in portal

[princegupta1131]

Sunbird-ED Implemented Stepper to show the onboarding flow in Portal

1. Stepper is based on form Config.
2. Adopter can change the step position based on form config.
3. Adopter can remove/hide the step based on form config.
4. Adopter can add/show new step type ( component, html, video-player, pdf-player).
5. if stepper config is diasbled existing onboarding popup will be displayed.

Ticket Reference : https://project-sunbird.atlassian.net/browse/ED-517

[vinukumar-vs]

wireframes: https://www.figma.com/file/QlF2TDkmkpiIwBQcHS49nZ/Diksha-Steppers-Design?node-id=0%3A1&t=GGbZygR6BGK1uF3u-0

[Krishnaj20]

@kameshbhr @mmanimegalai @SanthoshVasabhaktula - ED team is working on making the on-boarding steps truly configurable in the portal. Currently, on-boarding is a set of pop-ups. With the new approach, users will be able to see all the on-boarding steps in a single view with multiple tabs. What goes in each tab, and the number of tabs are completely configurable by the adopter. The UI screens for the same are attached in this thread.

[kameshbhr]

This is going to be a very useful functionality. Can you please share the details of how the configuration looks like - a sample config file? I am interested to know what fields can be changed in the existing forms and how.
A few questions/suggestions:

1. I assume the configuration also allows entire flow to be removed. Is that correct?
2. There is a similar flow when a user registers for the first time. Can that also be integrated with this? That will avoid going through the same flow twice.
3. We have a similar flow in the mobile app. Is there a plan to do similar changes there too?

[Krishnaj20]

@kameshbhr - mobile app changes are currently not planned in this release (5.2.0). We will take it up as part of 5.3.0 release.

@rajeevsathish - can you respond to point 1 and 2?

[princegupta1131]

@kameshbhr - shared the sample config details for the reference

curl - To create stepper form config :

curl --location --request POST '{<please specify your host name>}/api/data/v1/form/create' \
--header 'Accept: application/json' \
--header 'Content-Type: application/json' \
--header 'Authorization: <please use your Bearer Token to create this form>' \
--data-raw '{
    "request": {
        "type": "useronboardingsteps",
        "action": "onboarding",
        "subType": "global",
        "rootOrgId": <please specify your root org id>,
        "component": "portal",
        "data":{
        
        "fields": 
        [
  {
    "stepLabel": "BMGS",
    "description": "Form step to accept BMGS from User",
    "isEnabled": true,
    "sequence": 1,
    "isMandatory": true,
    "renderOptions": {
      "type": "component",
      "name": "BMGS"
    },
    "defaults": {
      "board": [
        "State (Tamil Nadu)"
      ],
      "gradeLevel": [
        "Class 1"
      ],
      "medium": [
        "Tamil"
      ]
    }
  },
  {
    "stepLabel": "UserType",
    "description": "Form step to accept userType from User",
    "isEnabled": true,
    "sequence": 2,
    "isMandatory": true,
    "renderOptions": {
      "type": "component",
      "name": "userType"
    },
    "defaults": {
      "role": "Others"
    }
  },
  {
    "stepLabel": "Location",
    "description": "Form step to accept Location from User",
    "isEnabled": true,
    "sequence": 3,
    "isMandatory": true,
    "renderOptions": {
      "type": "component",
      "name": "Location"
    },
    "defaults": {
      "district": "Bidar",
      "state": "Karnataka"
    }
  },
  {
    "stepLabel": "About",
    "description": "Form step to accept Location from User",
    "isEnabled": false,
    "sequence": 4,
    "isMandatory": false,
    "renderOptions": {
      "type": "html",
      "content": "<div><h2> resources for an interesting learning experic</h2></div>"
    },
    "defaults": {}
  },
  {
    "stepLabel": "Video Player",
    "description": "SunBird Video Player",
    "isEnabled": false,
    "sequence": 5,
    "isMandatory": false,
    "defaults": {},
    "renderOptions": {
      "type": "video-player",
      "videoPlayerConfig": {
        "config": {},
        "context": {},
        "metadata": {
          "artifactUrl": "https://ntpproductionall.blob.core.windows.net/ntp-content-production/content/assets/do_31309320735055872011111/engagement-with-language-.mp4",
          "identifier": "abcd",
          "name": "Engagement with Language"
        }
      }
    }
  },
  {
    "stepLabel": "PDF Player",
    "description": "SunBird Pdf Player",
    "isEnabled": false,
    "sequence": 6,
    "isMandatory": false,
    "defaults": {},
    "renderOptions": {
      "type": "pdf-player",
      "pdfPlayerConfig": {
        "config": {},
        "context": {},
        "metadata": {
          "artifactUrl": "https://ntpproductionall.blob.core.windows.net/ntp-content-production/content/assets/do_31291455031832576019477/b301b302_std_1_tamilenglish_lang_term-1_opt.pdf",
          "identifier": "do_31291455031832576019477",
          "name": "B301,ENGLISH_LANG_TERM 1_OPT"
        }
      }
    }
  }
]
      }
    }
}'

[vinukumar-vs]

Design wiki for stepper implementation - First version

https://project-sunbird.atlassian.net/wiki/spaces/SUN/pages/3272114300/Sunbird+Portal+Implementation+of+Angular+Stepper+for+onboarding+flows

We will be updating the conclusion or design approach soon. The above configuration may vary after the design discussion.