Question T13596
Visible to All Users

Call API for dropdown field AFTER applying filter

created 2 years ago

I have a GET API that gets a list of users, and this API can take a filter called FilterText. So if I want to search a specific user, let's say John, it could be something like:
https://myAPI.com/myAPI?FilterText=John

We want to implement this using a dropdown so that whatever you search in the dropdown search bar is input for FilterText. The reason for dropdown is that if there are multiple users named John, then you would see a list of Johns and select whichever you want. I tried doing this as follows but it didn't work (note that the API url is a dummy one):

JSON
{ "title": "Test Form", "pages": [ { "name": "page1", "elements": [ { "type": "dropdown", "name": "question1", "choicesByUrl": { "url": "https://myAPI.com/myAPI?FilterText={question1}", "valueName": "id", "titleName": "text" } } ] } ] }

Thank you

Answers approved by surveyjs Support

created 2 years ago

Hello,
Please review our lazy loading example. It does exactly what you need.

Thank you,
Andrew
SurveyJS Team

    Show previous comments (1)

      Hello,
      You are using SurveyJS, the most expandable JavaScript Form library on the market.
      You can add new properties and use them. Here is the example with URL properties. You can add a choice property where your SurveyJS Creator users will be able to choose type of lists like: Accounts, Users, Countries and so on. Based on this property you can setup urls in onChoicesLazyLoad and onGetChoiceDisplayValue events. You can create components to hide the complexity from your Creator users.
      Please let us know if it works for you.

      PS: We don't offer call support for users with Free plan. I don't know a company that does it. In fact, we do not offer support on this forum for users with Free plan. They are asking questions on GitHub and stackoverflow.

      Thank you,
      Andrew
      SurveyJS Team

        I tried implementing this but when the code runs the following line:

        TypeScript
        this.survey.onChoicesLazyLoad.add(.....)

        I get the following error:

        'Cannot read properties of undefined (reading 'add')'

        Why could this be happening?

        Note that I tried adding the following two blocks of code both in my constructor and in ngOnInit

        TypeScript
        Survey.Serializer.addProperty("selectbase", { name: "lazyLoadUrl", category: "Lazy Choices", categoryIndex: 3 }); Survey.Serializer.addProperty("selectbase", { name: "lazyLoadDisplayUrl", category: "Lazy Choices", categoryIndex: 3 });

        Also, I notice that when I save my form with the following JSON (exact JSON from the example in your link):

        JSON
        { "title": "Test Form", "pages": [ { "name": "page1", "elements": [ { "type": "dropdown", "name": "country", "title": "Select a country", "isRequired": true, "defaultValue": "FRA", "lazyLoadUrl": "https://surveyjs.io/api/CountriesExamplePagination?skip={0}&take={1}&filter={2}", "lazyLoadDisplayUrl": "https://surveyjs.io/api/GetCountryNames?{0}", "choicesLazyLoadEnabled": true, "choicesLazyLoadPageSize": 40 } ] } ] }

        After saving the form and viewing its JSON again, I see it becomes this:

        JSON
        { "title": "Test Form", "pages": [ { "name": "page1", "elements": [ { "type": "dropdown", "name": "country", "title": "Select a country", "defaultValue": "FRA", "isRequired": true } ] } ] }

        I'm not sure why that's happening either.

          Hello,
          What version of SurveyJS do you use? We have added "onChoicesLazyLoad" several months ago. I can look for version number. We release new version every week.

          Thank you,
          Andrew
          SurveyJS Team