Tonight I just did something I can’t wait to show you. There are thousands of users who use Airtable to create online data applications with. So I thought that if you have a lot of data or something inside Airtable why not connecting that data to Wix Code.
So I hooked up their API, created some data and use it as data source for a repeater on my page. I even created a form on Airtable that took 30 seconds and connected it so now I can enter and upload items to Airtable that is displayed in a repeater. The whole thing took some hours to do and test but I created a new course for anyone who wants to use this. It’s like magic.
Pretty cool, super easy but really amazing. Shows the power of Repeaters!
I’m considering purchasing your Airtable code. I would like to use an Airtable database to either populate or replace an existing Wix database for interactions with both repeaters and code. Then sync the Airtable database with google calendar so that changes to the calendar adjust the database and vice versa. Will the code on your site allow me to do this?
I have your full source code package - quite nice I might add. Where can I see the tutorial on the Airtable interface?
Do you have any examples of looping through linked tables in airtable, that is to loop through an array of field id’s returned from a field in airtable?
Hi Gary, yes I did. Here is my backend aritable.jsw
// Filename: backend/AirTableAPI.jsw (web modules need to have a .jsw extension)
import {fetch} from ‘wix-fetch’;
export async function GetCollections()
{
let appId = “XXXXXXXXXXXXXXXXXX”; //Base ID for your AirTable
let apiKey = “YYYYYYYYYYY”; //AirTable API Key
//grab all records from my airtable collections table
return await fetch( “https://api.airtable.com/v0/” + appId + “/Collections”,
{
method: ‘get’,
headers:
{
Authorization: "Bearer "+apiKey
}
} )
.then( (httpResponse) =>
{
if (httpResponse.ok) { return httpResponse.json();
} else { return Promise.reject(“Fetch did not succeed”);
}
} )
.then( json =>
{
// return Promise.resolve(json);
//list each collection record found in json;
let contrec = ;
let contdata = ;
let tempData = ;
let records = json.records;
records.forEach( function (entry)
{
contrec = entry.fields.Content;
contrec.forEach( function (rec)
{
contdata.push ({rec});
});
console.log(contdata);
tempData = {
_id: entry.id,
Title: entry.fields.Title, // title for repeater
Description: entry.fields.Description, // description for repeater
Image: entry.fields.Image[0].url,
Content: entry.fields.Content[0]
},
console.log(tempData);
});
//Instead of returning return json, you need to return a Promise.
// Since it is a result and therefore resolved the thing to do is resolve the Promise immediately. return Promise.resolve(json);
} )
. catch (err => console.log("Error: " + err));
}
@curator Thank you SO much, Tom! So, as I understand it, the steps would be as follows:
Create backend database titled airtable.jsw.
Question…does the code above get added to the airtable.jsw page or on the page with the repeater?
Question…in the code above I input my own Airtable base ID and API key, and I changed “collections” to my table name, which is “Products”. Any other changes I need to make to personalize the code?
Is there additional code to add to the repeater page?
the airtable.jsw is a backend module which you create and paste the code into… in the /backend folder. ( in other words, airtable.jsw is not a database, it’s a backend module )
ummm, no I don’t think so. Just ensure the airtable apikey and table are in sync
Here is the call to the back end, that I used in my front end page to get records back from the airtable.jsw. If all works, you’ll see the records coming back in the console log, then you can work this data into the repeaters.
import {GetCollections} from ‘backend/AirTableAPI’;
$w.onReady( function () {
//TODO: write your page related code here…
});
export async function load_click_1(event) {
//Add your code for this event here:
GetCollections().then( function (product) {
console.log(product);
});
}
Let me know how things work out. btw, I didn’t use airtable in my system because as far as I know, airtable doesn’t bring over reference field data, like wix does when you do a query with the .include option. That was the clincher to go with wix data structures.
@curator OK…I customized your page code to be following (I just changed any instance of the word “collections” to “products”, and put it at the bottom of my front end page with the repeater.
import {GetProducts} from ‘backend/AirTableAPI’;
$w.onReady( function () {
//TODO: write your page related code here…
});
export async function load_click_1(event) {
//Add your code for this event here:
GetProducts().then( function (product) {
console.log(product);
});
}
When I click Preview, nothing happens. Here’s a screenshot of the Preview. BTW…I have not customized the Repeater at all yet.
(just a point… export async function load_click_1(event) is a handler for a button on the page; create any button and put this code in the button handler… )
Gary, many times the ‘handshake’ with the 3rd party API is the issue. Put console.log() calls around the functions in the backend module .jsw logic to see if Airtable is returning the data you expect. The tighter you bracket this function, the easier it will be to see if the API is working.
So many times the issue I find is with the API, and the way that functions. BTW, that includes the wix fetch call, in many cases. (In fact in another instance, I had to add the request-npm module to support octet-streaming of files from an http call, because I couldn’t understand how to do that with wix-fetch … probably my ignorance ).
IOW, I find that the issue is on the call itself, and not the functions on the wix side. So you want to bracket the problem using console.log functions.
Are you getting data back from Airtable?! If not, then there’s an issue with the way the API was set up - by you unfortunately - on the airtable side.
I hope that makes sense… and don’t worry; it works and soon you’ll have a breakthrough and can share that with all of us.
@curator OK…so when I look at the console log, it does look like things are happening! Here’s my issue…I don’t know how to do what you said (just a point… export async function load_click_1(event) is a handler for a button on the page; create any button and put this code in the button handler). If that is too rudimentary and just plain annoying, you don’t have to walk me through it if not, can you give me some guidance? Again, you’ve given so much time already…no worries if my questions are too basic. THANK YOU!!
and now you’re on to coding in wix. That’s beyond the boundary of this thread topic
You’re off to learning how to drop in buttons and other user elements, and how to hook them up to even handlers, which is foundational wix coding. There are many good teaching tools on the web. Wix videos are good, Nyeli(?)… Code Queen. But back to Andreas… this youtube video on wix development best practices was very helpful, and should help right from the start (thanks Andreas! ) https://www.youtube.com/watch?v=BzAHCaflzY8
Hey Gary. Sorry to hear you’re stuck. I will try to help you out - no promises I can fix it - and not for money. I have a busy schedule right now, but would try to get to it on Monday am - European time ( I live in France) - if that works for you.
Please email me at curator@lovedintolife.com . I’d need to see what you have set up in Airtable and your wix project.
)