Signature pad does not display in survey.

Jim

created 6 years ago

I have added a signature pad to a survey with SurveyCreator and it displays in the test panel of SurveyCreator. However it does not display when I run my Survey.model. I even tried a Survey that has only a signature pad and that resulted in "No displayable or visible elements"

I notice that in SurveyCreator the widgets are imported with

import * as widgets from "surveyjs-widgets";
widgets.signaturepad(SurveyKo);

I suspect that the widgets library needs to be imported into the displayed survey but have been unsuccesful doing that.

I am using react for my js library.

The code is as follows:

import * as Survey from 'survey-react';

render(){
Survey.Survey.cssType = "bootstrap";
Survey.defaultBootstrapCss.navigationButton = "btn btn-green";
Survey
.JsonObject
.metaData
.addProperty("question", {
name: "conceptCode:string",
default: "",
choices: this.choices
});

const model = new Survey.Model(this.propJSON);
model.data = this.props.savedData[0];
model.currentPageNo = this.props.savedData[1];
model.sendResultOnPageNext = true;

return(
<div id="surveyContainer">
<Survey.Survey
model={model}
onComplete={this.onSurveyComplete}
onPartialSend={this.onSurveyPartialSend}
/>
</div>

);
}

Answers approved by surveyjs Support

Serge T

created 6 years ago

Hello,

We have a sample repo demonstrating SurveyJS, Creator and custom widgets in ReactJS app - https://github.com/surveyjs/surveyjs_react_quickstart
Have you seen it?

SurveyJS custom widgets are using 3rd party libraries listed at the https://github.com/surveyjs/widgets page. The signature pad widgets uses the https://github.com/szimek/signature_pad library. Have you loaded corresponding scripts on your page?

Thanks, Serge
SurveyJS Team

Comments (1)

Jim 6 years ago

That worked.

Other Answers

sumit banskota

created 6 years ago

After updating webpack ended up as

JavaScript
TypeError: __WEBPACK_IMPORTED_MODULE_0_signature_pad___default.a is not a constructor

Comments (3)

Serge T 6 years ago

Hello,

We have a demo repository - https://github.com/surveyjs/surveyjs_react_quickstart.
It works ok for me. Have you seen it?

Thanks, Serge
SurveyJS Team

sumit banskota 6 years ago

This will just work for older version of webpack . I have no issue on webpack 0.1.0. On webpack 2.9.4 got the folowing error .

JavaScript
TypeError: __WEBPACK_IMPORTED_MODULE_0_signature_pad___default.a is not a constructor

  1132 | var rootWidget = this;
  1133 | var canvas = el.getElementsByTagName("canvas")[0];
  1134 | var buttonEl = el.getElementsByTagName("button")[0];
> 1135 | var signaturePad = new __WEBPACK_IMPORTED_MODULE_0_signature_pad___default.a(canvas);
       | ^  1136 | 
  1137 | if (question.isReadOnly) {
  1138 |   signaturePad.off();

Serge T 6 years ago

Hello,

I've just checked our https://github.com/surveyjs/surveyjs_react_quickstart repository. It works ok with webpack 3.8.1.
If you still have the issue, please provide us with a minimal sample to reproduce the issue on our side.

Thanks, Serge
SurveyJS Team

Signature pad does not display in survey.

Answers approved by surveyjs Support

Other Answers

Recently viewed tickets