Hello,
the Preview of a Survey in the Creator presents a fixed page selector (PageToolbar) at the very bottom for navigating between pages. This is really useful, since it spares the user the necessity to scroll thru the whole form to use the "Next" button in order to get to the next page.
Unfortunately the page selector is not available for running tasks. Is there a way to also have the page selector in place when using survey.jquery.js (instead of survey-creator-core.js)?
Thanks in advance.
Hi Kevin,
Thank you for the update.
You may implement such a drop-down action using the createDropdownActionModel function from the survey-core module, as we do it in our source code for the Survey Creator preview/test tab: this.selectPageAction = createDropdownActionModel….
I created the following demo to show how to add a custom page title action which lists survey pages: CodeSandbox React Demo.
SurveyCreator.jsx
JavaScriptfunction SurveyComponent() {
const survey = new Model(json);
let pageListItems = updatePageList();
survey.onComplete.add((sender, options) => {
console.log(JSON.stringify(sender.data, null, 3));
});
function updatePageList() {
const pages = [];
for (let i = 0; i < survey.pages.length; i++) {
const page = survey.pages[i];
pages.push({
id: page.name,
data: page,
title: page.name,
enabled: page.isVisible,
visible: true
});
}
return pages;
}
function getPageTitle(page) {
return page.name;
}
survey.onGetPageTitleActions.add((sender, opt) => {
let selectPageAction = createDropdownActionModel(
{
id: "pageSelector",
css: "svc-page-selector",
title: getPageTitle(sender.currentPage),
visible: true
},
{
items: pageListItems,
allowSelection: true,
selectedItem: survey.currentPage,
onSelectionChanged: (item) => {
survey.currentPage = item.data;
},
verticalPosition: "top",
horizontalPosition: "center"
}
);
opt.titleActions.push(selectPageAction);
});
return <Survey model={survey} />;
}
I hope this helps. Please let me know if any questions remain.
Thank you, your answer was quite helpful.
JavaScriptopt.titleActions.push(selectPageAction);
The above code renders the page selector in the page's title bar.
One further question: is there also a possibility to render that page selector within a fixed container at the bottom of the page?
You're always welcome, Kevin.
Yes, the action bar is added to a page title actions as it uses the survey.onGetPageTitleActions function as it's demonstrated in the following demo: Context Actions in Element Titles.
The example creates an IAction object and a survey has various places where you can add a custom action (e.g., page/question titles). Unfortunately, a survey doesn't have a separate bottom bar with custom actions.
SurveyJS is an open-source project. Therefore, if you wish to replicate a survey creator toolbar for your survey, you can review our source code and reuse the same HTML elements. The source code for the Preview tab for Survey Creator for Knockout is available at https://github.com/surveyjs/survey-creator/blob/2ce1bb7cf94549577f8b38c0cef35b2bc198b7a1/packages/survey-creator-knockout/src/tabs/test.html#L2.
Please let me know if any questions remain.
Hello Kevin,
You can implement a selectable list of survey pages and use it to navigate between survey pages as shown in the following demo: Custom External Navigation.
Please let me know if you have further questions.
Thanks for your help.
I already implemented such a selectable list, but the main requirement is to have a popup dropdown list of pages in the same design as presented in the Creator.
Is there a solution?