Web application demo mode or Introduction mode

Question

I have a web-app with multiple functionalities and each functionality has multiple workflow/process. For example, Workflow A has Steps A => Step F, Workflow B has Steps A1 => Steps G1 and many more workflows. I hope I am able to explain my requirement.

The web-app is written in Angular 6. My task is to create a tutorial mode for all these workflows/processes which provides a guided tour an end-user.

My idea is influenced by introjs library. The web components should show a popup with instructions, a previous button, and a next button. This can be imagined as a finite state machine with only previous and next actions. The previous and next action takes me to a new state.

I have thought about using State Design Pattern, however, since I have multiple workflows with multiple steps, I am assuming that the child state class instances will cause class-explosion for each step.

1. How should I mitigate this issue?
2. Is there any other design pattern that should complement State pattern?
3. or, Is there any other way to tackle this?

I am new to the Design Pattern game and would appreciate your advice.

Answer 1

... however, since I have multiple workflows with multiple steps, I am assuming that the child state class instances will cause class-explosion for each step.

Using the Decorator Pattern to inject the additional popup instruction could help avoiding such class-explosion in implement each and every state separately.

In application demo, or introduction mode you'll add the necessary decorator classes, which manage to show the appropriate popup dialogues befor the user takes the next step to change the state with your regular workflow.

The decorator classes would simply inherit the State classes from the regular workflow, and override the transitional functions to get to the next or previous state.

To setup your application state machine in different modes, you can use any kind of Factory Pattern (like e.g. Abstract Factory or Builder).

• sd1517: thanks for the response. I have to look into the decorator pattern, however, a small doubt is: each of these states will have different instructions, so for each new instruction, there will be a new class on top of the core class, I suppose. Doesn't it still have n number of classes still?
• πάντα ῥεῖ: @coolmego Yes, but you avoid to implement the transitional code twice or even more times, by just using inheritance. It would be a combination of State and Decorator pattern. To setup the whole thing in any of your application modes, it would be useful to use any kind of Factory.
• sd1517: FInally implemented! I did not need to use Delegator, I just made my component classes have a list of states. However, the advice given by @πάντα ῥεῖ is right. I do see the need if including Delegators and some factory(probably abstract). Thanks.