Dynamic dropdown

A dynamic dropdown updates its options in real-time based on user interactions or API. The values are fetched from an API using a JavaScript call, and the data is displayed as an array of objects, each containing a label, sample, and value. (Dropdown allows only single value to select)

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 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": "dropdown",

"label": "Select site",

"source": "const testApiUrl = 'https://baseurl/endpoint;\r\nconst response = await axios.get(testApiUrl,{\r\nheaders:{\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 a value from the dropdown, it returns a key-value pair. If the key for sites is "site", the returned value will be in the format {site: "site_id"}. To use this value, the path is ${context.inputData.site} :