In this section we have covered the sample configuration of various types of fields which can be configured in questionset.
Field Configuration Properties:
{
"code": string, // property to match the backend schema ("name", "description", etc...)
"name": string, // name of the field ("Name", "Board", "Medium", "License", "Copyright Year", etc)
"label": string, // title of the field
"placeholder": string, // placeholder text to appear within the field
"description": string, // to specify description about the field and to show as tooltip
"default": string, // specify default value
"dataType": string, // to specify the datatype of the field outcome ("list", "number", "text")
"inputType": string, // to map the field type and the component ("text", "textarea", "select", "nestedselect", etc)
"editable": boolean, // to enable or disable the field
"required": boolean, // to specify if the field is mandatory or not (currently, not used.)
"visible": boolean, // to hide or show the field
"depends": array, // array of "code" to specify that this field is dependant on other fields
"range": array, // Array or array of objects of inputs to fields such as "select", "nestedselect", "multiselect"
"options": array/function/map, // to specify the inputs to fields such as "select", "nestedselect", "multiselect", "framework", "frameworkCategorySelect"
"renderingHints": json, // to specify any additional configuration ex:({"class": "sb-g-col-lg-1 required"})
"validations": array // Array of objects to specity the validations of a field. Each validation object takes properties such as "type", "message", "value", "criteria"
"output": string, // this field is specific to framework terms and it's associations. The field will decide the property for the field outcome ex:("name", "label", "identifier")
"sourceCategory": string, // this field is specific to framework categories to map the category and association ex: (to map "subjectIds" with "subject" or to map "targetMediumIds" with "medium")
"terms": array, // Array or array of object of inputs to fields related to framework and it's categories
}
How to configure different types of fields
In QuestionSet Editor these are the following of fields which we are using:
Text
{
"code": "name",
"dataType": "text",
"description": "Name of the Practice Question Set", // tooltip message
"editable": true,
"inputType": "text",
"label": "Name",
"name": "Name",
"placeholder": "Enter name of the question set",
"renderingHints": {
"class": "sb-g-col-lg-1 required"// this defines field to take space of 1 comun and add * in the Label of field
},
"required": true,
"visible": true,
"validations": [
{
"type": "maxLength",
"value": "120",
"message": "Input is Exceeded" // this defines the max length of fields
},
{
"type": "required",
"message": "Name is required" // this adds the required validation
}
]
}
Textarea
{
"code": "description",
"dataType": "text",
"description": "Description of the content",
"editable": true,
"inputType": "textarea",
"label": "Description",
"name": "Description",
"placeholder": "Description",
"renderingHints": {
"class": "sb-g-col-lg-1 required"
},
"required": true,
"visible": true,
"validations": [
{
"type": "required",
"message": "description is required" // this adds the required validation
}
]
}
{
"code": "maxTime",
"visible": true,
"editable": true,
"dataType": "text",
"name": "MaxTimer",
"renderingHints": {
"class": "sb-g-col-lg-1 required"
},
"description": "MaxTime for the content",
"inputType": "timer",
"label": "Max Time",
"placeholder": "HH:mm:ss",
"required": true,
"validations": [
{
"type": "required", // for adding required validation
"message": "Maxtime is required"
},
{
"type": "maxTime", // for adding maxTime validation, its only applicable for timer fields
"value": "05:30",
"message": "Maxtime should be less than or equal to 05:30"
},
{
"type": "minTime", for adding minTime validation, its only applicable for timer field
"value": "00:01",
"message": "Maxtime should be greater than 00:00"
}
]
}
How to define the width of fields and add asterisks(*) on field label
renderHints is the property defines whether the fields should take space of two column or one column and to add asterisks(*) in the label of field to make it look required field
Two column space fields should have renderHints as:
"renderingHints": {
"class": "sb-g-col-lg-2"
}
One column space fields should have renderHints as:
"renderingHints": {
"class": "sb-g-col-lg-1"
}
For adding asterisks in the Label of field
"renderingHints": {
"class": "required"
}
Note: sb-g-col-lg-1 or sb-g-col-lg-2 can be used with combination of required as:
