M
M
MOSIP Docs
Search…
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

1
{
2
"identity": [
3
{
4
"id": "fullName",
5
"description": "Enter Full Name",
6
"labelName": {
7
"eng": "Full Name",
8
"ara": "الاسم الكامل",
9
"fra": "Nom complet"
10
},
11
"controlType": "textbox",
12
"inputRequired": true,
13
"validators": [
14
{
15
"type": "regex",
16
"validator": "^(?=.{0,50}$).*",
17
"arguments": []
18
}
19
],
20
"required": true
21
},
22
{
23
"id": "dateOfBirth",
24
"description": "Enter DOB",
25
"labelName": {
26
"eng": "Date Of Birth",
27
"ara": "تاريخ الولادة",
28
"fra": "Date de naissance"
29
},
30
"controlType": "date",
31
"inputRequired": true,
32
"validators": [],
33
"required": true
34
},
35
{
36
"id": "gender",
37
"description": "Enter Gender",
38
"labelName": {
39
"eng": "Gender",
40
"ara": "جنس",
41
"fra": "Le genre"
42
},
43
"controlType": "dropdown",
44
"inputRequired": true,
45
"validators": [],
46
"required": true
47
},
48
{
49
"id": "residenceStatus",
50
"description": "Residence status",
51
"labelName": {
52
"eng": "Residence Status",
53
"ara": "حالة الإقامة",
54
"fra": "Statut de résidence"
55
},
56
"controlType": "dropdown",
57
"inputRequired": true,
58
"validators": [],
59
"required": true
60
},
61
{
62
"id": "addressLine1",
63
"description": "addressLine1",
64
"labelName": {
65
"eng": "Address Line1",
66
"ara": "العنوان السطر 1",
67
"fra": "Adresse 1"
68
},
69
"controlType": "textbox",
70
"inputRequired": true,
71
"validators": [
72
{
73
"type": "regex",
74
"validator": "^(?=.{0,50}$).*",
75
"arguments": []
76
}
77
],
78
"required": true
79
},
80
{
81
"id": "addressLine2",
82
"description": "addressLine2",
83
"labelName": {
84
"eng": "Address Line2",
85
"ara": "العنوان السطر 2",
86
"fra": "Adresse 2"
87
},
88
"controlType": "textbox",
89
"inputRequired": true,
90
"validators": [
91
{
92
"type": "regex",
93
"validator": "^(?=.{0,50}$).*",
94
"arguments": []
95
}
96
],
97
"required": false
98
},
99
{
100
"id": "addressLine3",
101
"description": "addressLine3",
102
"labelName": {
103
"eng": "Address Line3",
104
"ara": "العنوان السطر 3",
105
"fra": "Adresse 3"
106
},
107
"controlType": "textbox",
108
"inputRequired": true,
109
"validators": [
110
{
111
"type": "regex",
112
"validator": "^(?=.{0,50}$).*",
113
"arguments": []
114
}
115
],
116
"required": false
117
},
118
{
119
"id": "region",
120
"description": "region",
121
"labelName": {
122
"eng": "Region",
123
"ara": "منطقة",
124
"fra": "Région"
125
},
126
"controlType": "dropdown",
127
"inputRequired": true,
128
"validators": [
129
{
130
"type": "regex",
131
"validator": "^(?=.{0,50}$).*",
132
"arguments": []
133
}
134
],
135
"required": true
136
},
137
{
138
"id": "province",
139
"description": "province",
140
"labelName": {
141
"eng": "Province",
142
"ara": "المحافظة",
143
"fra": "Province"
144
},
145
"controlType": "dropdown",
146
"inputRequired": true,
147
"validators": [
148
{
149
"type": "regex",
150
"validator": "^(?=.{0,50}$).*",
151
"arguments": []
152
}
153
],
154
"required": true
155
},
156
{
157
"id": "city",
158
"description": "city",
159
"labelName": {
160
"eng": "City",
161
"ara": "مدينة",
162
"fra": "Ville"
163
},
164
"controlType": "dropdown",
165
"inputRequired": true,
166
"validators": [
167
{
168
"type": "regex",
169
"validator": "^(?=.{0,50}$).*",
170
"arguments": []
171
}
172
],
173
"required": true
174
},
175
{
176
"id": "zone",
177
"description": "zone",
178
"labelName": {
179
"eng": "Zone",
180
"ara": "منطقة",
181
"fra": "Zone"
182
},
183
"controlType": "dropdown",
184
"inputRequired": true,
185
"validators": [],
186
"required": true
187
},
188
{
189
"id": "postalCode",
190
"description": "postalCode",
191
"labelName": {
192
"eng": "Postal Code",
193
"ara": "الكود البريدى",
194
"fra": "code postal"
195
},
196
"controlType": "dropdown",
197
"inputRequired": true,
198
"validators": [
199
{
200
"type": "regex",
201
"validator": "^[(?i)A-Z0-9]{5}$|^NAquot;,
202
"arguments": []
203
}
204
],
205
"required": true
206
},
207
{
208
"id": "phone",
209
"description": "phone",
210
"labelName": {
211
"eng": "Phone",
212
"ara": "هاتف",
213
"fra": "Téléphone"
214
},
215
"controlType": "textbox",
216
"inputRequired": true,
217
"validators": [
218
{
219
"type": "regex",
220
"validator": "^([6-9]{1})([0-9]{9})quot;,
221
"arguments": []
222
}
223
],
224
"required": true
225
},
226
{
227
"id": "email",
228
"description": "email",
229
"labelName": {
230
"eng": "Email",
231
"ara": "البريد الإلكتروني",
232
"fra": "Email"
233
},
234
"controlType": "textbox",
235
"inputRequired": true,
236
"validators": [
237
{
238
"type": "regex",
239
"validator": "^[\\w-\\+]+(\\.[\\w]+)*@[\\w-]+(\\.[\\w]+)*(\\.[a-zA-Z]{2,})quot;,
240
"arguments": []
241
}
242
],
243
"required": true
244
},
245
{
246
"id": "proofOfAddress",
247
"description": "proofOfAddress",
248
"labelName": [
249
{
250
"value": "Address Proof",
251
"language": "eng"
252
}
253
],
254
"controlType": "fileupload",
255
"inputRequired": true,
256
"validators": [],
257
"required": false
258
},
259
{
260
"id": "proofOfIdentity",
261
"description": "proofOfIdentity",
262
"labelName": [
263
{
264
"value": "Identity Proof",
265
"language": "eng"
266
}
267
],
268
"controlType": "fileupload",
269
"inputRequired": true,
270
"validators": [],
271
"required": true
272
},
273
{
274
"id": "proofOfRelationship",
275
"description": "proofOfRelationship",
276
"labelName": [
277
{
278
"value": "Relationship Proof",
279
"language": "eng"
280
}
281
],
282
"controlType": "fileupload",
283
"inputRequired": true,
284
"validators": [],
285
"required": true
286
},
287
{
288
"id": "proofOfDateOfBirth",
289
"description": "proofOfDateOfBirth",
290
"labelName": [
291
{
292
"value": "DOB Proof",
293
"language": "eng"
294
}
295
],
296
"controlType": "fileupload",
297
"inputRequired": true,
298
"validators": [],
299
"required": true
300
},
301
{
302
"id": "proofOfException",
303
"description": "proofOfException",
304
"labelName": [
305
{
306
"value": "Exception Proof",
307
"language": "eng"
308
}
309
],
310
"controlType": "fileupload",
311
"inputRequired": true,
312
"validators": [],
313
"required": true
314
},
315
{
316
"id": "proofOfException-1",
317
"description": "proofOfException",
318
"labelName": [
319
{
320
"value": "Exception Proof 2",
321
"language": "eng"
322
}
323
],
324
"controlType": "fileupload",
325
"inputRequired": true,
326
"validators": [],
327
"required": true
328
}
329
],
330
"locationHierarchy": [
331
"region",
332
"province",
333
"city",
334
"zone",
335
"postalCode"
336
]
337
}
Copied!
Last modified 2d ago