Page Modes

Form pages are displayed in one of three modes, depending upon the action being performed. The mode is set when the page is navigated to. You'll most commonly see modes used when a summary of a form is being displayed and you want to go back and edit a page that's already been filled out.

Form fields, particularly the Wizard Buttons - Repeating Pages and Wizard Buttons, use these modes to determine which buttons should be displayed.

If you are writing your own navigation functions in buttons or Handlebars templates, you can navigate to a page or page instance and invoke a particular mode.

Standard Button and Page Behaviour

You can query the mode of a page using .getPageMode.

Default Mode

The default mode (or no mode) is used when user is interacting normally with a page.

In this mode the repeating wizard button field displays its add and cancel buttons (note these may be hidden for other reasons, like the maximum number of instances being reached) and the wizard button field displays its navigation and reset buttons.

Edit Mode

Edit mode is used when updating a page or page instance that has already been saved to the session, ie you are going back to a page that has already been completed. This is not the same as simply navigating "back" to a page, which just reloads it in default mode.

In this mode the repeating wizard button field displays its update and cancel buttons, which are used to edit this particular page instance. The wizard button field displays update and cancel buttons. See the Summaries - Check Answers Page tutorial for an example.

When you navigate to a page in edit mode, the default behaviour of the update and cancel buttons is to take you back to the page you came from. Both field types let you write custom functions to change this behaviour.

Remove Mode

This mode is only used by the repeating wizard button field when a page instance is being deleted. The fields on the page are placed into a read only state. The repeating wizard buttons display the confirm and cancel buttons. Navigation wizard buttons will be hidden.

Page Modes in Navigation Functions

A standard navigation function, added to button fields or in Handlebars navigation buttons, returns the name of the page to navigate to as a string. This default behaviour will take you back or forwards to a non-repeating page, or to the first instance (going forwards) or last instance (going back) of a repeating page.

For example, to navigate to a particular page in a button function:

function(helper, defaultPage, sessionData, defaultPageInstance) {
    let theNextPage = 'PAGE1';
    return theNextPage;
}

Invoking a Mode

To navigate to particular page or page instance in a certain mode, return an object in your navigation function. The object properties are:

• pageName - The name of the page to navigate to
• pageInstance - Only used with repeating pages. The index of an existing page instance to navigate to. It is also possible to add a new instance using .utilAddNewPageInstance
• mode - An optional property to invoke the edit or remove mode. Either helper.PAGE_MODES.EDIT or helper.PAGE_MODES.REMOVE. Remove mode can only be used with repeating pages. If not set, the default is "no mode"

function(helper, defaultPage, sessionData, defaultPageInstance) {
    let thePage = {
        pageName: 'PAGE1',
        pageInstance: 0,
        mode: helper.PAGE_MODES.EDIT
    };
    return thePage;
}

Handlebars Templates

For information on buttons in Handlebars templates, see Navigation Buttons.