Toggle menu

Navigation Button

The navigation button field provides a single button that can be used to navigate to another page on your form. In most situations the Wizard Buttons will be easier to use as they provide intelligent back, next and submit buttons. 

By default a navigation button behaves like the "Next" button in a wizard button. When clicked the fields on the page are validated, actions are performed, and the next page in the forms designer is displayed to the user.

Navigation through your form pages can be controlled by supplying a navigation function, allowing you to write logic that will display different pages depending upon the values entered in the form.

Repeating Pages

If your form includes repeating pages the default behaviour of the button is to navigate between page instances.

For example, consider a three page form with a navigation button on each page, and three instances (ie three repeats) of page two. Once a user has navigated to page three, a navigation button in back mode would navigate through instance three, then two, then one of the repeating page, then back to page one. 

A navigation button can also create page instances if an exact number of instances is specified in your form design. Rather than a user adding instances themselves, if your repeating page settings' minimum and maximum instances are the same and validated, pressing "Next" will add a new page instance and navigate to it until the required number of instances is reached, at which point it will navigate to the next page. If there are zero required instances of a repeating page, it will be skipped.


LabelDescriptionType Name
Button LabelThe label that will appear on the buttonLABEL
Button typeEither "Normal" or "Contrast". Selecting contrast adds the class "btn--contrast", which can then be targeted by the site's style sheetBUTTONTYPE
Is iCM Panel ButtonIf set to true and the form is being displayed as a Form App shortcut within iCM, this button will be rendered as an action in the Actions Panel. The button itself will be hidden on the form. This allows better integration into iCM when neededISICMPANELBUTTON
ShowBy default the button will always be displayed. Use "If not first page" and "If not last page" to hide the button from the first or last page of a formSHOW
Show FunctionThis function is executed server-side as the page loads. If it returns true the button will be shown. The result of the function overrides the standard "Show" settingSHOWFUNCTION
Navigation ModeThis sets the default behaviour of the button if you don't supply a navigation function. The various modes are:

Back, no validation - The default setting allows a user to navigate back to the previous page as if this page hadn't been visited. Values that have been entered on the page won't be saved in the form session and no action fields will be triggered

Back, no validation (link) - This behaves in the same way as no validation, but outputs the button as a link. Back links are generally placed at the top of a page and are not triggered by pressing the Enter key

Back, validate, actions/no actions - In this mode the back button will only navigate away from the current page if there are no validation failures. Any values entered for the fields on the page will be saved in this form session. When performing validation it is also possible to control if action fields are triggered or not. In most circumstances performing actions when navigating back doesn't make sense

Next, validate - Moving to the next page always validates the field inputs and stores their values in the form session. You can control whether or not actions on the page are triggered

See Form Back Buttons for an example
Navigation FunctionThis function determines which page should be displayed when the button is clicked. The default page will change depending on the navigation mode that's been chosen. Your function should return the name of the page to display instead. For example, this function could be added to page 3 of a form (navigating backwards), where page 2 may have been skipped:

Navigation Function - Blockly

The Page Modes article has some example functions, including a description of the three page modes and how to invoke them in your navigation functions
Additional Styling ModifierAn optional CSS modifier for the field. See Common Field Properties for an exampleADDITIONALSTYLINGMODIFIER
DocumentationAdd documentation to your field to help explain any complex functionality to future users. You might include information on what the field does and how it relates to other fields on the form. Notes added here are only ever visible in the Forms Designer, they can be searched for, viewed and downloaded from the action panel. See Common Field Properties for an exampleDOCUMENTATION
Last modified on May 13, 2024

Share this page

Facebook icon Twitter icon email icon


print icon