@mosip/json-form-builder 0.1.1-beta.3 → 0.1.1-beta.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
# JSON Form Builder
|
|
2
2
|
|
|
3
|
-
A flexible and customizable form builder
|
|
3
|
+
A flexible and customizable form builder for creating forms from JSON configurations.
|
|
4
4
|
|
|
5
5
|
## Features
|
|
6
6
|
|
|
7
|
-
-
|
|
8
|
-
-
|
|
9
|
-
- RTL
|
|
7
|
+
- JSON-based form creation
|
|
8
|
+
- Multilingual support
|
|
9
|
+
- RTL layout support
|
|
10
10
|
- Responsive design
|
|
11
|
-
-
|
|
11
|
+
- Built-in field validation
|
|
12
12
|
- Google reCAPTCHA integration
|
|
13
13
|
- Customizable styling
|
|
14
14
|
|
|
@@ -28,125 +28,149 @@ import { JsonFormBuilder } from "@mosip/json-form-builder";
|
|
|
28
28
|
const config = {
|
|
29
29
|
schema: [
|
|
30
30
|
{
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
ara: "حقل تجريبي",
|
|
37
|
-
fra: "Champ d'exemple",
|
|
38
|
-
},
|
|
39
|
-
placeholder: {
|
|
40
|
-
eng: "Enter value",
|
|
41
|
-
ara: "أدخل القيمة",
|
|
42
|
-
fra: "Entrez la valeur",
|
|
43
|
-
},
|
|
31
|
+
alignmentGroup: "group1",
|
|
32
|
+
capsLockCheck: true,
|
|
33
|
+
controlType: "textbox",
|
|
34
|
+
cssClasses: "name-input-field",
|
|
35
|
+
id: "name",
|
|
44
36
|
info: {
|
|
45
|
-
eng: "You have to input some text in this field",
|
|
46
37
|
ara: "عليك إدخال بعض النصوص في هذا الحقل",
|
|
38
|
+
eng: "You must enter some text in this field",
|
|
47
39
|
fra: "Vous devez saisir du texte dans ce champ",
|
|
48
40
|
},
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
41
|
+
labelName: {
|
|
42
|
+
ara: "الاسم",
|
|
43
|
+
eng: "Name",
|
|
44
|
+
fra: "Nom",
|
|
45
|
+
},
|
|
46
|
+
placeholder: {
|
|
47
|
+
ara: "أدخل الاسم",
|
|
48
|
+
eng: "Enter name",
|
|
49
|
+
fra: "Entrez le nom",
|
|
50
|
+
},
|
|
51
|
+
required: true,
|
|
52
|
+
type: "string",
|
|
52
53
|
validators: [
|
|
53
54
|
{
|
|
54
|
-
regex: "^[a-zA-Z0-9]+$",
|
|
55
|
-
langCode: null,
|
|
56
55
|
error: {
|
|
57
|
-
eng: "Special characters are not allowed",
|
|
58
56
|
ara: "لا يُسمح باستخدام الأحرف الخاصة",
|
|
57
|
+
eng: "Special characters are not allowed",
|
|
59
58
|
fra: "Les caractères spéciaux ne sont pas autorisés",
|
|
60
59
|
},
|
|
60
|
+
langCode: null,
|
|
61
|
+
regex: "^[a-zA-Z0-9]+$",
|
|
61
62
|
},
|
|
62
63
|
],
|
|
63
|
-
alignmentGroup: "group1",
|
|
64
64
|
},
|
|
65
65
|
{
|
|
66
|
-
|
|
66
|
+
alignmentGroup: "group2",
|
|
67
67
|
controlType: "dropdown",
|
|
68
|
+
id: "gender",
|
|
69
|
+
subType: "gender-options",
|
|
68
70
|
labelName: {
|
|
71
|
+
ara: "الجنس",
|
|
69
72
|
eng: "Gender",
|
|
70
73
|
fra: "Genre",
|
|
71
|
-
ara: "جنس",
|
|
72
74
|
},
|
|
73
75
|
required: false,
|
|
74
|
-
alignmentGroup: "group2",
|
|
75
76
|
},
|
|
76
77
|
{
|
|
77
|
-
|
|
78
|
+
alignmentGroup: "group2",
|
|
78
79
|
controlType: "phone",
|
|
79
80
|
disabled: true,
|
|
80
|
-
|
|
81
|
-
prefix: ["+91"],
|
|
81
|
+
id: "phone",
|
|
82
82
|
labelName: {
|
|
83
|
-
eng: "Phone Number",
|
|
84
83
|
ara: "رقم الهاتف",
|
|
84
|
+
eng: "Phone Number",
|
|
85
85
|
fra: "Numéro de téléphone",
|
|
86
86
|
},
|
|
87
87
|
placeholder: {
|
|
88
|
-
eng: "Enter your phone number",
|
|
89
88
|
ara: "أدخل رقم هاتفك",
|
|
89
|
+
eng: "Enter your phone number",
|
|
90
90
|
fra: "Entrez votre numéro de téléphone",
|
|
91
91
|
},
|
|
92
|
+
prefix: ["+91"],
|
|
93
|
+
required: true,
|
|
92
94
|
},
|
|
93
95
|
{
|
|
94
|
-
|
|
96
|
+
alignmentGroup: "group3",
|
|
95
97
|
controlType: "password",
|
|
98
|
+
id: "password",
|
|
99
|
+
info: {
|
|
100
|
+
ara: "استخدم 8 أحرف أو أكثر مع مزيج من الحروف ورقم واحد على الأقل.",
|
|
101
|
+
eng: "Use 8 or more characters with a mix of letters and at least one number.",
|
|
102
|
+
fra: "Utilisez 8 caractères ou plus avec un mélange de lettres et au moins un chiffre.",
|
|
103
|
+
},
|
|
96
104
|
labelName: {
|
|
97
|
-
eng: "Password",
|
|
98
105
|
ara: "كلمة المرور",
|
|
106
|
+
eng: "Password",
|
|
99
107
|
fra: "Mot de passe",
|
|
100
108
|
},
|
|
101
109
|
placeholder: {
|
|
110
|
+
ara: "أدخل كلمة المرور",
|
|
102
111
|
eng: "Enter your password",
|
|
103
|
-
ara: "أدخل كلمة المرور الخاصة بك",
|
|
104
112
|
fra: "Entrez votre mot de passe",
|
|
105
113
|
},
|
|
106
|
-
info: {
|
|
107
|
-
eng: "Use 8 or more characters with a mix of letters and at least one number.",
|
|
108
|
-
ara: "استخدم 8 أحرف أو أكثر بمزيج من الحروف ورقم واحد على الأقل.",
|
|
109
|
-
fra: "Utilisez 8 caractères ou plus avec un mélange de lettres et au moins un chiffre.",
|
|
110
|
-
},
|
|
111
114
|
required: true,
|
|
112
|
-
alignmentGroup: "group3",
|
|
113
115
|
},
|
|
114
116
|
{
|
|
115
|
-
|
|
117
|
+
alignmentGroup: "group4",
|
|
116
118
|
controlType: "date",
|
|
119
|
+
id: "dob",
|
|
117
120
|
labelName: {
|
|
118
|
-
eng: "Date of Birth",
|
|
119
121
|
ara: "تاريخ الميلاد",
|
|
122
|
+
eng: "Date of Birth",
|
|
120
123
|
fra: "Date de naissance",
|
|
121
124
|
},
|
|
122
125
|
minAge: 2,
|
|
123
126
|
maxAge: 3,
|
|
124
|
-
|
|
127
|
+
format: "dd-MM-yyyy",
|
|
125
128
|
required: true,
|
|
126
129
|
},
|
|
127
130
|
{
|
|
128
|
-
|
|
131
|
+
alignmentGroup: "group5",
|
|
129
132
|
controlType: "checkbox",
|
|
133
|
+
id: "consent",
|
|
130
134
|
labelName: {
|
|
131
|
-
eng: "I agree to the <b><a href='#'>Terms & Conditions</a></b> and <b><a href='#'>Privacy Policy</a></b>.",
|
|
132
135
|
ara: "أوافق على <b><a href='#'>الشروط والأحكام</a></b> و<b><a href='#'>سياسة الخصوصية</a></b>.",
|
|
136
|
+
eng: "I agree to the <b><a href='#'>Terms & Conditions</a></b> and <b><a href='#'>Privacy Policy</a></b>.",
|
|
133
137
|
fra: "J'accepte les <b><a href='#'>conditions générales</a></b> et la <b><a href='#'>politique de confidentialité</a></b>.",
|
|
134
138
|
},
|
|
135
139
|
required: true,
|
|
136
|
-
alignmentGroup: "group5",
|
|
137
140
|
},
|
|
138
141
|
],
|
|
142
|
+
allowedValues: {
|
|
143
|
+
"gender-options": {
|
|
144
|
+
male: {
|
|
145
|
+
ara: "ذكر",
|
|
146
|
+
eng: "Male",
|
|
147
|
+
fra: "Homme",
|
|
148
|
+
},
|
|
149
|
+
female: {
|
|
150
|
+
ara: "أنثى",
|
|
151
|
+
eng: "Female",
|
|
152
|
+
fra: "Femme",
|
|
153
|
+
},
|
|
154
|
+
other: {
|
|
155
|
+
ara: "آخر",
|
|
156
|
+
eng: "Other",
|
|
157
|
+
fra: "Autre",
|
|
158
|
+
},
|
|
159
|
+
},
|
|
160
|
+
},
|
|
139
161
|
i18nValues: {
|
|
140
162
|
errors: {
|
|
141
163
|
required: {
|
|
164
|
+
ara: "هذا الحقل مطلوب",
|
|
142
165
|
eng: "This field is required",
|
|
143
166
|
fra: "Ce champ est obligatoire",
|
|
144
167
|
},
|
|
145
168
|
capsLock: {
|
|
169
|
+
ara: "زر الأحرف الكبيرة مفعّل",
|
|
146
170
|
eng: "Caps Lock is on",
|
|
147
|
-
fra: "Verr Maj activé"
|
|
148
|
-
}
|
|
149
|
-
}
|
|
171
|
+
fra: "Verr Maj activé",
|
|
172
|
+
},
|
|
173
|
+
},
|
|
150
174
|
},
|
|
151
175
|
language: {
|
|
152
176
|
mandatory: ["eng"],
|
|
@@ -197,61 +221,154 @@ interface FormConfig {
|
|
|
197
221
|
errors?: Errors;
|
|
198
222
|
labels?: { [id: string]: Label };
|
|
199
223
|
placeholders?: { [id: string]: Label };
|
|
200
|
-
}
|
|
201
|
-
errors?: Errors;
|
|
224
|
+
};
|
|
202
225
|
}
|
|
203
226
|
```
|
|
204
227
|
|
|
205
|
-
##
|
|
228
|
+
## Schema Properties
|
|
206
229
|
|
|
207
230
|
The schema consists of the following properties:
|
|
208
231
|
|
|
209
|
-
### Field Properties
|
|
210
|
-
|
|
211
|
-
| Property | Type
|
|
212
|
-
| ------------------- |
|
|
213
|
-
| `alignmentGroup` | string
|
|
214
|
-
| `
|
|
215
|
-
| `controlType` | string
|
|
216
|
-
| `
|
|
217
|
-
| `
|
|
218
|
-
| `
|
|
219
|
-
| `
|
|
220
|
-
| `
|
|
221
|
-
| `
|
|
222
|
-
| `
|
|
223
|
-
| `
|
|
224
|
-
| `
|
|
225
|
-
| `
|
|
226
|
-
| `
|
|
232
|
+
### Field Properties Reference (Alphabetical)
|
|
233
|
+
|
|
234
|
+
| Property | Type | Requirement | Description |
|
|
235
|
+
| ------------------- | ------------ | ------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
236
|
+
| `alignmentGroup` | string | Optional | Fields in the same group are aligned horizontally in the UI. |
|
|
237
|
+
| `acceptedFileTypes` | string/array | Optional | For file/photo uploads: allowed MIME types, e.g., `image/jpeg`, `application/pdf`. |
|
|
238
|
+
| `controlType` | string | **Mandatory** | Type of UI control. Options: `textbox`, `textarea`, `date`, `dropdown`, `password`, `checkbox`, `radio`, `phone`, `photo`, `fileupload`. |
|
|
239
|
+
| `disabled` | boolean | Optional | Disables the field when `true`. Defaults to `false`. |
|
|
240
|
+
| `format` | string | Optional | For date fields: format in which the date value should be displayed, placeholder rendered, and submitted. Defaults to `yyyy/MM/dd` if not provided. |
|
|
241
|
+
| `id` | string | **Mandatory** | Unique identifier for the field, used internally to map values. |
|
|
242
|
+
| `info` | object | Optional | Multilingual tooltip info for the field. Displayed as an info icon next to the label. |
|
|
243
|
+
| `maxAge` | number | Optional | For date fields: maximum allowed age in days from today. Selected date must be ≤ (today + maxAge). |
|
|
244
|
+
| `maxFileSizeMB` | number | Optional | For file uploads: maximum allowed file size in MB. |
|
|
245
|
+
| `minAge` | number | Optional | For date fields: minimum allowed age in days from today. Selected date must be ≥ (today − minAge). |
|
|
246
|
+
| `placeholder` | object | Optional | Multilingual placeholder text displayed inside input fields. |
|
|
247
|
+
| `prefix` | string/array | Optional | Single or multiple prefixes for the phone field. Works only when `controlType` is `phone`. |
|
|
248
|
+
| `required` | boolean | Optional | Whether the field must be filled. Defaults to `false`. |
|
|
249
|
+
| `rows` | number | Optional | For textarea fields: number of visible rows. Defaults to 2 if not provided. |
|
|
250
|
+
| `subType` | string | Optional | Optional sub-type for certain controls like `dropdown` and `radio`. Refers to predefined allowed values. |
|
|
251
|
+
| `type` | string | Optional | Input type: `string` for single-language or `simpleType` for multilingual fields (renders one input per language). |
|
|
252
|
+
| `validators` | array | Optional | List of validation rules. Each validator has:<br>- `regex` (string, **Mandatory**) – pattern to validate<br>- `error` (object, **Mandatory**) – multilingual error messages<br>- `langCode` (string, Optional) – applies only to specific language if provided |
|
|
253
|
+
|
|
254
|
+
---
|
|
255
|
+
|
|
256
|
+
### Special Field Behaviors
|
|
257
|
+
|
|
258
|
+
#### Date Field
|
|
259
|
+
|
|
260
|
+
- **Age Validation (`minAge` / `maxAge`)**: minAge/maxAge are in days relative to today.
|
|
261
|
+
- `minAge = 0` → date must be today or later.
|
|
262
|
+
- `maxAge = 5` → date must be today or within the next 5 days.
|
|
263
|
+
- Validation fails if the selected date is outside the allowed range.
|
|
264
|
+
- **Date Format (`format`)**: Placeholder, selected display, and submitted value must all follow the same format. Defaults to `yyyy/MM/dd` if not provided.
|
|
265
|
+
|
|
266
|
+
#### Radio Field
|
|
267
|
+
|
|
268
|
+
- **Final Submitted Value (string type)**: The submitted value is always taken from the **first language listed in mandatoryLanguages**, regardless of current UI language. Both 2-letter and 3-letter language codes are supported.
|
|
269
|
+
|
|
270
|
+
#### SimpleType Radio Field
|
|
271
|
+
|
|
272
|
+
- **Final Submitted Value Structure**: Submitted data is an **array of objects**, one per mandatory language.
|
|
273
|
+
```json
|
|
274
|
+
{
|
|
275
|
+
"language": "<3-letter-language-code>",
|
|
276
|
+
"value": "<selected-option-value>"
|
|
277
|
+
}
|
|
278
|
+
```
|
|
279
|
+
|
|
280
|
+
#### File Upload Field (`fileupload` / `photo`)
|
|
281
|
+
|
|
282
|
+
The file upload field allows users to upload files or photos with additional options and validations.
|
|
283
|
+
|
|
284
|
+
- **Accepted File Types (`acceptedFileTypes`)**
|
|
285
|
+
- Restricts uploads to specific file types such as `image/jpeg`, `application/pdf`.
|
|
286
|
+
- Multiple types are supported.
|
|
287
|
+
- Example display text: `"JPEG, PNG, PDF (max. 5 MB)"`.
|
|
288
|
+
|
|
289
|
+
- **Maximum File Size (`maxFileSizeMB`)**
|
|
290
|
+
- Sets the maximum allowed file size in MB.
|
|
291
|
+
- Example: `5` → maximum 5 MB per file.
|
|
292
|
+
|
|
293
|
+
- **Document Type (`docType`)**
|
|
294
|
+
- Optional dropdown to select the type of document.
|
|
295
|
+
- Supports multilingual labels and placeholders.
|
|
296
|
+
|
|
297
|
+
- **Reference ID (`refId`)**
|
|
298
|
+
- Optional text input to enter a document reference number.
|
|
299
|
+
- Supports multilingual labels and placeholders.
|
|
300
|
+
|
|
301
|
+
- **Proof of Document (`proofOfDoc`)**
|
|
302
|
+
- Label displayed above the upload area.
|
|
303
|
+
- Indicates the area where users can upload their file or photo.
|
|
304
|
+
- Supports multilingual labels.
|
|
305
|
+
|
|
306
|
+
- **Upload Area**
|
|
307
|
+
- Users can click to select a file or drag-and-drop it into the area.
|
|
308
|
+
- Displays supported file types and maximum size as helper text.
|
|
309
|
+
- Can be disabled to prevent uploads.
|
|
310
|
+
|
|
311
|
+
- **File Preview**
|
|
312
|
+
- **Photos**: Shows a thumbnail of the uploaded image.
|
|
313
|
+
- **Other files**: Shows file name, size, and an icon.
|
|
314
|
+
- Each preview includes a delete button to remove the file.
|
|
315
|
+
|
|
316
|
+
- **Validation**
|
|
317
|
+
- Required uploads must have a file.
|
|
318
|
+
- Only allowed file types and sizes are accepted.
|
|
319
|
+
- Validation messages are shown in multiple languages if configured.
|
|
227
320
|
|
|
228
321
|
### Allowed Values Section (optional)
|
|
229
322
|
|
|
230
|
-
| Property | Type | Description
|
|
231
|
-
| --------------- | ------ |
|
|
232
|
-
| `allowedValues` | object | Defines predefined options for dropdowns or checkboxes. Keys represent option
|
|
323
|
+
| Property | Type | Description |
|
|
324
|
+
| --------------- | ------ | -------------------------------------------------------------------------------------------------------------------------------------- |
|
|
325
|
+
| `allowedValues` | object | Defines predefined options for dropdowns or checkboxes. Keys represent option `subType`/ `id`, and values provide multilingual labels. |
|
|
233
326
|
|
|
234
327
|
### i18nValues Section (optional)
|
|
328
|
+
|
|
235
329
|
#### It contains errors, additional labels & placeholders
|
|
236
|
-
Errors Section
|
|
237
330
|
|
|
238
|
-
|
|
239
|
-
| ------------------ | ------ | ----------------------------------------------------------------- |
|
|
240
|
-
| `required` | object | Defines multilingual error messages for required fields. |
|
|
241
|
-
| `passwordMismatch` | object | Defines multilingual error messages for password mismatch. |
|
|
242
|
-
| `capsLock` | object | Defines multilingual error messages for caps lock enabled. |
|
|
331
|
+
---
|
|
243
332
|
|
|
333
|
+
#### Errors Section
|
|
244
334
|
|
|
335
|
+
| Property | Type | Description |
|
|
336
|
+
| ------------------ | ------ | --------------------------------------------------------------------------------------------------------------------------------- |
|
|
337
|
+
| `required` | object | Multilingual error messages for required fields. Example: `"eng": "This field is required"` |
|
|
338
|
+
| `passwordMismatch` | object | Multilingual error messages when passwords do not match. Example: `"eng": "Passwords is not matching please check your password"` |
|
|
339
|
+
| `capsLock` | object | Multilingual error messages when Caps Lock is enabled. Example: `"eng": "Caps Lock is ON"` |
|
|
245
340
|
|
|
246
|
-
|
|
341
|
+
---
|
|
247
342
|
|
|
248
|
-
|
|
249
|
-
|
|
250
|
-
|
|
|
251
|
-
|
|
|
252
|
-
| `
|
|
343
|
+
#### Labels Section
|
|
344
|
+
|
|
345
|
+
| Property | Type | Description |
|
|
346
|
+
| ------------------ | ------ | -------------------------------------------------------------------------------- |
|
|
347
|
+
| `password_confirm` | object | Multilingual label for confirming password. Example: `"eng": "Confirm Password"` |
|
|
348
|
+
| `capturePhoto` | object | Label for capturing photo. Example: `"eng": "Capture Photo"` |
|
|
349
|
+
| `clickToUpload` | object | Label for click-to-upload buttons. Example: `"eng": "Click to upload"` |
|
|
350
|
+
| `docType` | object | Label for document type selection. Example: `"eng": "Document Type"` |
|
|
351
|
+
| `docRef` | object | Label for document reference ID. Example: `"eng": "Document Reference ID"` |
|
|
352
|
+
| `proofOfDoc` | object | Label for proof of document. Example: `"eng": "Proof Of Document"` |
|
|
353
|
+
|
|
354
|
+
---
|
|
253
355
|
|
|
356
|
+
#### Placeholders Section
|
|
254
357
|
|
|
358
|
+
| Property | Type | Description |
|
|
359
|
+
| ------------------ | ------ | ---------------------------------------------------------------------------------------------- |
|
|
360
|
+
| `password_confirm` | object | Placeholder for confirm password. Example: `"eng": "Enter your confirm password"` |
|
|
361
|
+
| `docType` | object | Placeholder for document type selection. Example: `"eng": "Select an option"` |
|
|
362
|
+
| `docRef` | object | Placeholder for document reference ID. Example: `"eng": "Enter Reference ID here"` |
|
|
363
|
+
| `proofOfDoc` | object | Placeholder for proof of document upload. Example: `"eng": "Click to upload or drag and drop"` |
|
|
364
|
+
|
|
365
|
+
### Language Section (mandatory)
|
|
366
|
+
|
|
367
|
+
| Property | Type | Description |
|
|
368
|
+
| ------------- | ------ | ------------------------------------------------------------------------------------------ |
|
|
369
|
+
| `mandatory` | array | List of mandatory language codes that must be present in the schema. |
|
|
370
|
+
| `optional` | array | List of optional language codes that may be included if available. |
|
|
371
|
+
| `langCodeMap` | object | Bi-directional mapping between 2-letter and 3-letter language codes (e.g., `eng` ↔ `en`). |
|
|
255
372
|
|
|
256
373
|
### Additional Configuration
|
|
257
374
|
|
|
@@ -287,9 +404,9 @@ The form builder supports Google reCAPTCHA v2 integration. To enable reCAPTCHA:
|
|
|
287
404
|
|
|
288
405
|
```javascript
|
|
289
406
|
recaptcha: {
|
|
290
|
-
siteKey: 'your-recaptcha-site-key',
|
|
291
|
-
enabled: true,
|
|
292
|
-
language: '
|
|
407
|
+
siteKey: 'your-recaptcha-site-key', // Required
|
|
408
|
+
enabled: true, // Optional, defaults to true
|
|
409
|
+
language: 'eng' // Optional, defaults to form's current
|
|
293
410
|
}
|
|
294
411
|
```
|
|
295
412
|
|
|
@@ -425,9 +542,9 @@ This will generate:
|
|
|
425
542
|
npm link
|
|
426
543
|
```
|
|
427
544
|
2. Now go to the application, where you want to use `json-form-builder` library, and run the below command
|
|
428
|
-
|
|
429
|
-
|
|
430
|
-
|
|
545
|
+
```bash
|
|
546
|
+
npm link @mosip/json-form-builder
|
|
547
|
+
```
|
|
431
548
|
3. This will create a link between the library and application, after that if any changes has been done in the library, just run the below command and it will reflect in the application as well
|
|
432
549
|
```bash
|
|
433
550
|
npm run build
|