Pre-registration UI Specifications
Overview
UI specs of Pre-Registration module are used to configure the form fields in the Demographic Details and Document Upload functionality. UI specs are saved as a JSON file with a list of fields. Each field has a set of attributes/ properties that can be configured which affects the look and feel along with the functionality of the field. Below is the list of all the properties available for each field in the UI specs:
id
The id property is the unique id provided to a field to uniquely identify it. The id can be alpha-numeric without any spaces between them.
"id":"zone"
description
This is a non-mandatory property used to describe the field.
"description": "zone"
labelName
This property defines label name for the field. This property has sub-attributes as the language code (eng, fra, ara) to store data in different languages based on the country's configuration.
"labelName": { "eng": "Zone", "ara": "منطقة", "fra": "Zone"}
controlType
This property defines the kind of UI component to be used to capture data in UI. Currently the values that can be used are: • textbox (creates multiple textboxes for each field to capture input in all the languages configured for the setup) • dropdown • fileupload • date (creates a date picker) • ageDate (creates a date picker along with number toggle to provide age directly) • checkbox (creates a toggle checkbox for the field which can be checked or unchecked) • button (creates dropdown options as buttons, which user can select easily)
inputRequired
This property decides if the field is to be displayed in the UI form or not. It is useful for some internal fields which do not need any input from the user.
required
This is a mandatory property which decides if the field is a required form field or not. If true, user must provide some value for the field.
type
This property defines the data type of the value corresponding to this field. The data types supported are “number”, “string” and “simpleType”. The type “simpleType” means that language specific value will be saved along with the language code.
fieldType
This property is relevant when control type is “dropdown” or “button”. It defines if the field is of type “default” or “dynamic”. If it is “dynamic” then all the options for the dropdown are populated from the “master.dynamic_field” table otherwise they are populated from corresponding table example “master.gender”
subType
This is relevant for 2 cases: 1. When control type is “dropdown”/ “button” and the type is “dynamic” then “subtype” can be used to populate the options for the field with the data available in “master.dynamic_field” table. 2. When the control type is “fileupload”, then the property ”subtype” is used to map the field to a “code” in the “master.doc_category” table.
validators
* This property enables us to add the list of language specific validators for the field. * Each validator can have the below fields, “langCode”, “type”, “validator”, “arguments”, “errorMessageCode” * The “type” defines the validation engine type. * The “validator” gives the pattern/ methodName/ scriptName/ expression * The “arguments” array to is used to hold parameter or dependent field ids required for validation * The “errorMessageCode” can be given to add custom error message which will be shown to the user when the validation fails. The error message corresponding to this code will be picked from language specific i18n translation files. In case “errorMessageCode” is not given then generic error message will be displayed to the user when validation fails. Currently, regex is supported by MOSIP. If “langCode” is not added then same “validator” is used for all languages of the field.
"validators": [{ "langCode": "eng", "type": "regex", "validator": "^(?=.{0,50}$).*", "arguments": [], "errorMessageCode": "UI_1000" },{ "langCode": "ara", "type": "regex", "validator": "^[A-Z]+$", "arguments": [] },{ "langCode": "fra", "type": "regex", "validator": "^[A-Z]+$", "arguments": [] }]
transliteration
If enabled, then value entered by user in one language is transliterated into other.
locationHierarchyLevel
This attribute is mandatory for the location dropdown fields. The value will be as per corresponding location hierarchy level from the master.loc_hierarchy_list table.
{ "id":"region", "controlType":"dropdown", "fieldType":"default", "type":"simpleType", "parentLocCode":"MOR", "locationHierarchyLevel":1 ..}
parentLocCode
This attribute is to be used only for location dropdown fields and it is optional. The corresponding location dropdown will be pre populated in UI based on the value in “parentLocCode”. If this attribute is NOT mentioned in UI specs, then the dropdown will be populated based on selection in its parent dropdown, as before. For the first dropdown, in case this attribute is not mentioned in UI specs then the value from “mosip.country.code” configuration will be used for backward compatibility.
{ "id":"region", "controlType":"dropdown", "fieldType":"default", "type":"simpleType", "parentLocCode":"MOR", "locationHierarchyLevel":1 ..}
visibleCondition
The property is used to define an expression using json-rules-engine which will decide the visibility condition for the form field. Refer https://www.npmjs.com/package/json-rules-engine to get the syntax for the conditions.
"visibleCondition": { "all": [{ "fact": "identity", "operator":"lessThanInclusive", "value": 10, "path": "$.age" }]} This condition will make the field visible only when the “age” field value <= 10.
requiredCondition
The property is used to define an expression using json-rules-engine which will decide the required condition for the form field. Refer https://www.npmjs.com/package/json-rules-engine to get the syntax for the conditions.
"requiredCondition": { "all": [{ "fact": "identity", "operator": "equal", "value": "MLE", "path": "$.gender.0.value" },{ "fact": "identity", "operator": "equal", "value": "102", "path": "$.maritalStatus.0.value" }]} This condition will make the field required only when the “gender” field value = ‘MLE’ and “maritalStatus” field value is 102” .
alignmentGroup
* This property is used to group the fields on the screen. * If it is skipped, then all the fields will appear in same sequence (horizontally layout) as they appear in UI specs. * If you want the first and fifth field to be in same row in the screen, you can add this attribute with same group name. * The UI is responsive so it will accommodate as many fields in one row as they will fit comfortably.
containerStyle
This is used to optionally apply some CSS styles to the UI field container.
"containerStyle": { "width": "600px", "margin-right": "10px" }
headerStyle
This is used to optionally apply some CSS styles to the UI header of the field container.
"headerStyle": { "width": "600px", "margin-right": "10px" }
changeAction
This property can be added to define interaction between the 2 or more form fields when user changes value in one of them. Currently the “changeAction” supported are “copy&disable” and “copyto” ONLY.
1. "changeAction": "copyto:permanentZipcode, presentZipcode,addressCopy" When the checkbox “addressCopy” is checked the value of the field “permanentZipcode” will be copied to “presentZipcode”. 2. "changeAction":"copy&disable: permanentCountry=presentCountry, permanentAddressLine1=presentAddressLine1" When the checkbox “addressCopy” is checked the value of the field “permanentCountry” will be copied to “presentCountry” and the field “presentCountry” will be disabled. Same with “permanentAddressLine1” and “presentAddressLine1”.
Last updated