[UI Config] Grouping and displaying long forms in different sections

[jayadinni]

Problem: In most of the use cases the number of fields defined in Schema would range from 10-60, which makes the form long. For the end user, it would be difficult to enter values in a long form, leading to bad user experience and frustration.

Solution: Ability to break the form in groups and different sections. Example:

Todo List

• [x] Form show into multi tab
• [x] Add config to show the button on each step - Button like ‘Save as Draft’, ‘Save and Next’ , Back or Next
• [x] Config for put next button on all page except last one and submit button on the last step -
• [x] Handle required fields, show error messages, click on next button etc
• [x] Config for ‘Save as draft’ and ‘Submit’ button should be disabled or not
• [x] Config for set which title, icon or number should be display on steps
• [x] form divide into multiple column into the step
• [x] Set icon/number as a title with name. Name should be configurable on which position (right/below the step number) wants to show button
• [x] Button alignment (left, right for each button)

[parthlawate]

@jayadinni @Renuka-S adding this related discussion which is about ordering form fields. https://github.com/Sunbird-RC/community/discussions/309

For long forms, we will need to support multiple configurations for the auto generated Ui like

1. Ordering
2. Field groups (could be rendered as a tab or a slide)
3. In some cases if you want to show forms in multiple columns then that also comes into picture..

But ofcourse do look at which of these we want to do in iteration 1.. and where will this config be saved