Automated Images with Formstack Documents Airtable App

in this video we're going to automatically make images with our air table data using the formstack airtable app let's dive in [Music] hi i'm kyle the creator of no code collab a site with tips tricks and tutorials for your next no code project if you haven't already please like this video subscribe to our channel and be sure to check out our website where we have code snippets and other resources to help you during your build so we're gonna make images from our airtable data using the formstack documents airtable app this was something that i saw aaron from automate all the things do except he used the page designer app the difference here is that with formstack documents we can actually introduce some logic so we can have different layouts we can have different backgrounds we can do a lot of different things using the power of formstack documents the page designer app does have some other benefits so be sure to check out his videos on the page designer apps i'll try to link those in the description but the formstack documents allows us like i said to bring in logic so that we can start to build some more complex documents before we dive in i want to give you a little preview of the end state so you know what we're trying to build so in air table you will have a base where you can add a image title so my great image title you'll be able to choose a layout layout one or layout two let's go with layout two let's make it i have a blue background so there's kind of two triggers there two variables there and then we'll be able to create a video uh thumbnail and formstack documents will automatically take what we've put in there it'll use some logic to then drive the layout the color it'll insert the title and you'll get a you'll get a image preview created for you automatically and that image will actually be saved right in the image field now if you wanted to say change that and you wanted to make one that was actually layout one and it was green you could do that as well and with just a couple clicks you're going to be able to create a new image thumbnail or new image based on your new your new variables so here is layout one that is green so this is what we're trying to build and let's get into it now okay so when it comes to creating documents with formstack documents the place that i always like to start is either microsoft word excel or powerpoint now before you run away because i just said microsoft word excel and powerpoint know that you can start in any program you can start in the google versions of those the mac versions of those you just need to get to the right file type so that when you upload your file your template file into formstack documents it needs to either be a docx a pptx or an xlsx so you need one of those three files but you can start wherever you want that's at least where i like to start now what we're going to create here is layout one so you'll see i've got two versions of the image that we're going to create for the for the no code collab youtube thumbnails so we've got layout 1 and we've got layout 2 where i'm kind of slightly bigger on the side the title is on top and the logo is on bottom here the logo is on top and the title is on the bottom really what's going on though is all i have a title and i've got an image right and then over here on layout two i have an image and a title okay so that's really what we've got going on we've got layout one or layout two and then i actually have different colors as well so do i want a green background red background or blue background in both layout one or layout two and then i have the title so those are the things that are going on i'll just quickly show you the different color layouts so i've got the blue layout in one green layout and red blue green and red and then in layout two i also have blue green and red okay so i've got which layout do i want and then which color do i want in that layout and then i have a title so now what i'm going to do is i'm going to create my i'm going to create my air table so now in air table what i've done is i've created a really simple base i've just got a title a layout color and that's really that's really it so i can this is my tape my title is a free text so this is this is my video title i've got a layout and like i said i'm either choosing layout one or layout two this is a single select field and then i've got a color which color do i want blue green or red so i've got blue so really simple base the only other thing you need to do is you need to add the formstack app to airtable of course you will need to have a paid airtable account you will also need to have a formstack documents subscription as well but once you do that you just click add an app you can find formstack and you can add the formstack documents once you do that it's going to ask you for an api key so you just jump over to formstack documents if you click api access you go to a page you create a new api copy paste very simple so that is all you need to do in in air table okay we've got title layout color what we're doing is because we have two different layouts what i want to do is i want to create a data route because what i need to do is i need to say do i want to create document one or do i want to create document two and that requires a data route so in order to create a data route in formstack documents what you do is you first create both documents so i create layout one and layout two and then i create a data route and that data route then allows me to say when that when something is true choose choose layout 1 when something else is true choose layout 2. so the idea here in formstack documents is i create both layouts and then i create a data route and it's actually the data route which is going to choose which layout to to build and we're actually going to an air table hook up to our data route so that's the overview of how we're setting up formstack documents the only other thing that's worth noting here is i have created those background images that have the different colors so i have layout one i have three colors for layout one and then i have three colors for layout two what i've done is i've exported those i have those as a file now i'm hosting those what i've decided to do is i'm hosting those on webflow i've loaded them up on my i've loaded them up into my media my assets and i've dragged them all in so you can now see layout 1 and layout 1 and layout2 the reason that i'm doing this is because formstack documents when it's adding the background for the document it needs to be able to pull a file that's hosted on the web so you don't actually store your images in formstack you just pull that from a you pull that from a public url so in this case what we're going to do is for layout 2 we're going to copy this address and for for layout 2 red for layout 2 blue we're going to copy this link address so that's another thing that we're going to do so we've got kind of three tools that are going on here but as you can see i have these blank backgrounds okay so now let's jump back over we've got our air table set up very simple we've got all of our images hosted in web flow and now let's create our documents in powerpoint so if i jump back over here this is what i want to create now what i'm actually going to do though is instead of adding this image what i do is i am going to have a text box and inside of that text box i'm going to put some code or some some tags and things and some logic that formstack documents will understand and that's where this first title page is let's jump over here it'll make more sense it's a little cleaner so on layout one what i'm doing is i'm effectively i have this big text box that's filling the back of the screen excuse me and it's filling the the whole screen and then because i want my title to be white i've added a dark i've added a dark box behind here otherwise we wouldn't be able to see the title so that's why this looks dark so what i've done is i've created a text box and inside that text box what i'm basically saying is if the color that i choose in air table is red then insert the image that i'm going to call layout 1 red otherwise if the color is blue else if if the color equals blue then i want the layout one blue background image to be inserted and these numbers here are my dimensions so i want it to be 1280 pixels wide and by adding a zero the height is going to automatically it'll just fill to the height of the image it'll keep the aspect ratio then i've got else if the color equals green then add in my layout green image so i've got three logical operators that are going on here where i'm just saying if the color's red add the red image for layout one if the color is blue add the blue image for layout one pretty simple stuff here the reason that i have the title where it is is because what i've done is i just copied this from that screen and i moved it right over and now it's in the right place so i basically designed it out here on this screen and then i copied it over also another thing if you're not familiar with formstack you always start all of your little tags or your variables you start those with the curly bracket dollar sign and then you close it off with the curly bracket so anytime you see anything like this it's not going to actually get rendered in the in the final output it's using that as code it's it's reading through that so i've got layout one now i've got layout two now because this is higher up on the page when i copy paste it actually overlaps all my stuff so that's why it looks a little jumbled but the idea here is the same just move this quickly if color one equals red then what i'm going to do is i'm going to add layout to red image if it's blue layout two blue now i haven't i have made up these variable names so you can name them whatever you want for me that just made the most sense the tag names are the variables for color title eventually layout when we get it into formstack documents they need to match exactly they need to be matched exactly to the air table column headers so if we jump over to air table you'll see that it's color layout title it's case sensitive be sure that everything is exactly the same and here i've got title capital t here's my color capital c so now we've got our powerpoints ready we've got so we've got both layouts ready now let's jump over to form stack documents so when you start this process you're going to create a new document you're going to name it whatever you want then you're going to say that you have a template a document that you'd like to use so you're going to choose your layout file your powerpoint then you're going to deliver use a different third party because you don't need it emailed to you and you're going to integrate with an external service so those are the things you need to do to create your document now i've already created them so we're just going to delete this quick but if we go into our our two different documents you'll see that we have our file so when we edit in browser we can see that we've got our our file here slide number one was that that darker slide and then slide number two had the actual preview because we're going to save this out as an image they're only going to render the first slide so we don't really care about the second slide then in my settings i'm going to save it as a jpeg my dpi is going to be 72 because that's all that the internet can handle that's what's rendered then i've got a layout i'm changing the the file name of the image to include the title i'm going to save those settings the other thing that i always do is i always use my field map and you'll see that that's going to be important so you have to go to advanced settings field map save settings and then you're going to get a tab along the top that is your field map once you have your field map you can click on it and you'll see that we have all of the variables that were in our powerpoint so we had color title and then the three layouts now what we're doing is as i mentioned before you can see here i've got a file i've got a url and if i copy that url and visit it you'll see that this is my red layout this is my layout one red i got this url from webflow so i got it right from here from my copy link address and then i and then i pasted that in i went to the blue layout file i went back to webflow i chose the blue layout file i copied that link and then i went back and i pasted it in so i basically said and i'm telling formstack that the the variable layout one red is this url the variable layout on blue is this url and so on and so forth so those are the three that now i'm taking the files that i'm storing online and i'm putting them right in formstack documents so now i have created my first document the next thing i do is i create my second document you can do this by just copying layout 1 creating your second layout you'll want to update the you'll want to update the file so then you'll have to upload a new file you upload you upload layout 2 then you go into your settings you're going to update the name you're going to say jpeg you're going to update all the stuff you're going to then go into your field map and you're going to update the links update the links to your second layout so this is layout 2 and as you can see i've got layout 2 red layout two blue layout two green so now what i've done is i've updated those three images so now what i'm saying is now i've got my two documents they're all ready to go if you want to test you can test and you can put in a color and you can put in a title let's just do it right now and you'll see that once you test it's going to take the the colors i put in red as a as a um as a color and when i look at this i pull it over you can see that my i've got the red background this is the title this is the title now if i update this to green because remember i have that logical operator in there if i update that to green i should get a green background where it says this is the title and there we are i have a green background where that's the title so we know it's working cool so now we've got our two documents now we're going to create a data route you go into data route you say new data out you name it test and now you are you have the option to add all these rules right now i'm going to come back here and just delete that and we're gonna go to our video thumbnail and we've got our rules and what i've done is i've set up two rules and what i'm saying is rule number one is gonna send we're gonna send this to layout 1 we're going to send the data to document 1. and i'm going to trigger this rule if the layout and you remember this over here if layout equals 1 because those are my that's one of my options if you can see that here that's one of my options and then i'm gonna add a rule you click add rule and i'm gonna send the data to document two if the layout equals two pretty straightforward if you wanted to add another condition if you had more variables in there more data in your air table you can add more more conditions you can add if you had you could have 10 layouts right and then you would just add another you would add another rule that would send it to layout three and then you would have a trigger if the layout equals three so you've got it's uh you've got a lot of options here so now we're good on the data route let's go back to air table what i'm going to do is i'm going to open my app formstack documents shows up i'm going to select the row and i'm going to call this one let's call this automated images with air table and stack so i've got my title i chose my layout i've got my color now what i'm going to do is i'm got that and what i'm actually going to do is see how i formstack documents the airtable app is showing me all of the stuff that i have in my formstack documents app and what i'm going to do is i'm going to choose the video thumbnail because if we come back here remember we named our data route video thumbnail so i'm going to come back to video thumbnail i'm going to choose upload the document document to an attachment field and it's going to be called image so i'm going to the created document is gonna go right into the image field and i'm curious i wanna open the document ever it's created so here we go i should get layout one with blue and it should it should say automated images with air table and formstack here we are automated images with air table and formstack it is a layout one blue if i come back and i try updating it let's try layout 2 and let's do green select my data route and here we go and notice how the image ended up right in my image field so i've got that saved didn't have to do anything here we are layout two green automated images with air table and formstack so now i've created a a pretty simple little thumbnail creator that has multiple layouts multiple colors the one thing i will say is these look a little pixelated so i'm going to come back here to my layouts my documents i'm going to manage the file and i'm going to see if i can actually increase this and let's see if that does anything you wouldn't think it would but then again you also would think that it would all right so let's see now i've updated my i've updated my documents i come back here let's do a red one let's do layout two in red and video thumbnail now the cool thing that you can do is you can insert images so if you wanted to drag an image and then include that in the final image you can do that as well there's some documentation there that looks a little better especially if i zoom out that looks that looks a lot less pixelated than than that guy yeah so maybe keep your keep your images at uh 300. so yeah and now the beautiful thing is inside of my images i can i can open my record and i can see all of my all of my different thumbnails all my different images so this is really just scratching the surface with what's possible with formstack documents because we can use logic we can really do some cool things hiding and showing pages and sections and images and we can use logical operators and comparisons to drive different parts of our document and different content so it's it's really a powerful tool definitely check it out if you have a document that you want automated that is complex because that's really what that's their bread and butter so hopefully this was helpful hopefully you think it's cool also check be sure to check out automate all the things and aaron's channel he's got a lot of great things on airtable so hope to see you at the next tutorial [Music] you

Channel: No Code Collab

Views: 54

Keywords: Airtable, Airtable app tutorial, Formstack, Formstack Documents, Formstack airtable, Formstack documents tutorial, No Code, Webflow, formstack, formstack documents

Id: wCEW5Ty1J1k

Length: 24min 5sec (1445 seconds)

Published: Fri Oct 08 2021