Using Airtable to power the data on your Webflow site

hey everybody i've been here from visual dev fm back to walk you through uh something new that i've been working on i tweeted about this a little bit but about a year ago i made this job uh board starter in webflow um and i'll put the link in the notes for this video so if you want to go look at this you can it's cloneable but it's just a basic job board let's we can take a look at the whole site here you know where you can have job listings and um you know this all works with the webflow cms so try not to style it too much try to keep it really basic so that way if somebody wanted to clone it style it up do what they would they could you know all of the items in the cms and available there right um but i worked on a project not only with somebody they were trying to pull content from airtable and make it display on the canvas in webflow and we've been seeing people do this a lot um or try to do this a lot do it a lot of different ways a lot of times syncing behind the scenes you know using zapier or parabola and moving content into webflow which is still a really great way to do it but you know those you have to have scheduled flows or you have to run those as your data changes and so finnsuite built a tool that lets you sync on a timer but of course airtable's got to be open so you know if you're trying to figure out like how can i pull data that's that's just you know an airtable well the problem is when we make api calls uh you know in a webflow site there we don't have a back end to hide them in right if i put code into my page into my site anytime you know i make an api call on the front end people are going to be able to see my api key i need that to get data so people can view source they could take that api key they could make calls do damage to my account but it makes this really hard and i've seen people tackle this a few ways you know one is to make an air table base share that air table base with a dummy account and then you know let that dummy account have only read read-only access and then use that api key and you're using a key but still you know it shouldn't be damaging still not great um and then there's also the air table api limit that you could run a foul of if you have a lot of traffic and so as i was puzzling out how to approach this i came back across no code api now no kit api is a tool i've known about for a little while but um it's something that i you know have i hadn't used in a bit and what it does is it allows you i can put my air table um api key in here i can then you know make an air table api endpoint just by clicking the button um and you know it's gonna say give it a name i put in my ap api key and it's going to create another endpoint for me but i can use this api and i can say you know what table name i want to get and i can choose parameters fields id view per page you know i can see the response i can get a codes i can see code snippets here that i can use which is really cool so this actually gives me you know a start on this which is really great and this is actually not far off of what we're actually going to do i did not use their snippet but it's there to use but essentially what this does it gives me an api endpoint that i can put in my code and then what's really cool about it is i can secure this endpoint so this lets me say these are the only domains that are allowed to use this endpoint so somebody were to copy that api key put it in their site it would not work this is a recent edition which makes me really excited i really love using this and so you can see i have this job board starter air table base here and this is you know all of my data that i'll be using and if i jump back over to my other browser we can get rid of what i built before so we don't need this or this or this now we have a site that looks similar but this is actually data that's being pulled from air table if i refresh the page you can see we get this loading animation and then boom everything loads right in and if i wanted to add a new job i could just jump back over to my air table base and we could add you know ben's test job um and since you know i work at workflow uh let's go ahead and use webflow we can choose you know a category um you know we'll just pick one here design and we'll just copy from this field and this field just so we have some dummy data not that we're using this here but we could and then we can choose a link whatever and so now we have another job listing and if we were to go back over to the site and we were to refresh and scroll all the way down it might take a second here for it to show up we'll see that it'll eventually show up here we're going to come back to this you'll say okay why is an instant why isn't it instant if you just added it well one thing that one thing i did mention like if we were using the air table api in that endpoint there are rate limits well one thing that that no code api does is that they cache this data for you so they make the call they cache the data and then now when you're using requests um it's a cached version of that for a while so you'll see it might take you know five to ten minutes um for your data to get refreshed and for your uh for your new listings to show up but you can see here now i've got ben's test job um you know flow full-time and then i've got an apply now button to that link that we used and all i did was you know add it here an airtable pretty fun so how did we do it well well i initially started working here and if you don't use code sandbox and you write code you're missing out so i initially wrote my code here just playing around but i'm going to jump over to visual studio code to show you what i did so this is the code that made this happen and i can show you this in the project too in fact it does sit right here uh here but in order to give a better view it's kind of hard to see this all here i figured we'd look at it here so essentially what it looks like is is walking through how to do this and this is the hardest part so when i say we're doing this this is not easy and if you're not familiar with javascript or you're not comfortable playing with code then this might be more difficult to to approach but essentially we're doing a couple of things so first things first is we're saying hey we're setting a variable so you know constant of listing and we're saying it's document git element by id listing and if we look in here we do have a container and it's ideas listing so it's pretty easy and then basically we're saying when the document's ready um we're going to go ahead and fetch and we'll say you know if the response is not okay we're going to throw an error we have a custom response that we provided here that we put together and then you know else we're gonna return the json so when we make the call we put in our no code api uh you know uh url that endpoint that no kid no code api gave us you know back over here and so um and then we put then handle air so this means if we do have an error it's going to skip all of this and jump all the way down to this catch function and what is this does is it's this puts our error on screen on the page so people can see that yes there was an error there's a problem um but let's talk about what all this code means and and how this works so basically we're saying then you know the data so the data that comes back from here the response data records for each for each one of these records in the air table we're going to do all of this now this looks really overwhelming but it's really pretty easy if you've played with code so essentially what we're doing is we're trying to recreate all of this structure in javascript and where did this come from so if i'm going to have my listings i need something that i can use so i went to a style my style guide in fact i think i actually did this in components if i scroll down here yep i have it right here so this is this is that element that gets written to the page that you can see right here right um so i have a test element and there's an easy way to grab this structure what i did what i do a lot is if we you know view the live site and we right click on this element and we inspect we can say just grab this posting wrapper we can right click it and copy copy the element and it copies all the html for this and everything in it right so that's what we did and i posted it over here um in this so this is what the html structure looks like so now we have to recreate this in javascript so essentially we're saying okay we need a div with a class posting wrapper so let's do that let's you know we're going to let our variable posting equal document dot create element so we're just creating a div um and then that's you know posting and then we're saying posting set attribute class posting wrapper so we can say this is a div with a class of posting wrapper and then right here we're saying uh you know uh listing which was back up here and we said this was our container with the id of listing we're going to pin the child posting so we've essentially put this div in that container and then we just have to work our way down we need post like you know if we look at this next one we need a post content wrapper because that's how i set this up and so post content wrapper so you know let let post content equal you know document create element diff and then we're going to post content set attribute class post content wrapper and then now we're going to get the posting that we created before and we're going to append child post content so we're putting this post content wrapper inside of this diff so this is all we're doing and then i'm not going to go through all of this obviously but this is just me creating items over and over and over again setting attributes you can see here you can set class and for images the source you know alt the loading all that fun stuff and in fact we're getting the uh some of this data from the field so record.fields company logo we're using company name um we're sending the text content so this comes all this so basically all we're doing is and this is the hard part we're not going to be able to walk you through everything and maybe in an upcoming video we'll create something in webflow and then live code create the content so you can kind of see what that's like but we created that and then basically what it's going to do is for every record it finds so for everything in the air table database for every one of these it's going to go through this it's just going to loop through them all and it's going to do this for every one of them so it's going to create an item and then put it on the page and then remember we said this skips to an error and that jumps all the way down here we've used the same same piece here where basically we're saying you know we're gonna put a a wrapper in the div and we're going to you know put the error that pops up so basically i made a custom error that shows the status um you know if it's like 400 401 maybe unauthorized or or whatever and then uh it will tell you why and then you can put a custom uh because you know you can see job listings cannot be loaded you can customize that a little bit so mine's two lines and then finally at the very end after all of that it's going to remove whether it was an error or whether it loaded the items it's going to remove the loading element so you can see on my site on the home page we have um this loading element preload it's called loading and essentially it's just here got an animation and this is to let people know that work is happening in the background right and so we pull this uh off the page as soon as we get an error or as soon as we get the items loaded it just it's going to be removed so that way we don't see it anymore but it stays while we're working through all of that so that's what this is and you can you know if i wanted to i should have done this while i was talking and explaining things but you know it's going to go off the order that's in here so if i want to order those things i can order them here you can create new views you can have a view and filter it by day you can filter it by you know if people are paying and you know you've checked it approved only the approved ones um you know and if they're only supposed to be up by dates and you have dates in here when they're supposed to expire they remove from a view they're automatically going to expire and not not be available on the site anymore right so this is this is a pretty nice way to approach you know using airtable as a backend to webflow and this is really great when you have people who are maybe not as technically proficient but they're really comfortable using something like airtable and so if you look at no code api and you say hey let's go to the marketplace and add an app they actually have a lot of apps available so you see there's a lot of different things that you can do here if you are a google sheets person hey you can use google sheets if you don't like airtable but there are quite a few options that are available all through here note my disappointment that code is not here i wish it was but this is i mean just such a robust set of of apps that are available and once again it makes it easy for you to put it in any no code tool where maybe you can't hide those calls on the back end and so there is the expense of your time up front creating those elements in javascript but once they're created you know now it's just as easy as editing an air table base it makes your life easy if we want to change the design of these things we literally can just jump into components visually style it so it's not like we can't style it visually we're using all the same classes no big deal as long as we don't change the html structure if we do we can just change our code one question that i might you might get is okay like these are apply now links that go out somewhere else what if you know we wanted a detail page well you could do that you'd actually link these all to the same page and when you clicked you could set a variable for our local storage or whatever for this this item and then you could use another endpoint to call and get item for get the content for just this one item and write it to the page or you could even use a modal have it pop up a modal like product hunt display all the content so there's a lot of powerful ways to do that i plan on making a second video walking through that process but wanted to be able to kind of show the details of how did i accomplish this what was i using and what's great is only using webflow and then no code api that's it i mean besides air table right you know there's no zapier parabola scheduled runs if i want to do things i can just do them here in fact if we move this job around let's come back here and refresh and see if it's updated on the live site yet you can see now that this job is at the top of the list now that we put it at the top of the list here so that's how it works um and so if you're comfortable with javascript this might be something you want to try if you're trying to get around limits of items and you can paginate too right so and i'll do a video on that too but you can limit this to x amount of items and then you could one click call the next page call the next page call the next page so you can do that too but if you're just trying to get um away or maybe you run into limits with the api and you know you can't add more items or maybe uh just the way the schema works so the way you know a lot of times we work with clients or you work with people and they like i has to work out of this thing it's got to be an air table or we just can't do it just wanted to show another way that you might be able to approach writing to the dom with content and so hopefully you find this helpful um once again i know this isn't super approachable but i did want to make a video to show people how i was doing it because i did i did say i would do this so i just wanted to walk through what this looked like how we did it and then i'm going to make this um this clonable tube so i'll put a link in the description of this video so you can go clone this and i'll also put a link to um github to the code as well the code will be in the uh in the base but we're in the in the project but if we go to uh you know snippets here my github repository that i work out of um and we do the write items js you can see all the code that we used is here so you could go still this and just kind of break down and see what i did how i did it and then you know steal it use it make the most of it but hopefully you all find this helpful and it's something that you'll be able to use so thanks so much for watching and we'll catch you all next time

Channel: Ben Parker

Views: 495

Keywords: airtable, javascript, no-code, nocode, nocodeapi, technology, visual developers podcast, visualdevfm, webflow

Id: bmlCCqUlzFc

Length: 18min 12sec (1092 seconds)

Published: Fri Oct 08 2021