You can use this widget to make a field or a complete form required. This bars you from executing a node exit if a form or field is not filled in properly. The required field widget can also be enabled in the behavioral properties of a Form item itself.

You use this widget to add buttons to your template. When adding a button you get can choose which kind of action you want the button to do.

• Refresh screen: Refreshes your screen and checks all fields and validations.

• Execute flowchart: Choose a flowchart to be executed upon button press.

• Follow button exit: Choose from existing Node Exits or create a new node exit to follow when button is clicked. This is used to go to the next node in your flowchart, the arrow linked to the exit is where the button will lead to. You can select multiple Node Exits, and for each selected Exit a Button will be added to the canvas.

• Navigate to: Go to a set navigation point upon button press.

• Open hyperlink: Create a button that leads to a hyperlink.

• Download file: This lets you download a file from your application.

After you have chosen the kind of button action you want, the button will appear on your template. It will show a colored box with a text field in it. You can change text shown on the button by selecting it.

The button also has a few button properties that lets you change the appearance and behavior of your button.

Introduction

The dropdown is a component that functions as a list of buttons. When a dropdown button is selected a menu is shown with all the different buttons you added. Every button can have custom functions and can be visibly differentiated from each-other using colors, icons and labels.

Properties

Template Properties

Illustrations

In the image below you see a template editor with a label "Dropdown" and the dropdown component right below the label. When the dropdown is first added to the template it is rendered with just an icon.

You can change what the dropdown item looks like with the Appearance section in the properties pane on the right. In the Image below we have selected the display as button setting and we keep the three dots icon on the right.

This changes the dropdown to have a label and enables your own styling and context on the component. Now you also want to add buttons to the dropdown. This is done with the "Edit menu buttons" button in the properties pane. When this is selected an overlay opens with the content of the selected dropdown. The first time you will see this window:

To add buttons you grab the button from the toolbar and drop it into the yellow box. This adds a button to the menu and the button properties to the properties pane on the right. To add more buttons just drop them into the field, while dragging the button a green bar appears when hovering over a valid location for the button. With a few buttons added it will look like this:

On the right you set the functionality of the button and the set what the button looks like. The behavior settings are the same as a normal button and an explanation of these options can be found here. In the appearance group you can change the text displayed in the buttons to your own text or change it to an expression as label. Here you can also add an icon to the button and chance the color of the button text and icon.

There also is a Free form item. This item lets you customize your form by adding anything to the form item.

The first check mark next to the form widget is the validation rule. You can use this item to add a validation to your interaction page. When you add a validation rule you are prompted with the expression editor. Here you add the expression that should be validated. The validation rule overrides the ignore user input and will always be checked when leaving a node through a button exit.

Form

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

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.

Here are the options most form items have in common:

Text form item

When a text field is added to a form it has a few field specific properties:

Numeric Form Item

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.

Concept Form Item

Single select

A list of radio buttons or a dropdown field of options in a concept set.

Multi Select:

A list of concepts from a concept set with multi select boxes.

Boolean Form Item

The Boolean form item has the following appearance options:

Date Form Item

The Date form item has the following options:

Auto completion

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.

Browser

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.

Data model

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)

Properties