In the first part of the guide, we have explored a variety of built-in navigation features that you can implement in your forms to simplify the filling-out process. But what if you want to have a more sophisticated navigation system in place, which requires some custom-built functionality? Not a problem! This part of the guide will show you how to add a new navigation item with a custom function (not just a default button with a modified caption, but a button that calls any function you assign to it).

If your form or survey requires more than just the default 'Previous', 'Next', and 'Submit' buttons, you can easily add a new navigation element to it and assign such an element with a custom function that will be called when it is clicked. In the following example, we will show how to create a button that allows a respondent to clear their answers on the current page if they need to start over.

First, let's create a simple JSON schema (survey data model) that describes our sample survey's questions and other settings for ice cream shop visitors. You can write such a JSON definition manually or leverage the free full scale demo of Survey Creator, which we developed to enable users to evaluate the functionality of SurveyJS products before they integrate them into their applications.

export const json = {  
  title: "Gelateria PrimaForma",
  description: "A short survey for our ice cream shop visitors. ",
  logo: "https://api.surveyjs.io/private/Surveys/files?name=407d40f1-0de4-4a60-b53c-b7f51a897f43",
  logoWidth: "100px",
  logoHeight: "100px",
  logoFit: "fill",
  pages: [
    {
      name: "page1",
      elements: [
        {
          type: "boolean",
          name: "question1",
          title: "Which flavor(s) did you try today? (Please check all that apply)",
          isRequired: true
        },
        {
            type: "radiogroup",
            name: "question2",
            title: "What type of cone did you choose? (Please select one)",
            isRequired: true,
            choices: ["Cake cone", "Waffle cone", "Sugar cone", "Cup"]
        }
      ]
    },
    {
      name: "page2",
      elements: [
        {
          type: "rating",
          name: "question3",
          title: "How would you rate the quality of the ice cream? (Please select one)",
          isRequired: true,
          rateCount: 4,
          rateMax: 4,
          minRateDescription: "Poor",
          maxRateDescription: "Excellent"
        },
        {
          type: "radiogroup",
          name: "question4",
          title: "How likely are you to visit our ice cream shop again? (Please select one)",
          isRequired: true,
          choices: [
            "Very likely",
            "Somewhat likely",
            "Not sure",
            "Not very likely",
            "Not at all likely"
          ]
        }
      ]
    }
  ],
  widthMode: "static",
  width: "800"
};

Make sure to install the survey-react-ui npm package first (other popular JS frameworks are also supported). Now import SurveyJS Form Library components that will be used to create and render the survey in a React application, a style sheet that implements the default theme, and the JSON schema that we prepared in the previous step. Please refer to the getting started guide to learn how to add SurveyJS Form Library to your React app.

import React from"react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/defaultV2.min.css";
import "./index.css";
import { json } from "./json";

Next, define a SurveyComponent function that holds an object with a new constant survey variable. This variable should be instantiated by passing the json schema to the Model constructor from the survey-core library as a parameter.

The onComplete event raised when a user completes the survey is called on our survey object. To call the function with two parameters (sender and options) when the event is triggered, the add method is called on the onComplete object.

We'll also call the log method on the console object, which logs the survey data to the console in a human-readable JSON string. The JSON.stringify function is used to convert the sender.data object into a string with three spaces of indentation for readability.

This function will return the Survey component from the survey-react-ui library with the model property set to our survey object. This component is responsible for rendering the survey. By passing our survey object as the model property, we tell the Survey component to use our survey object to render the survey.

functionSurveyComponent() {
  const survey = new Model(json);
  survey.onComplete.add((sender, options) => {
    console.log(JSON.stringify(sender.data, null, 3));
  });
  // …
  return(<Survey model = {survey} />);
}

To add a custom navigation item - a 'Clear Page' button in our case - we should call the Survey's addNavigationItemmethod. This method accepts an object with the following properties as an argument:

• id: A string that uniquely identifies the navigation item. We'll set it to "survey_clear_current_page".
• title: A caption that will be displayed on the navigation item. Let's set this property to "Clear Page".
• visibleIndex: A number that specifies the position of the navigation item relative to other navigation items. We'll set this property to 49, which means it will appear just before the "Complete" button.
• action: A function to call when users click the navigation item. In the code below, this function clears each question value on the current page.

survey.addNavigationItem({
  id: "survey_clear_current_page",
  title: "Clear page",
  visibleIndex: 49, // The "Complete" button has the visibleIndex 50.
  action: () => {
    survey.currentPage.questions.forEach(
      function(question) {
        question.value = undefined;
      });
  }
});

So when respondents take the survey and click the "Clear Page" button, all their answers on the current page will be cleared. This will allow them to start over on that page without clarifying each question value individually.

View CodeSandbox example

In the next part of the guide, we will explore how to create a custom component that renders a progress bar and how to implement navigation controls outside the form.