Connect Webflow with External API - Display Data, Create Page Content

let's see how you can connect web flow to an external API to show data in cards and other formats like this where each data point here is coming from an API we'll be doing this with build ship Bild ship is a low code visual API Builder that lets you connect to any data source for example here I have connected to bip's own database but you can connect to air table Google Sheets Firebase superbase any database that you want and start showing that via an API on your web flow page so let's get into it in just three steps first we'll be cloning the bill ship web PL template and this gives you a immediate access to a simple API that you can use to fetch data from any data source but let's just start from scratch for the purpose of this demo so let's give this a name webflow API and let's create it now if you're starting with a template you will see the complete workflow right away but let me show you how to build this from scratch you can think of workflow as something that takes a bunch of input and gives it an output and you want to create an API that can be used in web flow so let's first add a trigger and use the rest API call for it you can use either get or post type of request we'll get into that in a bit now you want to store your data somewhere for fetching and showing on the web Flow side you can store this data in add table you can store this in Google Sheets you can also use the built-in database that bill ship comes with which is a spreadsheet like experience to manage your data so let me go ahead and create a database table on Bill and give this a name let me call this webflow data when you open this you can either import from an external Source like a CSV file or you can add column 1 by one and manually populate it let me just pull this data from a spreadsheet so here I have spread sheet with a bunch of information that a furniture shop would sell so let me go ahead and import this data from CSP by dragging and dropping it here now you can select all the feeds that you want to import let me go ahead and import all of that and let me give a double check on if the field types are as I expect so there's a bunch of text Fields single select multi selects and some number Fields so that looks good to me I can do a quick preview of this data and click finish and this data is ready for use and serving it via an external API to web flow now remember I said that this data doesn't have to live in this bill ship database table it's just a convenience you can connect to your air table for example by just clicking here searching for your ad table base by creating get record and just passing in the information for your add table API key securely throw in a secret manager on Bill ship your base ID table ID and so on and you are serving that via an API when you ship it using this simple link let me give this URL a path first of all let's call this webflow API this ensures this is a unique path specifically for this API now I'm not going to use a table for this example I'm using the bill ship table so let me do this bill ship collection query so collection query is nothing but getting data from the bill ship collection table that you have so let me do the collection query The Collection name is nothing but the table name that you just created so let me go back here and try to get the table name and the way to do this very simple you just go here click the edit button and you see the collection name here that's exactly what you want and you can copy this and paste it back here now you don't want to serve the entire table right there might be cases when the user is requesting certain Furniture type or something so you want to filter it down so that's what this filter is for uh and and I have made this request type to be get because you can then pass the users's request in the URL itself you can obviously do the same with post by passing the users's request in the body but for Simplicity let's just say it's a get API call okay so let me go here and add the filter now if you're not sure about any field you can just click this info panel and it'll give you a sample so let me copy that over and come back here and paste this in there are few things to note here first is you need to say what is a field that you're filtering by and the operator if you want to do a exact match and you can do a value that's the value that the user is giving you from this API call now if I go back here to this table I want to do filtering based on this category so category in small cases you can just click here to copy it and you add the field name to be category and the value is not something static like this you can use this way to test it so for example if I add a static value of sof far you can test it out you can do this kind of a test right you can come here see this test value you can add a hardcoded value that is very much just for the purpose of this test you can run a specific node to see what happens so as you can see there is a error here which means that there's something missing the limit field is not an integer so here you don't want to return back the entire table you want to limit it by certain number now you can make it high or low that's up to you but if if you think about it on the web flow page you don't want to display at a time a million records right you just want to show like 50 at a time or 100 at a time and then people can scroll down load more so let's say for the sake of this experiment let's just make it 10 and also this order buy if you look at an example in the information panel is just what field you want to order the results by if you want to do ascending and descending we not going to do that right now so let's leave it as it is and let's click test okay there you go so you got 10 results and all that results that you see here are the Json representation of the data from this table okay so you can also update the output schema what this does is it tells you that hey this is the schema of how the output generator looks like that you can return back to this API call so let me just click this here okay now as I said you don't want this field to be hardcoded you don't want to always just return sof far you want the user to say something and that becomes the output right right so you can update this to be a dynamically populated value in this expression editor by selecting this variable called request and you're passing the request of what the user is asking in the query and you can do query do category so assuming that's what you want the users to pass in and then let's return the response which is all the data that was fetched by this node so you say return and you can say request which is or you can say collection query and the document data you want to return that now let's test this entire workflow by giving some category and example and clicking test oh we forgot to hit limit here we only put it in this test so this gives us a handy error indicator of what is missing where so now I can add that and test again there you go so this workflow is fully ready for you it can take in a request POS it in filter and give back the data there's one small thing that I want to highlight here if you test it without this category it'll give you some error like hey the value is not defined that's because in this filter is always expecting a value but in your API request you might or might not send the value right you might want to just get all the data sometimes you want to filter it and so on so we're going to try it out by adding a condition here that if the category exist use this filter otherwise don't use any filter so let me edit this using AI let me say if the query parameter has a category and it is not empty then use the filter otherwise no need to use any filter so let's try this and it takes about a few seconds and then it comes back with something and as you can see it just added like an invalid variable because this doesn't know how the query parameters look like so if you go here and edited and add this category here and give it a name and it's a string then it will know what this is but since it didn't know that it was not able to fetch it before but now as you can see it is able to say request query category if it's available this question mark means it's true then use this otherwise there's no filter so let's try this again with no category in your body or in the query there you go it's able to fetch all the data and if I do give a category then it'll f filter it down just to this so far so this is a great way to create an API that's actually filterable and you can use this then on web Flow side to create categories and filter them now in this first step let's just go with the plain API call let's click ship and get this end point that you can copy over and head to webflow website where you can start connecting it if you don't want to build it from scratch the way I just showed you can actually go to the template section and copy this web flow basic API template we'll be adding a few more templates in the upcoming video series about using filters and other things okay now let's head over to webflow and we have created this handy clonable page that you can take and start using it for the specific example and obviously you can change this any way you like with your own data points so I have cloned this template here and let's dive into it here we have you know all the things that you typically need in your website like title and so on but in between this is the place where magic happens so here I have added a card grid I did this very simply by going here and selecting the grid element and placing it wherever I want in my website and once I have this you can then see that inside the card I have a sample card style that I want to apply to all the data points that are coming in I have hidden it here so let me go ahead and display it as block so that it shows up I have a clask here called hidden to make it hidden but it's a very simple card with a title description and price in a style that you would like obviously you can change this to anything you want now this card is forming the base of how your data ends up showing you can add image you can add other things and I'll explain what goes inside this card and how it's connected now so here first on the card you need to give this card grid a ID let's just call it card grid okay and then the s Le card you are giving an idea of sample card okay easy now inside the sample card you can have as many elements you like and then inside this card you have a bunch of fields that you want so I have like a title field and for this you need to mention the style as anything that you can recall later inside the code snippet that we will have so I have card title I have card description and a card price okay now I need to go to this page settings and in here under the before body tag I just need to paste a code snippet this code snippet is available for you in this video's description and you can copy it over but the interesting thing is the entire code snippet here I was able to get it by talking back and forth from AI like Cloud 3 or you can use chat GPD essentially you can tell hey these are all the elements and I want to fetch this in web flow how do I do it and you can take the sample code snippet that we provide and provide that as a base and edit it as well okay so let's go ahead and see what each of these elements are inside this code snippet so here we have first inside the script tag so make sure your code is entirely within the script tag and we have very basic function of fetching the data the API URL here is the one that you are getting from buildship so earlier we copied it and we just have to paste it here and replace this URL then what does is it fetches the data and if there's any error in the process it just puts an error in your website's console you don't have to change anything here the second section is if it's able to fetch the data successfully it's calling the display data function which is right here and what this function does is it first finds out in your website a element by the name Cod grid now if I go back to the website you might remember that here this specific card you gave it the ID of card grid so coming back to this settings you'll see that it's the exact same card grid all right so inside that card Grid it's trying to First go through each item that you fetch from the API so in the API if we have limited to 10 items this will run through 10 times and for each time it runs for each item what it does is it gets the sample styling from your sample card that you had and if it's not able to find a sample card or if you have not configured it correctly it gives you an error right so we can skip that part and what it does is it clones that sample card as a card makes sure the styling is displayed as a block because our sample card we are making it hidden by making the display setting of it as none so it's hidden so we want to make sure the display is blocked so that it's actually showing up so each item in your API it's creating a card by cloning the sample card and then what it does is inside the card it finds these elements so you see there are three items being mapped one is the card title card description and card price each of them are mapped from the incoming API item or file description and price and if I go back to the table you'll see that the title here is actually called file so that's why we had to call it file here and not title whereas the other two Fields description and price are just the same so we just have to map it as it is okay now finally each of these items have been appended to the card now you have appended this card to the main data container and all this happens when your website loads so as soon as your website loads it calls a fetch data function and fetch data here calls your API and once the data comes back from the API it calls the display data and then display data creates all these cards Maps the fields from the API to these cards and then adds it to your website so many things happen but super fast so let's actually see this in action right you have created this by cloning and if say suppose you had other items in your table or add table all that you need to do is when you test out this web flow API you'll be able to get the values right here and you'll be able to copy this to some other text editor so you're able to see clearly what is the different fields so here we have file price and map that correctly so that's the part which mostly chips up people so if you do that correctly and then you publish it and then you look at the website you'll see that it all starts to show up now because I didn't hide this this sample card is also showing up so let me go back and select this card and make the style display as none and let me publish again and let me go refresh this there you go the first card has disappeared all these comes up now this is a very basic styling you can style it any way you want you can also add images Etc but in this video we'll just wrap it up here so this is a very basic idea of how you can call an external API and show that data on webflow in the upcoming parts of this video series we'll also explore other things like how you can filter how you can start showing other data points so filtering as a concept we already briefly explained here that if you don't have a category everything shows up you can have category like specific materials or items and it already filters so API wise is already ready but we'll see how you can actually plug it into webflow so you'll be able to have a lot more power to your webflow websites and start building an applike experience which is super interesting and without any of the CMS limitations of the number of items that you can have hope you enjoyed this share your feedback as comment of what you would like to see us build with web flow thank you [Music]

Channel: BuildShip

Views: 1,731

Keywords: API builder, no-code backend, low-code backend, automation builder, AI powered workflow builder, visual backend, backend builder, no code google cloud, low code google cloud, no code AI workflows, webflow, webflowapi, api, external api, instant api, nocode api, lowcode api, nocodeapi, api builder

Id: 37OWdxxQc4U

Length: 17min 5sec (1025 seconds)

Published: Tue Apr 23 2024