Form field: buttons

Modified on Thu, 20 Jul, 2023 at 10:12 AM

The icon for elements of type Buttons.

Functionality

The form element button adds buttons to the current form. Each button element may contain multiple buttons. By default, this element contains two buttons, back and next. To add or delete buttons, go to the section value on the right hand side. For each button, you can select the action when the user clicks the button. Currently available actions are moving to a different page of the form, submitting the form, or saving the form when the user wishes to continue filling out the form at a later time. For more details, see the section values below.

Properties

Overview of the standard properties

This section describes only those properties that are different from the standard.

Style

Additional base properties for buttons. You can specify how the buttons should be aligned.

Name	Description
Alignment	Changes the alignment (left, right, centre) of the buttons.

Value

For every button, you can enter the text that is shown in the form, and a name used for the HTML. You can also choose which action to perform when the button is pressed.

This form element possesses the following additional properties for the section Value.

Name	Beschreibung
Text	The text or label of the button the user sees.
Name	The value of the HTML attribute name of the HTML input. This name can be used for selecting the button via JavaScript or CSS. For example the CSS [name=btnSubmit] { width:100%;} makes the button named btnSubmit take up the entire available width.
Action	Select what should happen when the user clicks the button.

Add and delete buttons

A new row for adding new button is added automatically as neccessary. To delete a button, press on the icon on the left. You can also move the buttons via drag&drop to change their order (use icon for dragging).

Available actions

Each button lets you specify an action. You can also choose whether to validate the form or not. When you validate the form, checks are done to ensure that no required fields were left empty and that no invalid data was entered.

The following actions are available.

Name	Beschreibung
No action	No action happens by clicking the button. You can use this option if your own action should get implemented with Javascript. The following example displays a short message if you press the button with the name btnAlert. $('[name=btnAlert]').click(() => alert("The button was pressed."));
Page x	Navigates to the selected page. There is a separate action for each page.
Page x + check	Navigates to the selected page, unless any form fields on the current page are invalid (missing input or wrong input).
Submit	Sends the form to the server and creates a new form record. The form is sent even if it is invalid.
Sumbit + check	Checks whether the form is valid and if it is, sends the form to the server. Otherwise, informs the user about missing or invalid data by showing error messages.
Submit no save	Sends the form to the server, without creating a new form record. This action should be used if you only need to run a workflow.
Submit no save popup	Sends the form to the server, without creating a new form record. The returned response page is shown as a popup. This action should be used if you only need to run a workflow. One use case for this action is to create some files on the server and return those files to the user while keeping the form open. See also the workflow action file download.
Save	Saves the form data on the server, but do not run any workflow. Usually this is used to let the user save their current progress and fill out the rest of the form later. This does not validate the form. This sets the process to a locked state, as no final submit has yet been made, and should therefore be used for the initial filling process. For a later saving, a submit button is recommended, because the data will be overwritten.
Save + check	Validates the form, and if it is valid, saves the form data on the server only. Usually this is used to let the user save their current progress and fill out the rest of the form later. This sets the process to a locked state, as no final submit has yet been made, and should therefore be used for the initial filling process. For a later saving, a submit button is recommended, because the data will be overwritten.