FormFlow Navigation

The Portal Connector version 6.0 and later includes the FormFlow Navigation feature. FormFlow Navigation provides users an interactive visual overview of the steps in a FormFlow, allowing the user to easily follow their progression through multi-step forms. Advanced features, such as clickable non-linear navigation and querystring tracking of a user's navigation path, allow for a highly customizable user experience. Here are the different options for configuring FormFlow Navigation.

  • Basic Configuration
  • Appearance Options
  • Indicator Icons
  • User Navigation
  • QueryString Tracking

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.


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

    Example of the Horizontal Orientation style:

    FormFlow Horizontal Nav

    Example of the Vertical Orientation style:

    FormFlow Vertical Nav

    Note: The Vertical Orientation option creates a Bootstrap column which is fully responsive and should be considered for instances where mobile design is a priority.


    • 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.

    FormFlow Visual options

    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. FormFlow Navigation custom Icons
    3. 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:

    4. Locate the ID
    5. FormFlow Navigation custom Icons
    6. 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.
    7. Save and Close the FormFlow designer.
    8. 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.
    FormFlow Navigation  Linking


    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.

    Note: The Allow Navigation option cannot be enabled to when using querystring tracking.     
    FormFlow Navigation querystring tracking