Created
May 23, 2023 19:05
-
-
Save nocodesupplyco/008f196c2cb0a99729cb09c0f3a49827 to your computer and use it in GitHub Desktop.
Airtable Script to Webflow Create/Update Example
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
const config = input.config ({ | |
title: 'Airtable <> Webflow sync', | |
description: 'An example script that could be used to send or update records from Airtable to Webflow', | |
items: [ | |
input.config.text ('apiKey', { | |
label: 'Webflow API Key', | |
description: 'note: anyone with access to this base can see your API key' | |
}), | |
input.config.text('webflowSiteID',{ | |
label:'Webflow Site ID', | |
description: 'You can find your site ID in admin panel' | |
}), | |
input.config.text('webflowCollectionID', { | |
label: 'The webflow collection you want to sync to', | |
description: 'You can find your collection ID in the CMS panel' | |
}), | |
input.config.table ('contentTable',{ | |
label: 'Content table', | |
description: 'This table should have the CMS fields in Airtable that you want to send to Webflow' | |
}), | |
input.config.field('cmsItemID', { | |
label:'CMS Item ID', | |
description: 'Which field has your existing CMS item ID? If there is one, the script will update the webflow item, if not it will create', | |
parentTable: 'contentTable' | |
}), | |
] | |
}) | |
// getting config settings into variable | |
const contentTable = config.contentTable; | |
const webflowSiteID = config["webflowSiteID"]; | |
const webflowCollectionID = config["webflowCollectionID"]; | |
const cmsItemIDField = config["cmsItemID"]; | |
const apiKey = config["apiKey"]; | |
// get record we want to send to webflow | |
let sendToWebflowRecord = await input.recordAsync('What record do you want to sync?', contentTable); | |
//setting up API call variable | |
let methodType =""; | |
let headers = { | |
'accept-version': '1.0.0', | |
'Content-Type': 'application/json', | |
'Authorization': `Bearer ${apiKey}` | |
}; | |
// Update method type and URL based on whether there is a CMS Item ID in the record | |
let cmsItemID = sendToWebflowRecord.getCellValueAsString(cmsItemIDField); | |
console.log(cmsItemID); | |
let url = ""; | |
let method = ""; | |
if(cmsItemID.length) { | |
url = `https://api.webflow.com/collections/${webflowCollectionID}/items/${cmsItemID}?live=true`; | |
method = "PATCH"; | |
} else { | |
url = `https://api.webflow.com/collections/${webflowCollectionID}/items?live=true`; | |
method = "POST"; | |
} | |
// Map the fields between Airtable and Webflow | |
let body = JSON.stringify({ | |
"fields": { | |
"name" : sendToWebflowRecord.getCellValueAsString("Name"), | |
"field2" : sendToWebflowRecord.getCellValue("Field 2"), | |
"field3" : sendToWebflowRecord.getCellValue("Field 3"), | |
"field4" : sendToWebflowRecord.getCellValue("Field 4"), | |
"_archived": "false", | |
"_draft": "false" | |
} | |
} | |
) | |
//This is where we update or create the new CMS item | |
let callTowebflow = await remoteFetchAsync(url, { | |
method: method, | |
body: body, | |
headers: headers | |
}) | |
let callToWebflowResponse = await callTowebflow.json(); | |
console.log(callToWebflowResponse); | |
console.log(callTowebflow); | |
if(callTowebflow.status == 200) { | |
await contentTable.updateRecordAsync(sendToWebflowRecord, { | |
"CMS item ID": callToWebflowResponse._id, | |
"slug": callToWebflowResponse.slug | |
} | |
); | |
output.text("The API call worked!") | |
} else {output.text("there was an error in the api call")}; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment