CODEWITHSUNDEEP
surveyjs
pjdupreez
pjdupreez

Reputation: 717

Custom 'rendering' of Display Value completing a Survey in SurveyJS

I can't find anything in the documentation of SurveyJS. If there is something I missed, a link would be great!

We have implemented a Custom Widget as described here and it works well. What we want to do next is to change the Display Value on the 'Survey Results' section when testing the survey from the creator. In other words, a 'Signature' question's result is displayed as data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAADICAYAAABS39xVAAAUGklEQVR4nO3dz28j53kH8PwZFYM6btOGAnIwWpRCe2iLAFSK2IgLUD20PTRa9GL4IiUHF2hBnZxDUuoSyT8623rLxAmpbFdCxaVn15n1luQOC3K7IW1yzRKt6HpEgQfyMOSBGPDy9CC9s8MhJc4MZzjvkN8PwIN3sdrZxerr933meZ/3KwQAEBBf8fsBAACsQmABQGAgsAAgMBBYABAYCCwACAwEFgAEBgILAAIDgQUAgYHAAoDAQGABQGAgsABM1JFGtX6Xav0upZUGHZ1ffm63qhOfYu+Cir0LqvW7fj/2SkBgwcpSRxqJnTPab5bp1tMsbebSFMocUihzSGFRoIiUpJh8rH+2y9mx/47mUhSRkhQWBf3XrYsCbRVPaLci0e1WlWr9LinDgd9...

but we don't want to do this, we want to render the result... but not for the signature but for our custom widget.

Also, is there a function to review your answers before submitting? If there is, we'll most probably also need to display a rendered answer of our custom widget here.

Upvotes: 0

Views: 943

Answers (1)

Oggy
Oggy

Reputation: 1666

Showing a preview of answers before submitting

There is a SurveyJS feature, which does that. To enable it you need to add a survey-level parameter called showPreviewBeforeComplete. You can choose from the following values:

  • showAllQuestions
  • showAnsweredQuestions

This feature will automatically render all images or signatures on the preview page.

The feature is also available through the Survey Creator's UI under the "Navigation" section of the survey settings panel.

Here's an example:

{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "signaturepad",
     "name": "question1"
    }
   ]
  }
 ],
 "showPreviewBeforeComplete": "showAnsweredQuestions"
}

Rendering uploaded images

If you would like to create your own widget, which renders uploaded images or signatures, you can base it on the HTML widget. It should contain an <img src='{question1}' /> tag, where the value of the src parameter should be the base64 data string, which you retrieved from the signature pad widget.

Here's an example:

{
 "pages": [
  {
   "name": "page1",
   "elements": [
    {
     "type": "signaturepad",
     "name": "question1"
    }
   ]
  },
  {
   "name": "page2",
   "elements": [
    {
     "type": "html",
     "name": "question2",
     "html": "<img src='{question1}' />"
    }
   ]
  }
 ]
}

Upvotes: 2

Related Questions