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 :





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;





[

{

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