Skip to main content

I have a Zapier that is using input fields and and a dynamic field that is pulling and gathering custom field data from an email marketing platform.

Normally when I pass the information, I use the Key from the Input Fields.The Dynamic Field does not have one.

Image of input fields

I am also adding my code to pass the input fields that I have so far. I am also going to need to pass more than one item for the dynamic content, not sure if that would be an if statement and how to do that.

Dynamic Field Code:


// Configure a request to an endpoint of your api that
// returns custom field meta data for the authenticated
// user. Don't forget to congigure authentication!

const options = {
url: 'https://edapi.example.com/v1/Database',
method: 'GET',
headers: {
'X-API-KEY': bundle.authData.ApiKey
},
params: {
'ApiKey': bundle.authData.ApiKey
}
};


return z.request(options).then((response) => {
response.throwForStatus();
const results = response.json;

var col = results.DatabaseColumns.filter((item) => item.IsCustom).map((item) => {
return {
...item,
key: item["ColumnName"],
value: item["ColumnName"]
};
});

//var col = col.filter(items => ['FirstName', 'LastName'].indexOf(items) >= 0 )
for (var i = col.length; i--;) {
if (col[i].key === 'FirstName' || col[i].key === 'LastName' ) {
col.splice(i, 1);
}
}


return col});


/*
return [
{
"key": "FirstName",
"value":"First Name"
},
{
"key": "LastName",
"value": "Last Name"
},
{
"key": "Test",
"value": "Test 2"
},
*/


Post API code so far:

const options = {
url: 'https://edapi.example.com/v1/Subscribers',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-API-KEY': bundle.authData.ApiKey
},
params: {
'ApiKey': bundle.authData.ApiKey
},
body: {
'EmailAddress': bundle.inputData.EmailAddress,

'CustomFields':[
{

'FieldName':'FirstName',
'Value':bundle.inputData.FirstName,
},
{
'FieldName':'LastName',
'Value':bundle.inputData.LastName,
},
{
'FieldName':'FirstName',
'Value':bundle.inputData.FirstName,
},

],

'Lists':[
bundle.inputData.ListID,

]}};

A couple things here to get your dynamic fields up and running:

 

#1 Your dynamic field function must return an array of field objects, conforming to the schema here.  I think you’re close - maybe use “label” instead of “value”? 

So this hits your API, gets a set of fields available for that specific user to map data into, and returns to the Zapier platform a list of field definitions to render as input fields in the Zap Editor.  

 

#2 Ok, so the dynamic fields have been rendered correctly in the Zap editor, the user has used them to map fields to, the Zap is running, and now your perform function for the action needs to access all the fields.  You know the name of the fields that you defined yourself - the ones you hard coded in the inputFields array.  But how do you reference the fields that got created dynamically?  Further, you’ve got a little bit of manipulation to do to each to get them from {name: value} array of objects you need.

Consider this contrived example (this is not code directly out of a working integration, but rather simplified stand-alone js) :

 

// MOCK TEST DATA : inputData with custom fields
const bundle = {
inputData: {
field1: "value one",
field2: "value two",
customField1: "custom value one",
customField2: "custom value two"
}
}

// utility function to render your payload body
// because you need to format them differently in your body payload
// use destructuring to grab the non-dynamic fields
// use a spread to grab everything else
function renderPayload({field1,field2, ...rest}){
const customFieldArray = Object.keys(rest).map(function(key, index) {
return {FieldName: key, Value: restekey]}
});

const result = {
field1,
field2,
CustomFields: customFieldArray
}
return result;
}

const payload = renderPayload(bundle.inputData);

console.log(payload);

// this will output
// {
// field1: 'value one',
// field2: 'value two',
// CustomFields: ,
// { FieldName: 'customField1', Value: 'custom value one' },
// { FieldName: 'customField2', Value: 'custom value two' }
// ]
// }

 

I think this gets at crux of you question.  Let us know if that wasn’t quite what you were asking about or if that doesn’t get you up and running.  


I played with it last night and it seems that I simply had to use bundle.input data. I trimmed out some other items and use placeholder info to help test, but I think that I am now able to see if I can pass more than one item in the array. 

 

I think that I thought that the dynamic input field needed a key/label, but I guess I was wrong. Here is what I have so far. 

 

const options = {
url: 'https://edapi.xyz.com/v1/Subscribers',
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Accept': 'application/json',
'X-API-KEY': bundle.authData.ApiKey
},
params: {
'ApiKey': bundle.authData.ApiKey
},
body: {
'EmailAddress': bundle.inputData.EmailAddress,

'CustomFields':d
//{"FieldName":"Department", "Value":"Test 1" }
],
}
};

// Add Items to array if they exist
if (bundle.inputData) {
options.body.CustomFields.push({

"FieldName": "Department",
"Value": bundle.inputData.Department});
}







return z.request(options)
.then((response) => {
response.throwForStatus();
const results = response.json;

// You can do any parsing you need for results here before returning them

return results;
});

 


I liked Zane’s response and it helped me to customize the API to send my dynamic fields. I was having issues mapping the fields from my fields API as they did no match the Field Schema definition. So in case anyone has a similar issue I advise to revise what your fields API sends and if it complies with https://zapier.github.io/zapier-platform-schema/build/schema.html#fieldschema