Workspace

• Left palette: components are grouped into categories — "Basic" and "Layout" are always available; the "Advanced" and "Data" categories appear after enabling Advanced Mode. The top of the palette has a live search by component name.
• Working canvas: an interactive mock-up of the future form. A new component is inserted by dragging or by clicking a palette item (it is added to the end of the form).
• Quick actions panel: appears when you hover over a component on the canvas.

Component Actions

Working in Multi-Page Mode

• Each page is a separate tab above the canvas. Add pages with the "+ Page" button.
• The page title is shown to the respondent in the navigation; configure it in the page properties.
• Pages can be renamed, reordered by dragging and deleted.
• The form submission button is automatically placed on the last page.
• Validation checks the current page before moving to the next one: the respondent cannot "leave" with unfilled required fields.

Display Tab

Data Tab

Validation Tab

API Properties Tab

Conditional Visibility Tab

Layout Tab

Logic Tab Advanced

Rules of the form "when trigger → perform action". Full description — in the Advanced Mode section.

1. Specify whether the component should be displayed when the condition is met (True) or when it is not (False).
2. Select the source field of the condition from the dropdown of all form components.
3. Set the value to compare. The condition fires on an exact match of the answer with the specified value.

Fields hidden by a condition are not included in the submission unless explicitly allowed in the component settings. For complex conditions (multiple fields at once, number comparisons, computed expressions) use Advanced Mode — JSONLogic conditions.

Secure File Processing Pipeline

1. The respondent selects a file in the form.
2. The file is sent to the platform's protected file gateway and placed in a temporary isolated buffer.
3. The ClamAV service scans the file for viruses and malicious signatures.
4. A clean file is saved to protected S3 storage, and a safe unique file UUID is written into the form submission.
5. If a virus is detected — the upload is blocked and the file is immediately destroyed.

The maximum file size is set by an administrator in "System Settings". Programmatic downloading of uploaded files and access policies are described in the File Downloads (File API) section.

📋 Scenario 1. IIN/BIN field with a mask and validation

1. Add a Text Field, name it "IIN/BIN".
2. In "Display" set the Input Mask 999999999999 — exactly 12 digits — and Browser Autocomplete = off.
3. In the "Validation" tab: enable Required, set the Regular expression ^\d{12}$ and a clear error text: "The IIN/BIN consists of 12 digits".
4. In "API Properties" check the field key — for example, iin_bin: reports and webhooks will receive the value under this name.

Result: the respondent physically cannot enter letters or extra digits, and the server rejects a wrong length even if the form is submitted programmatically.

🗺 Scenario 2. Cascading lists "Region → City"

1. Create two Dropdown (Select) fields: "Region" and "City".
2. Set both to Data source type = URL and the dictionary address (your own REST endpoint or a platform dictionary /api/v1/dictionaries/{code}).
3. For the "City" list, in the Refresh Options On field select the "Region" component — the city list will reload when the region changes.
4. Enable Clear Value On Refresh Options — when the region changes, the previously selected city resets (otherwise a city from a foreign region remains).
5. In the city URL source, pass the selected region as a parameter: ?region={{ data.region }} — this way the server returns only matching cities.

Enable Lazy Load Data on both lists so the dictionaries load only when opened, not on form load.

✅ Scenario 3. Data processing consent checkbox

1. Add a Checkbox labeled "I consent to the processing of personal data".
2. In the "Validation" tab enable Required and set the error text: "Consent to personal data processing is required".
3. Place the checkbox as the last field before the submit button; add the policy link via a Content (Text Block) above the checkbox.

Do not set "Default value = checked" for the checkbox: consent must be a deliberate action.

💾 Scenario 4. A "Save draft" button

1. Add a Button next to the main submit button.
2. In "Action" choose Save in state and specify a state name, for example draft.
3. Turn off Show Validations and Disable on invalid — a draft must save even with unfilled required fields.
4. Set the button theme to "secondary" to visually distinguish it from the main submit button.

For periodic forms, drafts work together with the "Continue current report" setting — the respondent can fill in the survey gradually during the period. Details: Periodic Reporting.

👨‍👩‍👧 Scenario 5. A "Family members" table with limits

1. Add a Data Grid (Table) "Family members".
2. Drag fields inside: full name (Text Field), date of birth (Date & Time), degree of kinship (a dictionary-based Dropdown).
3. In the "Validation" tab set Minimum/Maximum rows — for example, minimum 1, maximum 10.
4. In "Add Another Text" write "+ Add a family member", and set "Number of Rows" to 1.

In the Excel export every table row lands in the response as a separate object of the family_members array — identical field keys inside the rows are mandatory.

📚 Scenario 6. A dropdown from a platform dictionary

1. Create a Dropdown (Select), data source — URL.
2. Specify the dictionary address: /api/v1/dictionaries/{dictionary code} — the data is managed in the reference data catalog, without rebuilding the form.
3. Set the Value Property according to the dictionary structure (for example, code) and configure the caption with the Item Template.
4. Enable the "Only available items" check so the respondent cannot submit a value outside the dictionary.

When the reference data is updated, the form picks up the new options automatically — no form revision required.

What It Unlocks

• The "Advanced" and "Data" palette categories: specialized fields and data containers.
• The "JSON" button on components: direct editing of any field's JSON schema.
• The "Logic" tab in the component properties dialog (see below).
• Calculated value: a JavaScript expression that automatically computes the field value from other responses (for example, a table sum).
• Custom JS validation: arbitrary value checking with a JavaScript function.
• JSONLogic: compound visibility and validation conditions in a declarative format.
• Server-side value recalculation and allowing manual override of calculated fields.

The full list of JS settings with available variables and code examples — in the JavaScript Properties of Components section.

The "Logic" Tab

Extended logic is described by rules of the form "when trigger → perform action":

• Triggers: a simple field condition, a JSONLogic expression or a JavaScript function.
• Actions: change a component property (for example, make a field required), change state, merge part of the schema, run arbitrary code.

This is how scenarios like "if the loan amount is above 1 000 000 — show the guarantors block and make the IIN field required" are implemented.

Available Variables (Common Context)

The same variables are available in all JS entry points:

Reference other fields by their Property Name (the "API Properties" tab); for Radios, Selects and Checkbox Groups — by the option's value, not its label.

All JavaScript Entry Points

show = (data.income < 45000) &&
  (data.maritalStatus == 'single' || data.maritalStatus == 'widowed');

value = (data.items || [])
  .reduce((sum, row) => sum + (Number(row.amount) || 0), 0);

valid = (input === data.email)
  ? true : 'Email addresses do not match';

values = [
  { label: 'Option A', value: 'a' },
  { label: 'Option B', value: 'b' }
];