Google Address Auto Complete js

ParthibRathnam

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

Draggable ...mplete.PNG

Answers approved by surveyjs Support

Serge T

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)

ParthibRathnam 4 years ago

Hi Serge,

I am using the "Service" Nodejs example from below.
https://surveyjs-nodejs.herokuapp.com/

I have added the code to survey-creator.html (screenshot attached), but still could not see google places address widget in the survey creator.
Could you please help.

surveycrea...orhtml.PNG toolbox no...widget.PNG

Serge T 4 years ago

Hello,

If you are using React then you need to register a custom widget in both libraries:

JavaScript
import * as SurveyReact from "survey-knockout";
import * as SurveyKo from "survey-knockout";

SurveyReact.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");
SurveyKo.CustomWidgetCollection.Instance.addCustomWidget(widget, "customtype");

You can find similar initializations here - https://github.com/surveyjs/surveyjs_react_quickstart/blob/master/src/SurveyCreator.js#L27-L38

Thanks, Serge
SurveyJS Team

ParthibRathnam 4 years ago

Hi Serge,

It is working fine in my ReactJS app with above code , screenshot attached.

My requirement is add Google address complete custom widget on your nodeJS example repo at below link:
https://surveyjs-nodejs.herokuapp.com/

I can see other custom widget like 'SortableJS' , but unable to see Google address widget after adding the below code in survey-creator.html.

HTML
<head>

Code
</head>
<body>

Code
</body

customwidgetjs.PNG

Serge T 4 years ago

Hello,

In order for a custom widget to be available in SurveyJS Creator it should be registered in survey-knockout instance of custom widgets collection due to creator is working over the survey-knockout library.

In order to can be used with different libraries in a modular application you can wrap widget initialization with a function where you pass library instance as a parameter. Thus you can initialize the same widget code for different libraries. See the https://github.com/surveyjs/custom-widgets/blob/master/src/sortablejs.js#L3 source code for more details.

The https://github.com/surveyjs/surveyjs-nodejs demo application is using the survey-knockout library and built as non-modular application. In order for the custom widget to be available in SurveyJS Creator in https://github.com/surveyjs/surveyjs-nodejs/ demo application you need to add your custom widget on this page - https://github.com/surveyjs/surveyjs-nodejs/blob/master/public/survey-creator.html

Thanks, Serge
SurveyJS Team

ParthibRathnam 4 years ago

Hi Serge,

I tried in my local repo of nodejs sample.

It is not showing in Survey Creator.
could you please help?

Thanks,

survey-cre...orhtml.PNG

Serge T 4 years ago

Hello,

Have you added widget initialization code on the page:

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

Thanks, Serge
SurveyJS Team

ParthibRathnam 4 years ago

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

customwidgetreg.PNG

Serge T 4 years ago

Hello,

The code should be

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

Thanks, Serge
SurveyJS Team

ParthibRathnam 4 years ago

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

Serge T

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)

ParthibRathnam 4 years ago

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:

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,

Toolbox-Go...mplete.PNG

Serge T 4 years ago

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

Google Address Auto Complete js

Answers approved by surveyjs Support

Other Answers

Recently viewed tickets