FormView

1import { YeriaApp } from '@numerum-tech/yeriasdk';
2
3const yeriaApp = new YeriaApp({ appId: 'my-app' });
4
5const form = yeriaApp
6    .createFormView('user-registration', 'User Registration')
7    .setIntro('Please fill in all required fields')
8    .addTextField('firstName', 'First Name', true, 50)
9    .addTextField('lastName', 'Last Name', true, 50)
10    .addEmailField('email', 'Email Address', true)
11    .addPhoneField('phone', 'Phone Number', false)
12    .submitButton('Create Account', 'POST');
13
14const response = yeriaApp.serve(form);

1const form = yeriaApp
2    .createFormView('survey', 'Customer Survey')
3    .addSelectField('country', 'Country', true, [
4        { label: 'France', value: 'FR' },
5        { label: 'Canada', value: 'CA' },
6        { label: 'Belgium', value: 'BE' }
7    ])
8    .addSelectField('rating', 'Rating', true, [
9        { label: 'Excellent', value: 5 },
10        { label: 'Good', value: 4 },
11        { label: 'Average', value: 3 },
12        { label: 'Poor', value: 2 },
13        { label: 'Very Poor', value: 1 }
14    ])
15    .submitButton('Submit Survey', 'POST');

1const form = yeriaApp
2    .createFormView('document-upload', 'Upload Document')
3    .addFileField('document', 'Document', true, [
4        'application/pdf',
5        'image/jpeg',
6        'image/png'
7    ])
8    .addPhotoField('photo', 'Profile Photo', false, ['jpeg', 'png'], true)
9    .submitButton('Upload', 'POST');

1const form = yeriaApp
2    .createFormView('incident-report', 'Report an Incident')
3    .addTextField('summary', 'What happened', true, 200)
4    .addAudioField('statement', 'Spoken statement', false, {
5        maxDuration: 120,      // seconds
6        minDuration: 2,        // rejects an accidental tap-and-release
7        source: 'record'       // microphone only — no picking an old file
8    })
9    .addVideoField('evidence', 'Video evidence', false, {
10        maxDuration: 30,       // REQUIRED — this is what bounds the upload size
11        quality: 'low',        // ~480p; ~7 MB per minute
12        source: 'both',        // record now, or pick from the gallery
13        maxSize: 15 * 1024 * 1024
14    })
15    .submitButton('Send report', 'POST');

1const form = yeriaApp
2    .createFormView('location-form', 'Record Location')
3    .addGPSField('location', 'Your Location', true, true, {
4        altitude: true,
5        precision: true
6    })
7    .addPlusCodeField('pluscode', 'Plus Code', false, true)
8    .submitButton('Save Location', 'POST');

1const form = yeriaApp
2    .createFormView('appointment', 'Schedule Appointment')
3    .addDateField('appointmentDate', 'Appointment Date', true, '2025-01-01', '2025-12-31')
4    .addTextField('notes', 'Additional Notes', false)
5    .submitButton('Book Appointment', 'POST');

1const form = yeriaApp
2    .createFormView('edit-profile', 'Edit Profile')
3    .addTextField('name', 'Full Name', true)
4    .addEmailField('email', 'Email', true)
5    .addSelectField('country', 'Country', false, [
6        { label: 'France', value: 'FR' },
7        { label: 'Canada', value: 'CA' }
8    ]);
9
10// Inject pre-filled data
11form.injectData({
12    name: 'John Doe',
13    email: 'john@example.com',
14    country: 'FR'  // Automatically selects the option with value 'FR'
15});
16
17form.submitButton('Update Profile', 'PUT');

1const form = yeriaApp
2    .createFormView('registration', 'Register')
3    .addPasswordField('password', 'Password', true, 8)
4    .addTextField('username', 'Username', true)
5    .addField('text', 'username', 'Username', {
6        required: true,
7        minLength: 3,
8        maxLength: 20,
9        pattern: /^[a-zA-Z0-9_]+$/
10    })
11    .submitButton('Register', 'POST');

