Widget design pattern for a complex workflow.
I'm trying to develop a UI widget called 'foopicker' which allows the user to select "foo".
To completely specify "foo", the user needs to select an option from list1 and then from list2. The options in list2 do not depend on what was selected from list1.
After the selections are made, the user will be presented with a button that signifies some action will be performed when it is clicked. Typical values for this button might include verbs like: "Apply", "Run", "Save", etc. Typically there will only be one 'action' button.
When the button is clicked, some processing will happen so a spinning indicator might need to be displayed. When the action is completed, the spinning indicator will disappear. A new button might appear called "Configure..." (only) if the "Run" action button was pressed (for example).
If the user has completed the task, the widget will hide all the form controls and in their place display the string indicating what was selected (eg: "list1.optionA [list2.optionB]")
If the user clicks on the text, the form controls will appear again in the place of the text (this is similar to 'editable' behavior).
Given this cascading workflow that the user will perform, what is the best way modularly design the widget(s) that will make this possible?
Here is what I have so far in terms of API:
-
$('#selector').foopicker ( { 'list1':[...],
'list2':[...],
'actions': {'Run': function(){...} } ,
'actions_complete': {'Configure':function() {...}},
} );
I feel like I am trying to squeeze too much logic into one widget. What do you guys think? Can I make it simpler by splitting it into smaller more manageable widgets that perform narrower tasks?