Question T2468
Visible to All Users

Signature pad signature data

created 5 years ago

Hello Support,

I'm working on an application that requires the signature pad.
the application I am building is based on your aspnet.core example, and most aspects are working. It allows users to complete a survey and other users to review and comment on the survey results on the same form.

The final interaction is the initial user to sign the form online.
For this I am using the signature pad.

1 Although my survey accepts the signature and the signature data is received at the back-end, when I repopulate the survey data for review, received at the client, the signature is not re popupulated when I display the survey.

2 after completing the survey, the user can save the survey as pdf. The signature is not shown on the PDF.

I have copied a link to a plunker for you to review item 2. Item 1 is working from here, so I need to revisit my code …

https://next.plnkr.co/edit/aZ7ytClwbzyxk0qT

Answers approved by surveyjs Support

created 5 years ago (modified 5 years ago)

Hello Leo,

Unfortunately, SurveyPDF have no support of custom widgets like SignaturePad at this moment. As a workaround you can set sugnature pad result data to imagepicker question. Here is live sample in plunker with this solution. You can draw sign, press Complete and click Save to PDF to see PDF with signature pad image. A little bit of code need to modify your original survey to this approach (ask if you need help)

Of course, imagepicker's radio button also rendered with this solution, it is unpleasant, but maybe it is good enough for you? In any case we think about add question's adorners SurveyPDF mechanism ― API with ability to draw custom primitives inside SurveyPDF, but this is not a priority task for us at this moment. It is important for you?

