Form
Last updated
Last updated
The form is an important part of a interaction page which lets you add and edit your data. There are two ways to add a form to your canvas. The most simple way is to drag the form to the canvas. Another way is to drag a data field to your canvas (without first creating the empty form), and select "Create form". When you add a Form to your template, a grey box with text appears, for now this is still an empty form. You can add content by dragging fields or a complete list to the form.
Form items is what makes a form useful and what you use to get information for specific fields in your data model from user interaction. You can see a few different types of fields being used in the image above. Every data type has their own form item properties and appearance settings with different visual results.
Check the Ignore User Input information on how to prevent validation for a cancel action.
Here are the options most form items have in common:
| Property | Description |
|---|---|
Label | Lets you change the text in front of the input field. It uses the name of the datamodel field as default label. |
Visible when | This is a boolean expressions that lets you hide the Form item. |
Behavior Required | Makes this field a required field you have to fill in before leaving this page. You can overwrite this by using the ignore user input option on an exit in your flowchart. |
On Change | Changes what happens when the content in a field changes.
|
Appearance Display as | The text form item has three different appearance options:
|
Input mode | The input mode changes how the input text is shown in the runtime.
|
Input mode when | Expression field for when a the selected input mode should be activated. When false default mode is used. |
Width | Width of the field in pixels or implicit. |
Help text | Input fields also supports a help text that is shown below the field. See image below. |
When a text field is added to a form it has a few field specific properties:
| Property | Description |
|---|---|
Hint text | implicit text or expression field for the hint text that is shown in an empty input field. (image Help, Hint, en Postfix example above) |
Postfix text | implicit text or expression field for a postfix text that is added at the end of the input field. (image Help, Hint, en Postfix example above) |
Auto completion (browser) | Enable browser level auto completion, this will open a extra property section you can find more at the end of this page. |
Auto completion (data model) | Enable auto completion on the based on a list in your project. This will open a overly prompting you to select a list to base the auto completion on, more about that at the end of this page. |
This is a field that behaves similarly as a text field but only allows numbers as input.
The numeric input field also supports a help text that is shown below the field, a hint text that is shown in an empty input field and a postfix text that is added at the end of the input field. You can see what these look like in the image: help, hint and postfix example.
| Property | Description |
|---|---|
Behavior Number of decimals | Select the amount of decimals allowed to enter in this field. 0-100 |
A list of radio buttons or a dropdown field of options in a concept set.
| Property | Description |
|---|---|
Ontology query | Here you can add a ontology query to a concept form item. With this you can filter concepts depending on a query. Find out how: Concept Queries. |
Filter expression | Expression field for the use of a filter on your concept set to filter out specific options. |
Appearance Display as |
|
Option Text | An expression that lets you set the label used for the options. Default uses the name of the concept for that option. |
Default text (Dropdown) | The text displayed when no option is selected. Default or empty selects the first option. |
Column count (Vertical) | Amount of columns used for the options. It will try to keep the same amount of options in each column. |
A list of concepts from a concept set with multi select boxes.
| Property | Description |
|---|---|
Ontology query | Here you can add a ontology query to a concept form item. With this you can filter concepts depending on a query. Find out how: Concept Queries. |
Filter expression | Expression field for the use of a filter on your concept set to filter out specific options. |
Option Text | An expression that lets you set the label used for the options. Default uses the name of the concept for that option. |
Checkbox orientation | |
Column count (Vertical) | Amount of columns used for the options. It will try to keep the same amount of options in each column. |
The Boolean form item has the following appearance options:
Appearance Display as |
|
Label text (Yes) | The label for the Yes option, this can be explicit or an expression. |
Label text (no) | The label for the No option, this can be explicit or an expression. |
Help text | A text shown below the options |
The Date form item has the following options:
Appearance Display as |
You will find what these options look like in the image below with the help text option used to represent the chosen option. |
Include time | Adds a time input field |
Translate to local time | Translate the time to the local time set on the device of the user. |
Help text | A text shown below the input field in the image below it is used to name the display as property. |
Auto-completion options provide suggestions to users as they fill in specific fields in a web browser. There are two types of auto-completions available: one based on the browser's suggestions and another based on a list from your data model. Fields that are not saved in a database, known as transient fields, can use both types of auto-completion. However, fields directly sourced from a data model list can only utilize the browser's auto-completion. The available browser auto-completion options depend on the "display as" property. For fields displayed as a single line, both types of auto-completion are supported. Multi-line fields do not support auto-completion, and for password fields, only auto-completion types related to passwords are allowed.
Disable auto-completion
Depending on your settings browsers will try to add auto completion options when it recognizes a field is used for similar content.
You can prevent this by setting the auto-completion to browser and using the 'General' option with the 'Type' setting off.
This feature enables the use of the browser's built-in auto-completion functionality for input fields. By specifying the auto-completion type in the field properties, users can benefit from suggestions and auto-fill options provided by their browser, enhancing the efficiency and user experience of form filling. The implementation of this feature heavily depends on the browser being used and may be treated as suggestions in some cases. When the browser setting is enabled, two new properties become available for configuration.
The first property is "Auto completion type," where you can select the category for auto completion in this field. Most browsers interpret "General" as a tag to remember the specific field, displaying previous values whenever the field is accessed. The "General" option also allows you to exclude the field from auto completion, which can be useful for security code fields, for example.
When any other auto completion type is selected, a more specific property called "Type" becomes available. Here, you can choose the actual completion type for the field, such as a name or an address line.
Additionally, there are options for an Autocomplete prefix and a contact prefix. The Autocomplete prefix allows you to specify whether the field is for billing information, shipping, or not specific. The contact prefix is specifically intended for contact fields and enables you to indicate the relation with the contact, such as home, work, or mobile information.
To be able to use this option make a session field or transient field in the form to fill in for the user and save the data after the fields are filled. When the option auto completion (data model) option is chosen a overlay with your datamodel is opened. Here you select the database list used for the auto completion. This will add a extra section in the property pane called Auto completion (data model)
| Property | Description |
|---|---|
Auto selection first option | When this is toggled on the first suggestion is selected and can be filled in with enter. When its off you have to select the option before it can be filled in. |
Source | This is the data list that should be used for the suggestions. |
Suggestion text | Property for selecting the label text for the suggestions. This has to end with the text datatype. |
Search mode | Choice between contains where the options only need to contain the text entry, or it has to start with the text entry. |
Min characters | Amount of characters needed before suggestions are given. |
Max suggestion | Maximum amount of suggestions given by your browser. |
Choose which way to orient the options. Top Vertical
