I had a conversation with @ibacher today about the best location and approach for defining these tutorials. Here’s a summary of what we came up with:
Apart from having onboarding tutorials in O3, the primary beneficiaries would be implementors, such as those in implementations like Kenya EMR. Therefore, these tutorials should be configurable.
The technical architecture would involve an extension mounted during the initialization of O3. This extension will include a configuration schema that allows developers to provide a set of walkthroughs in a JSON array. Each tutorial would be loaded into the Tutorial modal in the help menu. When a user clicks on a specific tutorial, it will guide them step by step.
A sample configuration would look like this:
{
tutorials: [
{
"name": "Patient Registration",
"description": "A description",
"steps": [
{
"target": ".register_button",
"content": "Click this button to navigate to the registration page"
},
{
"target": '[aria-label="Contact Details Section"]',
"content": "Here you can update the patient's contact information."
}
...
},
{
"name": "Basic Tutorial",
"description": "Lorem ipsum",
"steps": []
}
]
}
Since this feature is still under development, we can house it in a new repository. Once we have made significant progress, we can consider moving it to an appropriate monorepo.
Here are some screenshots from the proposed design to give you more context:
