SB-forms Components & Configurations

List Of Components

Textbox
Textarea
Checkbox
Select
MultiSelect
Topic Selector
Timer
Keywords
Framework
FrameworkCategorySelect

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 
    "description": string, // to specify description about the field and to show as tooltip
    "placeholder": string, // placeholder text to appear within the field
    "required": boolean, // to specify if the field is mandatory or not (currently, not used.)
    "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)
    "visible": boolean, // to hide or show the field 
    "editable": boolean, // to enable or disable the field
    "renderingHints": json, // to specify any additional configuration ex:({"class": "sb-g-col-lg-1 required"})
    "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"
    "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
    "validations": array // Array of objects to specity the validations of a field. Each validation object takes properties such as "type", "message", "value", "criteria"
}

Sample Configuration for name field:

{
    "code": "name",
    "dataType": "text",
    "description": "Name of the content",
    "editable": true,
    "inputType": "text",
    "label": "Title",
    "name": "Name",
    "placeholder": "Title",
    "renderingHints": {
        "class": "sb-g-col-lg-1 required"
    },
    "required": true, // currently not used to check if the field is mandatory. //
    "visible": true,
    "validations": [
        {
            "type": "max",
            "value": "120", // maximum number of characters
            "message": "Input is Exceeded"
        },
        {
            "type": "required", // 
            "message": "Title is required"
        }
    ]
},

Custom invocation when a field’s value changes:

name.valueChanges.pipe(
    tap((value) => {
alert()
    })
);

Custom invocation when a dependant field values changes:

merge(..._.map([DependantFieldControl1, DependantFieldControl2], depend => depend.valueChanges)).pipe(
       tap((value) => {
      // your custom logic
  })
)

Custom validation:

Let’s say we have two fields, maxTime and warningTime and assume that the condition here is warningTime should not be greater than maxTime

{
    "code": "maxTime",
    "dataType": "text",
    "name": "MaxTimer",
    "default": "3600",
    "renderingHints": {
        "class": "sb-g-col-lg-1 required"
    },
    "description": "MaxTime for the content",
    "inputType": "timer"
}

{
    "code": "warningTime",
    "dataType": "list",
    "name": "Warning Time",
    "depends": [
        "maxTime"
    ],
    "inputType": "timer",
    "validations": [
        {
            "type": "compare",
            "criteria": {
                "<": [
                    "maxTime"
                ]
            },
            "message": "warning time should be less than max timer"
        }
    ]
}

Following is our custom function to compare two fields and handle errors if any. The following function takes two arguments - criteria and AbstractControl.

compareFields(criteria, control: AbstractControl): ValidationErrors | null {
    // your custom code
}

Closure function:

A closure function take the following objects as its arguments

control: FormControl // form control of the framework field
depends: [FormControl, FormControl], // array of formcontrols of the fields that the framework field depends on (if any)
formGroup: FormGroup // instance of the entire FormGroup
loading: anonymous function // to notify about the data loading status 
loaded: anonymous function // to notify about the data loaded status

Sample Closure function:

Let’s say we have field called framework. On change of framework field, if we have to invoke a logic, it can be achieved as shown below:

During the initialisation of the framework field, we will pass the following function to options property of framework field.

getFramework(control, depends: FormControl[], formGroup: FormGroup, loading, loaded) {
    const response =  control.valueChanges.pipe(
      switchMap((value: any) => {
          return callFrameworkObservable()
      })
    );
    return response;
}

Field Config for framework

{
  "code": "framework",
  "visible": true,
  "editable": true,
  "dataType": "text",
  "label": "Course Type",
  "required": true,
  "name": "Framework",
  "inputType": "framework",
  "placeholder": "Select Course Type",
  "output": "identifier",
  "options": getFramework
  "validations": [
    {
        "type": "required",
        "message": "Course Type is required"
    }
  ]
}

To handle delay in APIs,