FAQ
Developer hub
Dynamic multiselect

Dynamic multiselect


Useful in scenarios where users need to select multiple items, such as tags, categories, or preferences in such cases enables users to make multiple selections from a set of options. So this is an array with a comma-separated list of entries sent in the API request. Do not ask users to type this manually  use the built-in functionality instead.

Multiselect values with static children  



[

  {

    "key": "username",

    "type": "multiselect",

    "label": "username",

    "children": [                                        

      {

        "label": "A",

        "value": "A",

        "sample": "A"

      },

      {

        "label": "B",

        "value": "B",

        "sample": "B"

      },

      {

        "label": "C",

        "value": "C",

        "sample": "C"

      }

    ],

    "required": true

  }

]




Multiselect values with dynamic children  




Multiselect values with dynamic children refer to a feature in dropdown menus where the options available for selection change based on API. For this JSON looks the same but a new key is added called “source”.

The source API includes a JavaScript call to fetch the required data. Once retrieved, the data is shown in the dropdown as an array of objects, each containing a label, sample, and value for the child options. Example  : If you want to create sites multiselect dropdown for webflow application so this is what you have to integrate:

  • Take a get API for get all sites from webflow API documentation

  • Configure it in javascript API call code 

  • Return a object containing label,sample,value for all sites 

const testApiUrl = 'https://api.webflow.com/v2/sites';
const response = await axios.get(testApiUrl, {
  headers: {
    "Authorization"`Bearer ${context.authData.accesstokencode.access_token}`,
    "accept" : "application/json"
  }
});
const array = response.data.sites.map(subs => ({
  label: subs.displayName,
  value: subs.id,

  sample: subs.id
}));
return array;

  • This code can be added through the GUI or via JSON by including a key "source" with the escaped code as its value.Use EscapeJSON to properly format the code for JSON.

[

  {

    "key": "site",

    "type": "multiselect",

    "label": "Select site",

  "source": "const testApiUrl = 'https://baseurl/endpoint;\r\nconst   response = await axios.get(testApiUrl, {\r\n  headers: {\r\n    \"Authorization\": `Bearer ${context.authData.___}`,\r\n    \"accept\" : \"application/json\"\r\n  }\r\n});\r\nconst array = response.data.sites.map(subs => ({\r\n  label: subs.displayName,\r\n  value: subs.id\r\n}));\r\nreturn array;",

    "required": true

  }

]

Response : 

On selecting multiple value from the dropdown, it returns an array of that field and comma separated values in it. To use this value in the entire action , the path is ${context.inputData.fieldName} : 

Prev