System StatusSamples on GitHub

form

Using forms in mobile apps enables users to effortlessly input and submit information, enhancing interaction and user engagement.

A component.form acts as a wrapper/container for your app’s fields and UI components. Any component can be added inside the form, including:

  • Nested input field components (text fields, checkboxes, date pickers, etc.)

  • Custom components created in your solution

  • Other Jigx components (like charts, lists, or layouts)

Benefits

  • Form-wide referencing: Each form has a unique instanceId, allowing you to reference the entire form in expressions, actions, or functions. This makes it easier to manage validations, submissions, and state.

  • Unified wrapper: A single component.form can wrap any jig.default children, such as a chart or segmented control, as well as all form input fields like text and email fields. This allows you to mix layouts, charts, and non-field components within the same form without breaking form handling.

  • No need to place multiple forms on a single screen to handle different UI structures or separated field groups. You only need one form wrapper per logical form.

  • The form automatically collects and manages all its nested field components.

Configuration options

Some properties are common to all components, see Common component properties for a list and their configuration options.

Core structure

children

Define the content of the form by adding any components applicable to jig.default. See the list of available components.

instanceId

The unique identifier for the form. The instanceId is a unique identifier assigned to the form component. It allows other parts of the app—such as functions, actions, or conditional logic—to reference this specific form. By using the instanceId, you can programmatically control when the form is shown or hidden, update its content dynamically, or trigger interactions tied to that particular instance.

Other options

isDiscardChangesAlertEnabled

When set to true the modal window preventing accidental deletion of your data without saving will pop up.

initialValues

Specify the data to be used as initialValues for fields in the form. Using the reset-state action with initialValues does not clear the form, it resets the form back to it's initialValue. Tip: For initialValues on a to function isDocument: true in the datasource, this way you don't have to set it up in the individual components. It is set up in one place and the form will match the components to the column names of the datasource. See the example below for Form with initialValue.

State Configuration
Key
Notes

[email protected].

data isValid isDirty response

State is the variable of the component.

[email protected].

activeItemId now

Global state variable that can be used throughout the solution.

Examples and code snippets

Form for creating a record

Simple form
Simple form

Here is an example of a form for creating records in the database. See submit-form for information on how to create a record.

Examples:

See the full example using dynamic data in GitHub.

Form for updating records

Update data form
Update data form

This example shows how a form is used to update an existing records in the database. Notice that a new variable called initialValue: has been added, we load the data that we have stored in the database and then change it. See the execute-entity action for information on how to update a record.

Examples: See the full example using dynamic data in GitHub.

Datasource: See the full datasource for dynamic data in GitHub.

Form with section and field-row

Form with formatting
Form with formatting

This example shows how you can format your form with sections and field-rows to create a visually appealing form.

Examples:

See the full example using dynamic data in GitHub.

Form with initialValue

In this example, you tap on a contact in the contact-list and the new-contact form opens with the contact's details loaded. For initialValues on a form to function the isDocument: true in the datasource is set, this way you don't have to set it up in the individual components. It is set up in one place under InitialValue and the form will match the components to the column names of the datasource.

Form preloaded with data
Form preloaded with data
PrevioustitlesNextgrid

Last updated

Was this helpful?