¶ In this lesson you will
- Paste and edit a form in the Code Editor
- Preview the form as an applicant
- Choose the right component for a need
Code Editor: the whole form as JSON
- Code Editor tab
- The form JSON. Paste a reviewed form here
- Full screen
The wizard and the code editor edit the same JSON. Experienced service managers build the first draft in the code editor (or with the IremboHub assistant), then fine-tune labels in the wizard. Always switch back to the wizard once after pasting: it shows errors the editor accepts.
The demo form on the canvas
- Wizard: drag-and-drop mode
- Fields (21): available field types
- Search components: find a field type
- Travel details: form section
- Full names: text field in the Traveller block
- Add Field: add another field to the block
Preview: test the form exactly as the applicant will see it
- Preview Form: toggle the citizen preview
- Preview Form: see the form as citizens will
- Form Model: see the captured data model
- Travel details: previewed section
- Full names: try typing in the preview
Two fields of the demo form (trimmed)
{
"key": "FullnamesCD10",
"type": "input",
"props": { "label": "Full names", "maxLength": 100, "required": false, "defaultRequired": true },
"expressions": { "props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired" }
},
{
"key": "PhonenumberCD11",
"type": "customphonenumber",
"props": { "label": "Phone number", "required": false, "defaultRequired": true },
"expressions": { "props.required": "!(field?.props?.hideField || field?.hide) && field?.props?.defaultRequired" }
}
- key: unique, used by the workflow and certificate
- type: the component
- props: label, validation and component options
- expressions: rules evaluated while the applicant types. The required pattern is explained in A6b
Pick the right component (all links open the wiki)
| Need | Component | Wiki page |
|---|---|---|
| Text, numbers, dates | input, number, date fields | Input · Number · Date |
| Phone number with country code | customphonenumber | Phone number widget |
| National ID lookup that fills the name | NID widget | NID widget |
| Province → District → Sector → Cell → Village | Location widget (cascading dropdowns) | Location widget |
| Dropdown filled from a partner system | Dropdown with data fetch | Dropdown with fetch |
| A fetch that runs only when a condition is true | Conditional generic fetch | Conditional fetch |
| Documents to upload | Attachment widget | Attachment widget |
| One active application per person | Application uniqueness | Application uniqueness |
| Group, repeat or style fields | Wrappers | Wrappers |
| React to what the applicant typed | Form state | Form state |
Gotcha · widgets that call partners need an endpoint
NID lookups, data-fetch dropdowns and conditional fetches call an integration endpoint by code. If the endpoint does not exist on the environment (or has no mapping), the field shows an error or stays empty. Section C covers this.
¶ Check yourself
The SRD asks for District, Sector, Cell and Village, each list depending on the previous one. What do you use?
- A. Four plain dropdowns with fixed options
- B. A text input with a pattern
- C. The attachment widget
- D. The location widget (cascading dropdowns)
Show the answer
D. The location widget already chains the administrative levels from the central reference data. The demo form uses it (key DISTRICTCD12 and children).
← A5 · Form Builder I: sections, blocks and fields · A6b · Form logic: show, hide, require and validate →