Resident Portal UI Specifications

Overview

UI specs of resident module are used to configure the form fields across Resident Portal. 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 Resident Portal UI specs:

Property Name

Details

Sample Value

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": [] }]

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 ..}

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" }

Last updated 7 months ago