Advanced Form Building

Overview

This article covers advanced form building techniques including field types, conditional logic, expressions, validation, and layout options. For basic form creation, see Building Forms.

Field Types

Qik supports a wide range of field types for collecting different kinds of data:

Field Widgets

Widgets control how a field is displayed to the user. Common widgets include:

• input — Standard text input
• textarea — Multi-line text area
• richtext — Rich text editor with formatting
• select — Dropdown selection
• checkbox — Checkbox toggle
• datepicker — Calendar date picker
• timefield — Time selector
• color — Colour picker
• timezone — Timezone selector
• filter — Filter builder widget

Field Configuration

Minimum and Maximum

Control how many values a field accepts:

• minimum: 1 — Field is required (at least one value)
• minimum: 0 — Field is optional
• maximum: 1 — Only one value allowed
• maximum: 0 — Unlimited values (creates a repeatable/list field)

Options (for Select fields)

Define the choices available in a dropdown by providing an array of options, each with a title (display text) and value (stored value).

Validation

• minValue / maxValue — Set numeric range limits for number fields
• minLength / maxLength — Set character length limits for text fields
• readOnly — Display the field but prevent editing

Expressions

Expressions are powerful formulas that let fields react dynamically to other field values. They are written as JavaScript expressions and have access to the current form data via the model variable.

Common Expression Types

• show — Conditionally show/hide the field. Example: model.hasAddress only shows the address field when a checkbox is ticked.
• hide — The inverse of show. Hide the field when the expression is true.
• required — Dynamically make a field required. Example: model.type === 'business' makes ABN required only for business types.
• defaultValue — Pre-fill a field based on other values. Example: model.title copies the title field as a default.
• value — Force a calculated value. Example: model.title + 'Form' generates a key from the title.
• referenceType — Dynamically set which content type a reference field should browse.

Expression Examples

• model.country === 'AU' — Only show this field when the selected country is Australia
• model.quantity * model.price — Calculate a total from other fields
• model.firstName + ' ' + model.lastName — Combine fields into a full name

Group Fields

Group fields let you nest multiple fields inside a container. This is useful for:

• Repeatable sections — Set maximum to 0 on a group to allow users to add multiple instances (e.g. multiple addresses)
• Logical grouping — Organise related fields together with a group label
• Collapsible sections — Set collapsible: true to let users expand/collapse groups
• Inline layout — Set sameLine: true to display group fields side by side

Field Templates

Qik includes pre-built field templates for common data patterns:

• Person — First name, last name, email, phone
• Address — Street, city, state, postcode, country

Templates speed up form creation by providing pre-configured field groups you can add in one click.

Tips

• Use expressions to create smart forms that adapt based on user input
• Set visualHide: true on fields you want to compute automatically but not show to the user
• Use group fields with asObject: true to store nested data cleanly
• Test your conditional logic by filling out the form yourself before publishing

FAQs