Question T14101
Visible to All Users

TOC Customization

created a year ago

Hi, we would like to customize the table of contents to include question titles and possibly other items. Is there a recommended way to replace or extend the existing one? I checked the documentation and examples, but such a procedure is not described there.

Answers approved by surveyjs Support

created a year ago

Hello Wojciech,
Thank you for contacting us.
If you wish to implement a custom table of contents, you can register a custom component and add it as a layout item to the left container.
An example of how to implement a custom layout item is available at Percentage Progress Bar.

A template for a built-in TOC is available in our source code: SurveyProgressToc.

I created the following React sample for your reference: View Demo.
I added a custom showCustomToc property to a survey. When the property is enabled, I render a custom QuestionList component as a table of contents. To programmatically focus a question when a customer clicks a question item, call the survey.focusQuestion function.

JavaScript
import React from "react"; const QuestionList = ({ items, onItemClick }) => { const handleItemClick = (item) => { if (onItemClick) { onItemClick(item); } }; return ( <ul> {items.map((item, index) => ( <li key={index} onClick={() => handleItemClick(item)}> {item.title} </li> ))} </ul> ); }; ... export { QuestionList }; import { QuestionList } from "./QuestionList"; Serializer.addProperty("survey", { name: "showCustomToc", type: "boolean", default: false }); class PercentageProgressBar extends ReactSurveyElement { render() { let survey = this.props.model; if (!survey.showCustomToc) return; let questions = survey.getAllQuestions(); const handleItemClick = (item) => { // alert(`You clicked: ${item.title}`); survey.focusQuestion(item.name); }; return ( <div> <h1>Questions</h1> <QuestionList items={questions} onItemClick={handleItemClick} /> </div> ); } } ReactElementFactory.Instance.registerElement("sv-custom-toc", (props) => { return React.createElement(PercentageProgressBar, props); }); ... survey.addLayoutElement({ id: "custom-toc", component: "sv-custom-toc", container: "left", data: survey });

I hope this example helps. Please let me know if you have any questions or require further assistance.

Thanks