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.
TOC Customization
Answers approved by surveyjs Support
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.
JavaScriptimport 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