New dynamic forms for Academic and Non-Academic content

Background:

Design link:- https://whimsical.com/Swkqpz6rnePYg9nPEFjv64

Jira link:- https://project-sunbird.atlassian.net/browse/SH-364

Problem Statement:

Show Different sections as per the config to show the dynamic form
Show checkbox in dynamic form and enable/disable the save/submit button

Key Design Problems:

Currently, the dynamic form does not have the following functionality

Sections in dynamic forms
Checkbox dataType
Enable and disable the Save button as per condition

Solution 1:

Define HTML template in a form configuration itself

{
  "request": {
    "type": "---",
    "subType": "---",
    "action": "save/review",
    "data": {
      "template": "<div class="col-12">
				<div class="col-3" id="{code-icon}">
						
				</div>
				<div class="col-9">
					<div class="col-6" id="{code-title}">
						
					</div>
					<div class="col-6" id="{code-description}">
						
					</div>
					<div class="col-6" id="{code-board}">
						
					</div>
					<div class="col-6" id="{code-medium}">
						
					</div>
					<div class="col-6" id="{code-licenseterms}">
						
					</div>
				</div>
      </div>",
      "action": "save/review",
      "fields": [
        {
          "code": "icon",
          ---
          ---
          ---
          ---
        },
        {
          "code": "title",
          ---
          ---
          ---
          ---
        },
        {
          "code": "description",
          ---
          ---
          ---
          ---
        },
        {
          "code": "board",
          ---
          ---
          ---
          ---
        }        
      ]
    }
  }
}

Solution 2:

Use system settings API to define all the templates and use the template name in the form configuration
While rendering the form call system settings API with template name to get HTML layout of the form

{
  "request": {
    "type": "---",
    "subType": "---",
    "action": "save/review",
    "data": {
      "templateName": "reviewFormTemplate",
      "action": "save/review",
      "fields": [
        {
          "code": "icon",
          ---
          ---
          ---
          ---
        },
        {
          "code": "title",
          ---
          ---
          ---
          ---
        },
        {
          "code": "description",
          ---
          ---
          ---
          ---
        },
        {
          "code": "board",
          ---
          ---
          ---
          ---
        }        
      ]
    }
  }
}

System settings get API to get HTML layout by template name

API: {{host}}/learner/data/v1/system/settings/get/reviewFormTemplate

{
  field: "reviewFormTemplate"
  id: "reviewFormTemplate"
  value: "<div class="col-12">
				<div class="col-3" id="{code-icon}">
						
				</div>
				<div class="col-9">
					<div class="col-6" id="{code-title}">
						
					</div>
					<div class="col-6" id="{code-description}">
						
					</div>
					<div class="col-6" id="{code-board}">
						
					</div>
					<div class="col-6" id="{code-medium}">
						
					</div>
					<div class="col-6" id="{code-licenseterms}">
						
					</div>
				</div>
      </div>"
}

Solution 3:

Predefine forms in the editor

Config changes for sections:-

Introduced a new template as a “sectionalFormTemplate“ in metadata plugin
Will add one more section as “Sections“ in a data
In this sections array, we will define the section name can other data
The fields are associate with this section

Config changes for the checkbox:-

Introduced a new input type as a checkbox in a form config fields

Note:- We are considering only one checkbox will be showing as a part of the metadata form.

Save/Submit button functionality:-

If the form field having the checkbox input type property and required property is true, We will check for the rules and enable/disabled the save/submit button
Rules as follows:

InputType	Required	Metadata['code']	Save/Submit

InputType	Required	Metadata['code']	Save/Submit
checkbox	true	“false“	Disabled
checkbox	true	“true“	Enabled
checkbox	false	“false“	Enabled
checkbox	false	“true“	Enabled

For the new empty form, if "inputType": "checkbox" && "required": true && metadata['code'] === ”false” the save button will be disabled
For the new empty form, if "inputType": "checkbox" && "required": true && metadata['code'] === ”true” the save button will be enabled
For the new empty form, if "inputType": "checkbox" && "required": false && metadata['code'] === ”false” the save button will be enabled
For the new empty form, if "inputType": "checkbox" && "required": false && metadata['code'] === ”true” the save button will be enabled

Solution 4:

Define a template layout structure to show the fields on the form