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:



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;



[

  {

    "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} :