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