Dynamic Input group

A dynamic input group is a set of input fields that can be added, removed, or modified in real-time based on user interactions or API response . This feature allows for the creation of optional fields and can hide them when not in use, providing flexibility and enhancing user experience.

📌For example When creating a new record in an airtable, dynamically fetch and display columns inside an input group. Users can then input data only into the columns they need, making the process efficient and user-friendly using following steps and achieve result :

Take a get API for get all columns from airtable API documentation
Configure it in javascript API call code
Return an array containing a object containing key,label,type,help for columns

key is used to access this specific column value ex: ${context.inputData.inputgroupName.coloumnName}
Label shown on the UI
type decide type of the field using if condition in input group source code you can change type for a field also
help text can be static or dynamic. Handle source code

const response = await axios({

url: `https://api.airtable.com/v0/meta/bases/${context.inputData.basesList}/tables`,

method: 'GET',

headers: {

Authorization: `Bearer ${context.authData.accesstokencode.access_token}`

}

});

const tables = response.data.tables;

let fields = [];

for(let i = 0 ;i < selectedTableList.length ; i++)

{

let json = {

"key": selectedTableList[i].name,

"label": selectedTableList[i].name,

"type": "string",

"help": selectedTableList[i].type,

"required": false,

"list": false,

"altersDynamicFields": false

}

fields.push(json)

}

return fields;

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

"type": "input groups",

"label": "fieldlist",

"source": "const response = await axios({\r\n url: `https://api.airtable.com/v0/meta/bases/${context.inputData.basesList}/tables`,\r\n method: 'GET',\r\n headers: {\r\n Authorization: `Bearer ${context.authData.accesstokencode.access_token}`\r\n }\r\n });\r\n const tables = response.data.tables;\r\nlet selectedTableList ;\r\nfor(let i = 0 ;i < tables.length ; i++)\r\n{\r\n if(tables[i].id===`${context.inputData.tablesList}`)\r\n selectedTableList=tables[i]?.fields\r\n \r\n}\r\nlet fields = [];\r\nfor(let i = 0 ;i < selectedTableList.length ; i++)\r\n{\r\n let json = {\r\n \"key\": selectedTableList[i].name,\r\n \"label\": selectedTableList[i].name,\r\n \"type\": \"string\",\r\n \"help\": selectedTableList[i].type, \r\n \"required\": false,\r\n \"list\": false,\r\n \"altersDynamicFields\": false\r\n } \r\n fields.push(json)\r\n}\r\nreturn fields;",

"required": true,

"dependsOn": [

"tablesList"

]

}

]

Response :

it returns a key-value pair. If the key for the column is "name", the returned value will be in the format {site: "site_id"}. To use this value, the path is ${context.inputData.inputgroupName.coloumnName}: