Question T6351
Visible to All Users

Google Address Auto Complete js

created 4 years ago

Hi Team,

The example:

https://plnkr.co/edit/ztVbxFqElzFxlBJj?preview

is working fine in my ReactJS code. I want to show this as a custom widget (drag and drop) in visual Survey Creator (commercial license). How to make it as a custom widget?

Thanks,
Draggable Google Address Auto Complete.PNG

Answers approved by surveyjs Support

created 4 years ago

Hello,

You need to register widget using the following code:

JavaScript
Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");

Here is the working sample - https://plnkr.co/edit/DFBNNqG6mokYvi4L

Thanks, Serge
SurveyJS Team

    Show previous comments (6)

      Above code was already in the customwidget.js file. I changed the "customtype" , still could not see it in toolbox

      customwidgetreg.PNG

        Hello,

        The code should be

        JavaScript
        Survey.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");

        Thanks, Serge
        SurveyJS Team

          I have tried. it is not showing up in the toolbox, also could not find error on the console.
          Can you please and try?

          Other Answers

          created 4 years ago

          Hello,

          Here is the working plunker sample with the Google auto complete widget - https://plnkr.co/edit/yZ8aLSyHU8MxfeVj

          Note, that SurveyJS Creator is commercially licensed. Please write us from the email linked to your license.

          Thanks, Serge
          SurveyJS Team

            Comments (2)

              Hi Serge,

              I am not sure if it is a bug in Survey Creator. I have added following 3 custom widget JS(boostrapdate picker, sortable js and google address auto complete) to survey-creator.html ,

              HTML
              <script src="https://unpkg.com/inputmask@5.0.3/dist/inputmask.js"></script> <script src="https://unpkg.com/sortablejs@1.7.0/Sortable.js"></script> <script src="https://unpkg.com/moment@2.24.0/moment.js"></script><link rel="stylesheet" href="https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.js"></script><link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.min.css" type="text/css" rel="stylesheet"/> <script src="https://unpkg.com/surveyjs-widgets@1.8.31/surveyjs-widgets.js"></script> <script src="https://maps.googleapis.com/maps/api/js?key=&libraries=places"></script> <script type="text/javascript" src="./customwidget.js"></script> <link href="./customwidget.css" type="text/css" rel="stylesheet"/>

              but only one widget icon is showing in the toolbox:

              Toolbox-Googleautocomplete.PNG

              though other 2 are not visible in toolbox, but it works fine in the question. I mean if I add question json which contains above 3 custom widgets property, it works fine.

              So I am not sure if it is the issue in toolbox displaying custom widget entries on the Survey Creator. Please confirm if it is a bug. I am ready to buy the full license now :)

              Thanks,

                Hello,

                I've created a separate ticket on your behalf (T6401: Custom widgets are not available in SurveyJS Creator). It has been placed in our processing queue and will be answered shortly.

                Thanks, Serge
                SurveyJS Team