Space TimelineSpace Timeline

Adding an Action Button to a Page

Owned by Inese Auzina
Last updated: Aug 11, 2020 by Mercedes Rothwell
3 min read

Click on Images to Expand Them

Action Buttons (also called Action fields) are currently the only way to perform some activity from a Docupace Start wizard. Any wizard will need at least one Action button, to allow the end-user to submit the filled-out information. However, there are many ways to use Action buttons in a wizard.

The Action Type defines the functionality of the button. Some additional field settings may be available, depending on the selected Action Type. The most versatile of these is the type Java Script Action, as it allows you to define any action by writing JavaScript code for it. The other action types can be used without programming knowledge.

There are several built-in styles that can be used for the buttons, or, alternatively, you may design your own style in the CSS and Global CSS tabs. To place a new Action Button on a page proceed as follows:

Field

Value

Field

Value

Field Label

Next page >
This is the name of the button that is visible to the user and is displayed on top of an Action button.

Navigate only if form is valid

Selected
When the user clicks this button, Docupace Start will check whether all required fields are filled out and will validate whether the values fit the conditions set in the Validations for each field on the page. If any value is missing or has a validation error, an error message will appear and the user will need to correct the issue before navigating away from this page.

Action Type

Next page
When the user clicks this Action button, the wizard will open the next page according to the configured order of pages.
See the Reference section for the full list of Action Types and their functionality.

Style

Primary
This will make the Action button look according to the Primary style defined in Docupace.
See the Reference section for the full list of built-in styles.

Horizontal Alignment

Center
This will place the Action button in the center of the page.

Column Span

2
The page of the wizard is divided into two invisible columns. Column span 2 means that the field uses space of both columns on the page. In conjunction with Horizontal Alignment = Center, it will place the button in the middle of the page.

Enabled condition

startingPointData['Owner1.Type'] == 'Person'

If the result of this expression evaluates to TRUE or if this setting is left empty, the button will be enabled.

Visibility Condition

startingPointData['Owner1.Type'] != 'Entity'

If the result of this expression evaluates to TRUE or if this setting is left empty, the button will be visible to the user.

Disabled Condition

startingPointData['Owner1.Type'] == 'Entity'

If the result of this expression evaluates to TRUE or if this setting is left empty, the button will be disabled.

New Line

Deselected
If selected, the button will move to a new line on the page.

Size by content

Deselected
If the option is selected, the button will take up only as much space as its text. This would allow to place more than two buttons on the same row. The Column Span and Horizontal Alignment settings in that case would be ignored.

CSS class names

Leave empty, to keep the default styling.
The field allows to enter several space-separated CSS class names defined in CSS/LESS or Global CSS/LESS tab, to override the default Docupace styling.

© Docupace Technologies 2020 | Documentation Dashboard