Question T8122
Visible to All Users

v2 - Change Complete button

created 3 years ago

I think I have this mostly figured out and wanted to confirm.

Right now the complete button is stored in the footer container and it's hard to do styles (like the screenshot) without custom CSS.

Clipboard-File-1.png

I think adding a custom widget is the answer, as that will be in with the questions and can be placed with the isStartWithNewLine property and I can let a user customize it a bit more.

My question is, is this the right approach in the widget's afterRender function? It feels a bit strange to go from the question to surveyImpl to get to the completeLastPage() function. It works in the v2 Test Survey tab. If this is the correct approach, please let me know.

JavaScript
afterRender: function (question, el) { var buttonSubmit = el.getElementsByTagName("button")[0]; var rootQuestion = question; if (!question.isReadOnly){ buttonSubmit.onclick = function(){ rootQuestion.surveyImpl.completeLastPage(); console.log("clicked!"); } }
Comments (1)
JB JB
Joshua Bartley 3 years ago

    To add to this, I found that do the below to property set a height:100% so that the button was the correct size. An extra <div> was being added that wasn't in my htmlTemplate either.

    JavaScript
    afterRender: function (question, el) { el.parentNode.classList.add("cd-button-container"); el.parentNode.parentNode.classList.add("cd-button-container"); el.classList.add("cd-button-container-parent");`

    Answers approved by surveyjs Support

    created 3 years ago

    Hello,

    At this moment survey used in creator V2 has exactly the same code as in V1. I.e. you can use a custom widget to override existing behavior. You can use the question.survey property to access survey model from a question context.

    Thanks, Serge
    SurveyJS Team