Storyteller pattern
3 mins readMay 14, 2021
programming
pattern
storyteller
This pattern is UI design pattern useful for consuming user inputs (form filling) when type of inputs consumed are depend on other inputs. Here is an example.
You want to build a UI for a service which authenticates user through multiple available ways after few initial inputs like name and age are taken. Once authentication is done, input to the service are consumed and service is provided.
It’s tempting to implement a single form with hiding and showing elements whenever required. But think of the ease with which you will build it. Think of how easy it will be to implement validation. This is exactly the pain storyteller pattern tries to solve.
Why am I calling it storyteller?
Each input form is sort of a story which may lead to further stories sharing context between them. These are independent of each other but at the same time be dependant too. A common framework (storyteller) takes user through these stories collecting information required.
A working demo
See the Pen Storyboard.js by Madhusoodan P (@mmpataki) on CodePen.
Here is how it can be implemented
There are two components. Storyteller and Stories
1. Storyteller
Story teller is a framework which manages the stories to be told along with some supporting UI. The back and next button you just saw are managed by this framework.
2. Stories
Aforementioned storyteller takes input a HTML element to put up a story and draws stories on it. Stories have to be defined how they look and what their next story is (based on some input, if needed). They also define a few functions required by the framework to get the current state, exceptions before moving to next story etc. Here are some example stories used in above demo -
a. PIN code input story (PinCodeStory)
This story takes input a PIN code and asks user to chose a Govt ID it redirects the user to next story based on inputs choosen (either to AadharDetailsStory or PanDetailsStory)
b. Aadhar details story (AadharDetailsStory)
This one prompts user to input AAdhar card no. and validates it. It then redirects user to a story to authenticate the user through OTP.
c. Pan card details story (PanDetailsStory)
This one prompts user to input PAN card details and validates it. It then redirects user to a story to authenticate the user through OTP.
d. OTP verification story (OTPVerifyStory)
This one prompts for a OTP and validates it against the generated one. It then redirects user to page where user is asked to choose a vaccination center.
e. Location picker story (LocationPickerStory)
This one allows user to pick vaccination location and redirects user to a summry page.
f. Summary story (SummaryStory)
This page just demonstrates the final output of the form in nice JSON format.
The render function
You might be wondering what this render function is? It’s just a utility function I use to create quick UIs. Defined here
