Question T10431
Visible to All Users

I would like to add all of the widgets in the custom widget library to my survey creator.

created 3 years ago

Hello,

I recently inherited an Angular application that makes use of SurveyJS for asking survey questions.
I would like to add all of the SurveyJS custom widgets that ship with SurveyJS in the custom widget library to my survey creator.

Just to familiarize myself, I have followed the tutorials listed and have been able to get your customwidget.ts example to populate in my toolbox.

I attached the typescript for the survey creator component, hopefully that is helpful.
You can see that I added the

Code
import { init as initCustomWidget } from 'src/app/features/survey/customwidget';

and I call the method

Code
initCustomWidget(SurveyKo);

And that was enough to add the custom widget.

I tried to follow the example for adding the autocomplete widget to my toolbox, but it doesn't seem to work or I am doing it wrong.

What do I need to do to add the entire custom widget library or specific custom widgets.

Thanks In Advance,
Chris Borglum

CHRISTIAN BORGLUM
APPLICATION DEVELOPER
[christian.borglum@tdsclinical.com]

Sign in to comment on this post

Answers approved by surveyjs Support

created 3 years ago (modified 3 years ago)

Hello Christian,
You can test the following plunker demo to learn how to add custom widgets to your survey creator: https://plnkr.co/edit/eWTVXTEqSowFPnVU.

For additional information, please also refer to the following:

Please let me know if this information helps. Otherwise, I'll assist you further.

Thanks,
Jane
SurveyJS Team

    Show previous comments (1)
    Jane 3 years ago

      Hello Christian,
      Thank you for the update. The survey creator comes with a set of default question and panel types, such as text, radiogroup, matrix and so on.

      If you have a specific requirement which is not covered by default questions/panels, you may wish to create a custom widget from scratch. If so, you need to follow the mentioned help topic: Create Custom Widgets.

      Or, you may enhance the survey with a special set of custom widgets which come from third-party libraries. This is what actually demonstrates the Custom Widget demo: https://plnkr.co/edit/pIz5di8hHZVJegmB. If you research index.html, you'll see that we register the surveyjs-widgets.js library plus some JS and CSS references. So, to add these custom widgets to the Survey Creator toolbox, you simply need to install the surveyjs-widgets.js and additional third-parties to your application.
      Additionally, this demo shows how to hide some default question and panel types. For this, pass required question types to the questionTypes array.

      Please let me know if this helps.

      C C
      Christian 3 years ago

        Jane,
        Thank you for all the help. I have a follow up question. I am trying a different method to achieve my survey goal.

        I have 2 methods I am pursuing.
        Method 1:
        I have question 1, which is a simple text question that is asking for a medication.
        I have question 2, which is a dropdown question that is hooked up to my medication lookup API.
        When I run my survey, the API pre-populates my dropdown with ALL medications. I would like to have the answer to question 1 be used as the search criteria for question 2, and wait to call the API until question 1 is answered. Is this possible?

        Method 2:
        Is there a dropdown in the toolbox that has an autocomplete similar to the angular material autocomplete. In this control, I can type a few characters (I can configure how many), and then the call to the API is done using the characters entered.

        Thanks in advance for any help.
        Christian.

        AT AT
        Andrew Telnov 3 years ago

          Hello,

          I created a separate tickets on your behalf: T10671: Is there a dropdown in the toolbox that has an autocomplete similar to the angular material autocomplete? and T10670: How to use a question value as a search criteria for a dropdown choices?.
          We placed it in our processing queue and will process them shortly.

          Thank you,
          Andrew
          SurveyJS Team

          Sign in to comment on this post