Question T10372
Visible to All Users

Add custom survey button next to the Complete button in the Preview tab

created 2 years ago

Hi Team,

  1. How can I add custom button near "Complete" button in Preview tab, Survey Creator, react

  2. How can I hide (or delete) properties in Property Grid (e.g. "Survey language" or "Cookie name" in "General" tab), Survey Creator, react

Answers approved by surveyjs Support

created 2 years ago (modified 2 years ago)

Hello Sergey,

How can I add custom button near "Complete" button in Preview tab, Survey Creator, react

You can subscribe to the CreatorBase.onSurveyInstanceCreated event, check if the options.reason value is test and then call the SurveyModel.addNavigationItem function to add a custom button.

For example:

JavaScript
creator.onSurveyInstanceCreated.add(function (sender, options) { if (options.reason == "test") { var survey = options.survey; survey.addNavigationItem({id: "survey_clear_current_page", title: "Clear page", visibleIndex: 49, visible: new Survey.ComputedUpdater(() => { return survey.isLastPage; }), action: () => { survey .currentPage .questions .forEach(function (question) { question.value = undefined; }); } }); } });

Please try this example.

For more information on API used, please refer to the following demos:

How can I hide (or delete) properties in Property Grid (e.g. "Survey language" or "Cookie name" in "General" tab), Survey Creator, react

To hide the General | Survey language and General | Cookie name properties, call the Survey.Serializer.getProperty function to obtain a target property and set visible to false:

JavaScript
//Hide the General | Survey language property Survey.Serializer.getProperty("survey", "locale").visible = false; //Hide the General | Cookie name property Survey.Serializer.getProperty("survey", "cookieName").visible = false;

For more information, refer to Hide Properties from the Property Grid.

Please let us know if you have any questions or require further assistance.

P.S. To allow us communicate in the most efficient manner, we kindly ask you to post a ticket per a single question. We value your time and cooperation. Thanks.

    Comments (2)

      Hi Jane,

      Thank you very much it's work great!
      I have just a couple of questions about custom button for Creator:
      1 This part of code doesn't work for me

      JavaScript
      visible: new **Survey**.ComputedUpdater(() => {         return survey.isLastPage;       }),

      Because I can't figure out which library it refers to "Survey" (from "new Survey.ComputedUpdater" part).
        Which library I should import for "Survey"?

      2 Is it possible to arrange my custom button on a new line, below "Next", "Previous" or "Complete" buttons?

        Hello Sergey,
        ComputedUpdater is located in "survey-core" package.
        Here is the example to add a button on the same line. To add a button on a new line, you can just add a div after your survey div and place a button with the same css classes as our buttons.

        Thank you,
        Andrew
        SurveyJS Team