Question T4802
Visible to All Users

Custom widget - fetch data and store it as itemvalues

created 4 years ago

Hi

im creating custom widgets dropdown list, I want to create propety which will enable to fetch data from server store it as itemvalue.

Then in properties i can select/deselect from those list

example

widgets loads fetch county list
in settings i go to country list i see itemvalue answers and select deselect values i want

rest will be handled in after render by custom render

i used this example

JavaScript
```javascript Survey.Serializer.addProperty("survey", { name: "country", category: "general", choices: function(obj, choicesCallback) { //We are going to use choicesCallback here var xhr = new XMLHttpRequest(); xhr.open("GET", "https://restcountries.eu/rest/v2/all"); xhr.setRequestHeader( "Content-Type", "application/x-www-form-urlencoded" ); //on load event set results into array of ItemValue and tell the Survey Creator that choices are loaded. xhr.onload = function() { if (xhr.status === 200) { var serverRes = JSON.parse(xhr.response); var res = []; //We will use ItemValue array here, since we want to have value different from display text //If your value equals to display text, then you may simply return the array of strings. res.push({ value: null }); for (var i = 0; i < serverRes.length; i++) { var item = serverRes[i]; res.push({ value: item.alpha2Code, text: item.name }); } //return the result into Survey Creator property editor choicesCallback(res); } }; xhr.send(); } });

but it return simply dropdown, i cannot select/unselect values like in img attached

Clipboard-File-1.png

regard K.K

Code
Comments (1)

    Hello,

    Did you try to use choicesByUrl property of QuestionSelectBase class to fetch choices from web? Here is example on our site

    Thanks, Alex
    SurveyJS Team

    Answers

    created 4 years ago

    Yup, but this not resolving my problems. To give you more context:

    • i have list of countries and its languages in api
    JavaScript
    [ { country: 'Poland', code:'pl',. languages:['en','pl'] } ]
    • output should be a dropdown list with countries and its lang (mulisect). - ( this part is done by custom widget)

    What i want to achieve is:

    • in setting of a widget i can which countries of fetched list should be visible in dropdown
    • basically i need to fetch those countires and somehow enable to put/remove it from list widget settings
      Comments (3)

        Hello,
        I think about the possibilities to make it work. In general, I would suggest you to use a component, instead of custom widget. Here is the example.
        I can modify the current component by adding white/black country lists. I am not sure, will it work for you or do you have something different in the mind?

        Thank you,
        Andrew
        SurveyJS Team

        K K
        KrzysztofKolacz 4 years ago

          unfotunetly not.

          Is it posible to create own setting for widget? maybe it will be easier for me to tackle it this way.
          and if yes, any docs or examples?

          regards

            Hello,
            Sure, you can create your own properties for custom widget or for a component.
            Here is the docs for creating components and custom widgets.

            Since we do not understand completely how you want to make it work for your SurveyJS Creator users, it is hard for us to help you with it.

            Thank you,
            Andrew
            SurveyJS Team