Toggle menu

Navigation Buttons

The NAVIGATIONBUTTON helper generates a button with the same markup as the navigation button field type. It's useful if you need to insert a button into your template or dynamically set button attributes.

Parameters

{{NAVIGATIONBUTTON action="BACK" label="Edit" pageName="CONTACTDETAILS"}}

NameDescription
actionThis is the only required attribute. The navigation action, one of:
 
  • "BACKLINK": Behaves in the same way as BACK but the button appears as a link
  • "BACK" : Displays the previous form page, no validation is performed, no data is saved, no actions are triggered
  • "PREV" : Displays the previous form page, the current page must pass validation and its data is saved in this session. No actions are performed.
  • "PREVACTIONS" : Displays the previous form page, the current page must pass validation and its data is saved in this session. Actions are performed.
  • "NEXT" : Displays the next form page. Validation is performed and actions are executed.
  • "NEXTNOACTIONS" : Displays the next form page. Validation is performed. No actions are executed.
  • "FINISH": Submits the form
pageNameThe name of the page to navigate to. If not supplied next and back/previous actions will navigate to the relevant page as ordered in the forms designer
pageInstanceThe index (zero-based) of the page instance to navigate to if you are navigating to a repeating page
pageInstanceActionUsed to add an instance to a repeating page. The only allowed value is "ADD"
modeWhen navigating to an instance of a repeating page, one of "EDIT" or "REMOVE". See Page Modes
labelA label for the button. If not supplied will default to "Next" or "Back" as appropriate for the action
identifierAn optional identifier for the button. The identifier-index can be queried by the .querySubmissionActionIdentifier function (see that article for an example) to identify the buttons and also used in functions that show, hide, enable, disable, focus and trigger buttons
indexUsed in combination with the identifier
extraClassAn optional additional class that will be applied to the input with a "btn--" prefix. For example "contrast" will add the class "btn--contrast" to the input. Contrast is a standard class, others will need to be styled by your site's CSS

Examples

This button will navigate back to PAGE1:

{{NAVIGATIONBUTTON action="BACKLINK" label="Back" pageName="PAGE1"}}

This button placed on PAGE1 will create a new instance of the repeating PAGE2 and navigate to it:

{{NAVIGATIONBUTTON action="NEXT" label="Add" pageName="PAGE2" pageInstanceAction="ADD"}}

These are our standard edit and remove buttons used in summary templates:

{{NAVIGATIONBUTTON action="BACKLINK" label="Edit" extraClass="summaryaction cta-link cta-link--link cta-link--edit" pageName="PAGE1" pageInstance=this.pageInstance mode="EDIT"}}

{{NAVIGATIONBUTTON action="BACKLINK" label="Remove" extraClass="summaryaction cta-link cta-link--link cta-link--delete" pageName="PAGE1" pageInstance=this.pageInstance mode="REMOVE"}}

For information on the page instances this object, see Page Instance Handlebars Helpers.

Button Related Functions

Standard functions for showing, hiding and triggering buttons can be performed on buttons generated by this Handlebars helper. New blockly bocks have been provided to support them. For example:

Hiding a Nav Button
 

Querying Button Actions

The functions .querySubmissionAction, .querySubmissionActionFieldName, .querySubmissionActionIdentifier and .querySubmissionActionLabel all work with these buttons.

Given the following template:

{{NAVIGATIONBUTTON action="NEXT" label="Go to Page 2" pageName="PAGE2" identifier="MYIDENTIFIER" index=0}}

Each would return:

  • helper.querySubmissionAction() - "NEXT"
  • helper.querySubmissionActionFieldName() - "MYTEMPLATE" (this is the name of the Handlebars template field)
  • helper.querySubmissionActionIdentifier() - "MYIDENTIFIER-0"
  • helper.querySubmissionActionLabel() - "Go to Page 2"
Last modified on 05 December 2023

Share this page

Facebook icon Twitter icon email icon

Print

print icon