# UI Specification for Pre-registration

UI specification helps us identify how the data in an ID attribute (attributes of an ID object) is going to be retrieved from the UI. The UI screens in registration client application and pre-registration application are rendered using their respective UI specification JSON. We have different UI Specifications for Registration Client & Pre-registration which is derived from the ID Schema. Here we would be discussing about the properties used in the UI specification of Pre-registration.

## UI Specification Properties

Below are the properties in pre-registration UI specification that are used to store ID attributes in an ID object.

| Name                 | Description                                                       | Example                             |
| -------------------- | ----------------------------------------------------------------- | ----------------------------------- |
| id                   | Unique Ids for each attribute in ID Schema                        | fullname                            |
| description          | Description for the ID attribute                                  | Full Name of Resident               |
| labelName            | Label used for displaying the ID attribute in the UI              |                                     |
| labelName.eng        | Label value in English                                            | Full Name                           |
| labelName.ara        | Label value in Arabic                                             | الاسم الكامل                        |
| labelName.fra        | Label value in French                                             | Nom complet                         |
| controlType          | UI element used for displaying the attribute                      | textbox, dropdown, date, fileupload |
| inputRequired        | Used to identify if UI input is needed or not                     | true or false                       |
| validators           | List of validators for the attribute                              |                                     |
| validators.type      | Type of validaton engine                                          | regex                               |
| validators.validator | Pattern / methodName / scriptName / expression for the validation |                                     |
| validators.arguments | List of arguments needed for the validator                        |                                     |
| required             | Used to decide if it is mandatory or not                          | true or false                       |

### ID

The id property is the unique id provided to a fields to uniquely identify it. The fields can be alpha-numeric without any spaces between them.

### Description

This is a non-mandatory property used to describe the ID attribute.

### Label Name

This property defines label name to be used in UI. This property has sub attributes as the language code (eng, fra, ara) to store data in different languages based on the country's configuration.

### Control Type

This property defines what kind of UI component to be used to capture data in UI. Currently the values that can be used are:

* textbox
* dropdown
* date
* fileupload

### Input Required

This is a mandatory property which decides if the input is to be provided from the UI or not.

### Validator

This property enables us to add a the list of validators for the ID attribute. Each validator will have the below fields,

| Fields    | Description                                                            |
| --------- | ---------------------------------------------------------------------- |
| type      | for validation engine type                                             |
| validator | for pattern / methodName / scriptName / expression                     |
| arguments | array to hold parameter or dependent field ids required for validation |

Currently, regex is supported by MOSIP, the adopter can choose to add various types of validators.

### Required

This is a mandatory property which is needed to identify if the ID attribute is mandatory or not.

## Sample UI Specification

