FormFlow Navigation

Basic Configuration

The FormFlow Navigation feature is disabled by default. To enable navigation, perform the following steps:

1. Click Edit on the FormFlow widget, then select the Navigation tab.
2. Check the Show Navigation option and Save. FormFlow Navigation is now enabled.

Appearance Options

FormFlow Navigation has appearance options available to customize the look of navigation elements.

Orientation

The Orientation dropdown allows you select between Horizontal and Vertical orientations for the navigation.


Example of the Horizontal Orientation style:



Example of the Vertical Orientation style:

Visual

• Show Indicator - Shows or hides the step Indicator. Indicators can be configured as numbers or icons. More information on customizing indicators can be found in the next section on Indicator Icons.
• Show Label - Shows or hides the step the Label.
• Show End Page - Shows or hides the End Page from the navigation. All FormFlows are configured to end on a specified page, which will appear by default in the navigation as the final step.

Indicator Icons

Indicator Icons can be customized individually for each form or step in a FormFlow using Kendo Web Font Icons.

Customizing Indicator Icons

1. In the FormFlow designer, select the step where you would like to add a custom icon. On the right-side of the editor, the Form Configuration panel contains fields to set the Navigation Icon and Navigation Success Icon to represent that form in the FormFlow Navigation.
   • Navigation Icon - The initial Icon representing a form in the navigation before successful submission.
   • Navigation Success Icon - The Icon representing a form in the navigation that has been successfully submitted.

2. Browse the list of available Kendo Web Font Icons and locate the desired Navigation and Navigation Success Icons for the form. View the list of available Kendo Web Font Icons here:

   https://docs.telerik.com/kendo-ui/styles-and-layout/icons-web#list-of-font-icons

3. Locate the ID

4. Enter the Icon names in the Navigation Icon and Navigation Success Icon fields without the ".k-i-" prefix. For example, to set the Navigation Icon to the ".k-i-user" icon seen above, enter "user" in that field, then Save the Form Configuration.
5. Save and Close the FormFlow designer.
6. Finally, Publish the Page.

User Navigation

By deafult, FormFlow Navigation presents a visual representation of the configured FormFlow. Advanced user navigation abilities can be enabled in the Linking section which make the FormFlow Navigation Icons and Labels into clickable links. This enables users to submit forms in a non-linear order, or easily return to specific, previously completed steps.

• Allow Navigation - This will enable the user to navigate between steps in the FormFlow by clicking on the FormFlow Navigation Icons or Labels. Users navigate to any step and submit forms in a non-linear order.
• Is Linear - This option will restrict the users to progressing through the steps of the FormFlow in a linear order. Users may navigate back to any previously submitted form, but may only progress to the next step in order.

QueryString Tracking

FormFlow Navigation features the ability to track a portal user's navigation path, even through more sophisticated FormFlows that employ Loopback Connectors. The "Use querystring to track navigation path" option makes this possible.