Thanks, Alex
SurveyJS Team

    Show previous comments (1)

      Hello,

      Thanks for positive feedback! Here is your modified example in plunker. Approach is to change SurveyPDF's input json from SurveyModel's json. Code above iterate over json's questions and change SignaturePad types to imagepicker and set imageLink from data. If you add pages/panels to SurveyModel json than you will need to fix iterate over json questions loop on 46 line. We are here if you have any questions

      Thanks, Alex
      SurveyJS Team

        Alex,

        I feel like a fool, but need more help …

        My survey is copied hereunder. Can you please show me how to iterate ?

        {
        "pages": [
        {
        "name": "page1",
        "elements": [
        {
        "type": "multipletext",
        "name": "PersonalDetails",
        "title": "Personal Details",
        "items": [
        {
        "name": "Surname",
        "isRequired": true,
        "title": "Surname"
        },
        {
        "name": "Firstname",
        "isRequired": true,
        "title": "Firstname"
        },
        {
        "name": "Address",
        "isRequired": true,
        "title": "Address"
        },
        {
        "name": "City",
        "isRequired": true,
        "title": "City"
        },
        {
        "name": "PostCode",
        "isRequired": true,
        "title": "PostCode"
        },
        {
        "name": "Preferred Contact Number",
        "isRequired": true,
        "title": "Preferred Contact Number"
        },
        {
        "name": "Email",
        "isRequired": true,
        "title": "Email"
        },
        {
        "name": "DateOfBirth",
        "isRequired": true,
        "inputType": "date",
        "title": "DateOfBirth"
        }
        ]
        },
        {
        "type": "dropdown",
        "name": "question5",
        "title": "Please state your gender.",
        "choices": [
        {
        "value": "item1",
        "text": "Male"
        },
        {
        "value": "item2",
        "text": "Female"
        },
        {
        "value": "item3",
        "text": "Prefer not to disclose"
        }
        ]
        },
        {
        "type": "comment",
        "name": "question6",
        "title": "Comment By Doctor\Screener",
        "isReview": true
        },
        {
        "type": "multipletext",
        "name": "ProposedOccupation",
        "title": "Proposed Occupation",
        "items": [
        {
        "name": "text1",
        "title": "Proposed Occupation"
        },
        {
        "name": "text2",
        "title": "Proposed Site/Job Location"
        }
        ]
        },
        {
        "type": "comment",
        "name": "question7",
        "title": "Comment By Doctor\Screener",
        "isReview": true
        },
        {
        "type": "matrixdynamic",
        "name": "OccupationHistory",
        "title": "Occupation History for the last five years",
        "columns": [
        {
        "name": "Employer",
        "cellType": "text"
        },
        {
        "name": "Job Title",
        "cellType": "text"
        },
        {
        "name": "Hazard Exposure",
        "cellType": "boolean",
        "defaultValue": "false"
        },
        {
        "name": "Hazards",
        "cellType": "text",
        "visibleIf": "{OccupationHistory[0].Hazard Exposure} = true"
        }
        ],
        "choices": [
        1,
        2,
        3,
        4,
        5
        ],
        "rowCount": 3
        },
        {
        "type": "comment",
        "name": "question8",
        "title": "Comment by Doctor\Screener",
        "isReview": true
        },
        {
        "type": "checkbox",
        "name": "SignificantExposure",
        "title": "Have you had significant exposure to",
        "hasOther": true,
        "choices": [
        "Noise",
        "Asbestos",
        "Dust",
        "Chemicals",
        "Radiation"
        ],
        "choicesOrder": "asc"
        },
        {
        "type": "comment",
        "name": "question9",
        "title": "Comment by Doctor\screener",
        "isReview": true
        },
        {
        "type": "boolean",
        "name": "DoYouHaveAGeneralMedicalPractitioner",
        "title": "Do you have a usual medical practitioner",
        "isRequired": true
        },
        {
        "type": "multipletext",
        "name": "question4",
        "visibleIf": "{DoYouHaveAGeneralMedicalPractitioner} = true",
        "title": "Medical Details",
        "items": [
        {
        "name": "UsualMedicalPractitioner",
        "title": "Usual Medical Practitioner"
        },
        {
        "name": "UsualMedicalPratitionerPracticeName",
        "title": "PracticeName"
        },
        {
        "name": "UsualMedicalPratitionerAddress",
        "title": "Address"
        },
        {
        "name": "UsualMedicalPratitionerCity",
        "title": "City"
        },
        {
        "name": "UsualMedicalPratitionerPhoneNumber",
        "title": "PhoneNumber"
        }
        ]
        },
        {
        "type": "comment",
        "name": "question10",
        "title": "Comment By Doctor\Screener",
        "isReview": true
        },
        {
        "type": "boolean",
        "name": "Are you taking any medications?",
        "title": "Medications",
        "label": "Are you taking any medications ? Please list Including inhalers,patches and 'quit smoking medication'"
        },
        {
        "type": "comment",
        "name": "Details",
        "visibleIf": "{Are you taking any medications?} = true",
        "title": "Details",
        "enableIf": "{Are you taking any medications?} = true"
        },
        {
        "type": "comment",
        "name": "question11",
        "title": "Comment By Doctor\Screener",
        "isReview": true
        },
        {
        "type": "boolean",
        "name": "Spectacles",
        "title": "If you wear spectacles or contact lenses please indicate below. Tick more than on box if required",
        "defaultValue": "false",
        "label": "Spectacles"
        },
        {
        "type": "checkbox",
        "name": "VisionOptions",
        "visibleIf": "{Spectacles} = true",
        "title": "Tick more than on box if required",
        "choices": [
        {
        "value": "item1",
        "text": "Near viion only e.g reading"
        },
        {
        "value": "item2",
        "text": "For Distance vision only"
        },
        {
        "value": "item3",
        "text": "For all distances"
        },
        {
        "value": "item4",
        "text": "Contact lenses"
        }
        ],
        "choicesOrder": "asc"
        },
        {
        "type": "comment",
        "name": "question12",
        "title": "Comment By Doctor\Screener",
        "isReview": true
        },
        {
        "type": "matrix",
        "name": "Alcohol Audit Questionnaire: Please tick the answer that is correct for you. ",
        "columns": [
        "0",
        "1/Month or Less",
        "2-4 times/Month",
        "2-3 times/Week",
        "> 3 times/Week"
        ],
        "rows": [
        "Have often do you have a drink containing alcohol?",
        "How many drinks containing alcohol do you have on a typical day when you are drinking?",
        "How often do you have 6 or more drinks on one occasion?"
        ]
        },
        {
        "type": "comment",
        "name": "question13",
        "title": "Comment By Doctor\Screener",
        "isReview": true
        },
        {
        "type": "comment",
        "name": "LastOptomotristReview",
        "visibleIf": "{Spectacles} = true",
        "title": "When was you last Optometrist or Eye specialist review",
        "enableIf": "{question5} = true",
        "rows": 1
        },
        {
        "type": "comment",
        "name": "question14",
        "title": "Comment By Doctor\Screener",
        "isReview": true
        },
        {
        "type": "dropdown",
        "name": "Have you ever done shift work?",
        "title": "Have you ever done shift work?",
        "choices": [
        "Yes",
        "No"
        ]
        },
        {
        "type": "comment",
        "name": "question15",
        "title": "Comment By Doctor\Screener",
        "isReview": true
        },
        {
        "type": "dropdown",
        "name": "question3",
        "visible": false,
        "visibleIf": "{Have you ever done shift work?} = "item1"",
        "title": "If so, did you cope well with shift work?",
        "choices": [
        {
        "value": "item1",
        "text": "Yes"
        },
        {
        "value": "item2",
        "text": "No"
        }
        ]
        },
        {
        "type": "comment",
        "name": "question16",
        "title": "Comment By Doctor\Screener",
        "isReview": true
        },
        {
        "type": "dropdown",
        "name": "question1",
        "hasOther": true,
        "choices": [
        {
        "value": "item1",
        "text": "dasdf"
        },
        {
        "value": "item2",
        "text": "item2asdasdf"
        },
        {
        "value": "item3",
        "text": "item3dsfasdfasdf"
        },
        "item4",
        "item5"
        ]
        },
        {
        "type": "comment",
        "name": "question17",
        "title": "Comments by Doctor\Screener",
        "isReview": true
        },
        {
        "type": "signaturepad",
        "name": "signature",
        "title": "Signature"
        }
        ]
        },
        {
        "name": "page2"
        }
        ]
        };

          Hello,

          Here is live sample with your json. Now it iterate over pages and further over elements in every page. Does it meet your needs?

          Thanks, Alex
          SurveyJS Team

          Other Answers

          created 5 years ago

          Thanks Alex. All working now !!

            Comments (2)

              hello Alex,

              A while ago you mentioned :

              Of course, imagepicker's radio button also rendered with this solution, it is unpleasant, but maybe it is good enough for you? In any case we think about add question's adorners SurveyPDF mechanism ― API with ability to draw custom primitives inside SurveyPDF, but this is not a priority task for us at this moment. It is important for you?

              My client has now raised this with me. Is there a solution available ?

              Regards

              Leo

                Hello,

                It's been a long time since that moment. We already added support of all custom widgets to SurveyPDF. Implemented SurveyPDF adorners mechanism. Moreover SignaturePad was included in list of basic types questions. Now you can export PDF with SignaturePad question without any additional actions

                Thanks, Alex
                SurveyJS team