1const form = yeriaApp
2    .createFormView('registration', 'User Registration')
3    .addTextField('firstName', 'First Name', true)
4    .addTextField('lastName', 'Last Name', true)
5    .addSeparator()  // Visual separator between sections
6    .addEmailField('email', 'Email', true)
7    .addPhoneField('phone', 'Phone', false)
8    .addSeparator('billing-separator')  // With explicit ID
9    .addTextField('address', 'Address', true)
10    .addTextField('city', 'City', true)
11    .submitButton('Register', 'POST');

1const form = yeriaApp
2    .createFormView('step-1', 'Personal Information')
3    .belongsToProcess('onboarding', {
4        processName: 'User Onboarding',
5        currentStep: 1,
6        totalSteps: 3,
7        stepName: 'Personal Info',
8        canGoBack: false,
9        canSkip: false
10    })
11    .addTextField('firstName', 'First Name', true)
12    .addTextField('lastName', 'Last Name', true)
13    .submitButton('Next', 'POST');

1{
2  "id": "user-registration",
3  "type": "Form",
4  "content": {
5    "title": "User Registration",
6    "intro": "Please fill in your information to create an account",
7    "submit": {
8      "text": "Register",
9      "method": "POST",
10      "confirmMessage": "Are you sure you want to submit?"
11    },
12    "fields": [
13      {
14        "fieldType": "text",
15        "fieldId": "firstName",
16        "fieldLabel": "First Name",
17        "required": true,
18        "placeholder": "Enter your first name",
19        "maxLength": 50,
20        "helpText": "Your legal first name"
21      },
22      {
23        "fieldType": "text",
24        "fieldId": "lastName",
25        "fieldLabel": "Last Name",
26        "required": true,
27        "placeholder": "Enter your last name",
28        "maxLength": 50
29      },
30      {
31        "fieldType": "separator",
32        "fieldId": "separator-1234567890-1234",
33        "fieldLabel": ""
34      },
35      {
36        "fieldType": "email",
37        "fieldId": "email",
38        "fieldLabel": "Email Address",
39        "required": true,
40        "placeholder": "you@example.com",
41        "pattern": "^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$"
42      },
43      {
44        "fieldType": "phone",
45        "fieldId": "phone",
46        "fieldLabel": "Phone Number",
47        "required": false,
48        "placeholder": "+1234567890"
49      },
50      {
51        "fieldType": "select",
52        "fieldId": "country",
53        "fieldLabel": "Country",
54        "required": true,
55        "options": [
56          {
57            "label": "France",
58            "value": "FR",
59            "selected": false
60          },
61          {
62            "label": "United States",
63            "value": "US",
64            "selected": true
65          },
66          {
67            "label": "Canada",
68            "value": "CA",
69            "selected": false
70          }
71        ]
72      },
73      {
74        "fieldType": "date",
75        "fieldId": "birthDate",
76        "fieldLabel": "Date of Birth",
77        "required": true,
78        "minDate": "1900-01-01",
79        "maxDate": "2010-12-31"
80      },
81      {
82        "fieldType": "number",
83        "fieldId": "age",
84        "fieldLabel": "Age",
85        "required": false,
86        "min": 18,
87        "max": 120,
88        "value": 25
89      },
90      {
91        "fieldType": "audio",
92        "fieldId": "statement",
93        "fieldLabel": "Spoken statement",
94        "required": false,
95        "accept": ["audio/mp4", "audio/mpeg", "audio/wav", "audio/aac"],
96        "maxDuration": 120,
97        "minDuration": 2,
98        "source": "record"
99      },
100      {
101        "fieldType": "video",
102        "fieldId": "evidence",
103        "fieldLabel": "Video evidence",
104        "required": false,
105        "accept": ["video/mp4", "video/quicktime", "video/webm"],
106        "maxDuration": 30,
107        "quality": "low",
108        "source": "both",
109        "maxSize": 15728640
110      }
111    ]
112  },
113  "metadata": {
114    "version": "1.0.0",
115    "createdAt": "2025-01-28T10:00:00.000Z"
116  }
117}