Components

form

5min

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

This component contains the following components:

  1. avatar-field
  2. text-field
  3. media-field
  4. email-field
  5. number-field
  6. dropdown
  7. checkbox
  8. date-picker
  9. section

These extra components allow for the easy input and collection of data. Using forms, records in a database can be created, updated, or deleted based on user input information.

Form Preview
Form Preview


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. The following components can be used in the form: - avatar-field - choice-field - checkbox - date-picker - dropdown - email-field - field-row - media-field - number-field - section - signature-field - text-field

instanceId

The unique identifier for the form.

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.

State Configuration

Key

Notes

=@ctx.component.state.

data isValid isDirty response

  • State is the variable of the component.

=@ctx.solution.state.

activeItemId now

  • Global state variable that can be used throughout the solution.

Examples and code snippets 

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 (dynamic)

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.

update-form (dynamic)
datasources (dynamic)




Form with formating
Form with formating


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-section (dynamic)




Updated 05 Nov 2024
Doc contributor
Did this page help you?
Yes
No