```
{
  "identity": [
    {
      "id": "fullName",
      "description": "Enter Full Name",
      "labelName": {
        "eng": "Full Name",
        "ara": "الاسم الكامل",
        "fra": "Nom complet"
      },
      "controlType": "textbox",
      "inputRequired": true,
      "validators": [
        {
          "type": "regex",
          "validator": "^(?=.{0,50}$).*",
          "arguments": []
        }
      ],
      "required": true
    },
    {
      "id": "dateOfBirth",
      "description": "Enter DOB",
      "labelName": {
        "eng": "Date Of Birth",
        "ara": "تاريخ الولادة",
        "fra": "Date de naissance"
      },
      "controlType": "date",
      "inputRequired": true,
      "validators": [],
      "required": true
    },
    {
      "id": "gender",
      "description": "Enter Gender",
      "labelName": {
        "eng": "Gender",
        "ara": "جنس",
        "fra": "Le genre"
      },
      "controlType": "dropdown",
      "inputRequired": true,
      "validators": [],
      "required": true
    },
    {
      "id": "residenceStatus",
      "description": "Residence status",
      "labelName": {
        "eng": "Residence Status",
        "ara": "حالة الإقامة",
        "fra": "Statut de résidence"
      },
      "controlType": "dropdown",
      "inputRequired": true,
      "validators": [],
      "required": true
    },
    {
      "id": "addressLine1",
      "description": "addressLine1",
      "labelName": {
        "eng": "Address Line1",
        "ara": "العنوان السطر 1",
        "fra": "Adresse 1"
      },
      "controlType": "textbox",
      "inputRequired": true,
      "validators": [
        {
          "type": "regex",
          "validator": "^(?=.{0,50}$).*",
          "arguments": []
        }
      ],
      "required": true
    },
    {
      "id": "addressLine2",
      "description": "addressLine2",
      "labelName": {
        "eng": "Address Line2",
        "ara": "العنوان السطر 2",
        "fra": "Adresse 2"
      },
      "controlType": "textbox",
      "inputRequired": true,
      "validators": [
        {
          "type": "regex",
          "validator": "^(?=.{0,50}$).*",
          "arguments": []
        }
      ],
      "required": false
    },
    {
      "id": "addressLine3",
      "description": "addressLine3",
      "labelName": {
        "eng": "Address Line3",
        "ara": "العنوان السطر 3",
        "fra": "Adresse 3"
      },
      "controlType": "textbox",
      "inputRequired": true,
      "validators": [
        {
          "type": "regex",
          "validator": "^(?=.{0,50}$).*",
          "arguments": []
        }
      ],
      "required": false
    },
    {
      "id": "region",
      "description": "region",
      "labelName": {
        "eng": "Region",
        "ara": "منطقة",
        "fra": "Région"
      },
      "controlType": "dropdown",
      "inputRequired": true,
      "validators": [
        {
          "type": "regex",
          "validator": "^(?=.{0,50}$).*",
          "arguments": []
        }
      ],
      "required": true
    },
    {
      "id": "province",
      "description": "province",
      "labelName": {
        "eng": "Province",
        "ara": "المحافظة",
        "fra": "Province"
      },
      "controlType": "dropdown",
      "inputRequired": true,
      "validators": [
        {
          "type": "regex",
          "validator": "^(?=.{0,50}$).*",
          "arguments": []
        }
      ],
      "required": true
    },
    {
      "id": "city",
      "description": "city",
      "labelName": {
        "eng": "City",
        "ara": "مدينة",
        "fra": "Ville"
      },
      "controlType": "dropdown",
      "inputRequired": true,
      "validators": [
        {
          "type": "regex",
          "validator": "^(?=.{0,50}$).*",
          "arguments": []
        }
      ],
      "required": true
    },
    {
      "id": "zone",
      "description": "zone",
      "labelName": {
        "eng": "Zone",
        "ara": "منطقة",
        "fra": "Zone"
      },
      "controlType": "dropdown",
      "inputRequired": true,
      "validators": [],
      "required": true
    },
    {
      "id": "postalCode",
      "description": "postalCode",
      "labelName": {
        "eng": "Postal Code",
        "ara": "الكود البريدى",
        "fra": "code postal"
      },
      "controlType": "dropdown",
      "inputRequired": true,
      "validators": [
        {
          "type": "regex",
          "validator": "^[(?i)A-Z0-9]{5}$|^NA$",
          "arguments": []
        }
      ],
      "required": true
    },
    {
      "id": "phone",
      "description": "phone",
      "labelName": {
        "eng": "Phone",
        "ara": "هاتف",
        "fra": "Téléphone"
      },
      "controlType": "textbox",
      "inputRequired": true,
      "validators": [
        {
          "type": "regex",
          "validator": "^([6-9]{1})([0-9]{9})$",
          "arguments": []
        }
      ],
      "required": true
    },
    {
      "id": "email",
      "description": "email",
      "labelName": {
        "eng": "Email",
        "ara": "البريد الإلكتروني",
        "fra": "Email"
      },
      "controlType": "textbox",
      "inputRequired": true,
      "validators": [
        {
          "type": "regex",
          "validator": "^[\\w-\\+]+(\\.[\\w]+)*@[\\w-]+(\\.[\\w]+)*(\\.[a-zA-Z]{2,})$",
          "arguments": []
        }
      ],
      "required": true
    },
    {
      "id": "proofOfAddress",
      "description": "proofOfAddress",
      "labelName": [
        {
          "value": "Address Proof",
          "language": "eng"
        }
      ],
      "controlType": "fileupload",
      "inputRequired": true,
      "validators": [],
      "required": false
    },
    {
      "id": "proofOfIdentity",
      "description": "proofOfIdentity",
      "labelName": [
        {
          "value": "Identity Proof",
          "language": "eng"
        }
      ],
      "controlType": "fileupload",
      "inputRequired": true,
      "validators": [],
      "required": true
    },
    {
      "id": "proofOfRelationship",
      "description": "proofOfRelationship",
      "labelName": [
        {
          "value": "Relationship Proof",
          "language": "eng"
        }
      ],
      "controlType": "fileupload",
      "inputRequired": true,
      "validators": [],
      "required": true
    },
    {
      "id": "proofOfDateOfBirth",
      "description": "proofOfDateOfBirth",
      "labelName": [
        {
          "value": "DOB Proof",
          "language": "eng"
        }
      ],
      "controlType": "fileupload",
      "inputRequired": true,
      "validators": [],
      "required": true
    },
    {
      "id": "proofOfException",
      "description": "proofOfException",
      "labelName": [
        {
          "value": "Exception Proof",
          "language": "eng"
        }
      ],
      "controlType": "fileupload",
      "inputRequired": true,
      "validators": [],
      "required": true
    },
    {
      "id": "proofOfException-1",
      "description": "proofOfException",
      "labelName": [
        {
          "value": "Exception Proof 2",
          "language": "eng"
        }
      ],
      "controlType": "fileupload",
      "inputRequired": true,
      "validators": [],
      "required": true
    }
  ],
  "locationHierarchy": [
    "region",
    "province",
    "city",
    "zone",
    "postalCode"
  ]
}
```