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"}}
| Name | Description |
|---|---|
| action | This is the only required attribute. The navigation action, one of:
|
| pageName | The 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 |
| pageInstance | The index (zero-based) of the page instance to navigate to if you are navigating to a repeating page |
| pageInstanceAction | Used to add an instance to a repeating page. The only allowed value is "ADD" |
| mode | When navigating to an instance of a repeating page, one of "EDIT" or "REMOVE". See Page Modes |
| label | A label for the button. If not supplied will default to "Next" or "Back" as appropriate for the action |
| identifier | An 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 |
| index | Used in combination with the identifier |
| extraClass | An optional additional class that will be applied to the input with a "btn--" prefix. For example "contrast" will add the class |
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
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:
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"
Share this page
