Table of Contents with Question Progress Indicators

This example demonstrates how to customize Table of Contents items by assigning a custom item template to the tocItemComponent property. The custom template displays each page title along with the number of answered questions and the total number of questions on that page.

To create a custom TOC item template, follow these steps:

1. Create a component that defines the item layout.
   The component receives the PageModel and SurveyModel instances through the page and survey props. Use the page's navigationTitle, title, or name property to display the page label. Call getProgressInfo() to get the answeredQuestionCount and questionCount values. To keep the counter in sync with answered questions, include the page and its questions in the component state.

2. Register the component under a name.
   In React and other JavaScript applications, register the component in ReactElementFactory.
   In Angular, register it in AngularComponentFactory.
   In Vue, register it as an application component.

3. Specify the component name in the survey configuration.
   Assign the registered component name to the survey's tocItemComponent property. You can set this property in code or in the survey JSON schema. This demo uses the JSON schema approach shown in the Code tab.