search

surveyjs / survey-library

Free JavaScript form builder library with integration for React, Angular, Vue, jQuery, and Knockout.
https://surveyjs.io/form-library
MIT License
4.11k stars 801 forks source link

TOC - Enhancement idea #6926

Closed tstrumfels closed 12 months ago

tstrumfels commented 1 year ago

Regarding navigation, the new TOC is great for navigating page to page, but was looking to get more granular.

Within a page, we can have multiple panels, which would definitely be useful if exposed as child items under each page in the TOC.

Incorporated my own, using the data model. Also includes a simple indicator to show user if a page/subsection is complete or not

image

JaneSjs commented 12 months ago

Hello @tstrumfels, Please accept my apologies for the delayed reply.

Unfortunately, we don't currently consider extending our TOC.

In the meantime, you can implement a custom TOC which would include survey panels and display the information about the progress per pages/number of questions answered per page.

To implement a custom table of contents, 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 Angular component (ProgressTocComponent) is available in our source code: progress.component.ts. If you use another JavaScript platform, please feel free to locale a template for your JS platform. Let me know if you have difficulties with that.

For the record: you can also review the following ticket where I shared a React Demo of a custom TOC: TOC Customization.

I hope this information may help. Should you have any further questions, please feel free to reactivate this thread.

Thanks

JaneSjs commented 1 week ago

Hello @tstrumfels, Please be informed that with v1.11.14 and newer, a Table Of Contents supports a custom item template.

The following demo shows how to implement a custom TOC item and:

Follow these steps:

  1. Implement a component that renders item markup. The component accepts the item configuration object as a prop. You can use its item property to access the IAction which corresponds to the current page item within a TOC. Use this object to retrieve information about the current page and its answered and total question count.

  2. Register the component so that it can be accessed by name.

In React and other JS applications, register the component in ReactElementFactory as shown in the CustomTocItem.jsx file. In Angular, register the component in AngularComponentFactory as shown in the toc-custom-item.component.ts file. In Vue, implement the CustomTocItem component as shown in the CustomTocItem.vue file and register it within application components.

  1. Obtain the Table of Contents navigation element and set the itemComponent property to the custom component name. 
    survey.findLayoutElement("toc-navigation").data.listModel.itemComponent = "sv-custom-toc-item";