The ultimate guide to creating PDFs in Bubble.io (tutorial)

in this video I'm going to show you everything you need to know about generating PDFs in your bubble app we're going to go through three examples the first one is a really simple invoice you can see here I built out an invoice on my bubble app and when I click on this create PDF button you see we're able to download that directly in our browser and then view it straight away our Second example is going to be a bit more of a complex invoice so you can see here it's quite similar to the first one but actually contains a number of repeating groups and it's going to be split across more than one page but when we click on create PDF you can see it's downloaded once again and we get this really nicely formatted PDF where it's split neatly across the two pages so we'll go through how to build that out our final example is going to be a custom sales report with headers and Footers you'll see here when I click on the open report button we're presented with this nicely formatted report covering various territories and when we click on download PDF we're going to get that downloaded in our browser and you'll see we have a header with the company logo and we also have a footer with internal use only and the page number marked on each page throughout this tutorial I'm going to be using the PDF creator plugin it's a plugin I've developed myself and as with the time of recording it's been used in just under 200 bu applications you can see here it comes with a detailed list of what you can achieve there is a demo page that actually goes through some sample workflows in terms of how you generate PDFs and there's also some pretty detailed instructions for specific use cases the editor for the demo app is open so you can take a look at that as well it's really easy to install the PDF creator plugin I already have an installed here but what you need to do is click on ADD plugins search for PDF F Creator and it should show up there you can either purchase a lifetime license or subscribe to it on a monthly basis in order to access the workflow actions that come with the PDF creator plugin you're going to need to drop the PDF creator element somewhere on your page while this element is showing up while we're on our design tab it's not actually going to be visible to the end user that said you do need to leave this box here which says this element is visible on page load as ticked if you untick that the plug-in will not function correctly and you get a bunch of Errors when you try to run the associated workflow actions I typically stick this element down the bottom of my page now that we've dropped the PDF creator element onto the page we need to take one more step before we actually go about building the workflows associated with generating PDFs and that's we need to enable the ability to add ID attributes to elements and you can see here from the instructions that we need to go to settings and then General so settings General and then if we scroll down to the bottom of the page you'll see here under Advanced options there is the option to expose the option to add an ID attribute to HTML elements you're going to need to tick that box and then we're good to go now let's start off for examples by creating a PDF of a really simple invoice so you can see here I've created a group that has a bunch of other groups within it all static data in this example we'll go on some more complex ones involving repeating groups later but we want to generate a PDF over this invoice and you can see here from the instructions it's pretty easy all we need to do is add an ID attribute to the group invoice element that's that group here and the way we can find the ID attribute input field is if we scroll down to the bottom of the appearance tab you'll see here we have ID attribute and I'm just going to assign this the ID attribute my invoice then we need to link the generate PDF creator workflow action to a button and use the ID attribute to Target this specific group so let's get a button and drop that on our canvas and we'll call this create PDF and then we'll go to add workflow and we'll click on click here to add an action and if we scroll down to element actions you'll see because we've installed the PDF creator plugin we have this action generate a PDF creator now we're going to get started really quickly here and there's only two fields we actually need to fill out straight away the first one is the ID attribute field so this is the ID attribute of the element that we're looking to generate a PDF of and you might remember we assigned the ID attribute my invoice to our group that contain the invoice second mandatory field we need to fill out to get up and running quickly is the scale field here you can read fully about it under the show documentation button but essentially this decides on the quality of the file I usually recommend starting off with two uh just give you sense of a scale one is the lowest quality 10 is the highest but the tradeoff between a high low quality files is that the higher the number you set the higher the quality but also the larger the file size and the longer it will take to generate that PDF so you can adjust this as you wish but I do usually recommend starting off with two and then adjusting from there so let's generate our super basic invoice PDF and we scroll down to that create PDF button and click on that you'll see here I'm getting a download in my browser and if I click on that we have our PDF of our simple invoice there's a bunch of customization options that we can use and I'm going to go through some of them now first one is the file name you can see by default it's set to my file but let's say we wanted to say invoice and then put in some Dynamic data so we could say invoice and then the current date and time and let's format in a specific manner uh let's go with that format there and now if we generate a PDF we should get the file name with a dynamic date in it so let's click on create PDF and you can see there the name of the file is now invoice January 17th 2024 so as I mentioned this scale value here is going to decide on the quality and size of the file just to show you the difference in quality I'm going to up this to 10 which is maximum permitted quality and then we'll click on create PDF again and you can see you might have noticed took even a small bit longer and if we look at the difference in the file sizes here you can see it's quite significant nearly 10 times as large in terms of the file size itself and maybe just comparing the quality this was the original one we created that had a scale factor of two and then if we go to the more recent one that has a quality with a scale factor of 10 I'm going to flick between the two of these quickly and there is a difference but it's not really that noticeable which is why I do recommend you start off with a lower value and then upgrade if you wish I'm going to going to set that value back to two for now so let's do that next up is the layout of the PDF I'm going to come back to these two sections in a minute but moving on to the layout for now you can see here for orientation portrit is the default option but I can also type in landscape you must choose one of these values or else the workflow will not function properly but let's just take our orientation when we're using landscape create that open it up and you can see here we're using landscape for the PDF orientation now and this is actually a good time to go through how the PDF creator plugin scales elements from the bubble canvas onto the PDF itself because if we look at our bubble application you'll see here this looks like a kind of typical you know portrait style page but when we look at what's been output it's stretching to fill up the entire width of the landscape PDF and I might just change the background color of this group just to make it more obvious as I go through a few examples involving that so we go to a group PDF just going to change this to a slightly gray color and we'll leave it like that and we'll generate another PDF and open it up and you can see again that it's scaling to fit the entire width of the page although not quite the height and the reason that's happening is because if we look at our group invoice which is the target element here you'll see under layout that the maximum width is set to Infinity so if given the space this element is going to spread out and take up the entire width of the canvas in reality on our bubble application it's been limited by its parent group where I'm setting a Max width of 720 but the PDF Creator plugin isn't bothered by that it's really focused on the max width of the element itself now it will stop you'll notice that it's not putting it out to the over the edges of the page but it is filling up as much of the PDF canvas as it can however if I set the max width of this element to 720 we're not actually going to notice any difference in our bubble application because the paent group is also set to a Max width of 720 but if I generate a PF now what we'll see is that it's not taking up the full width of the page and if I use my screenshotting tool here this is really handy it tracks the kind of pixels on screen and if I go from one edge of the invoice to the other it might be difficult for you to see there that's coming in at about 720 pixels so that's how the PDF creator decides on how wide to make the element when it's adding it to the PDF I might just change it back to to a portrait orientation for a minute and refresh that get rid of the existing ones and I'm expecting this to take up most of the width of the page but not quite all of it so if we click on that yeah so you can see here again this is going to be about 720 pixels wide do a quick look at that but the reason it's not taking up the full width of the page is because at the moment I am using an A4 format and you can see here there's a bunch of different sizes you can use you can even use your own custom format but if we're using an A4 page format then we can see the dimensions for that underneath here and apologies that list isn't the easiest to read that's just the best way I could get it into the plugin unfortunately bubble doesn't allow you to format it on separate lines but we can see here under A4 794 that's the width of it and then 1123 is the height of it so because we've limited our group there to 720 pixels you can see that it's not taking up the full 794 pixels that an A4 page has now if I set the mean width of this element to be let's say 900 pixels and the max width I left as infinite and then I might just take off the max width on a parent group as well this time if I generate a PDF it's actually going to go out beyond the page so you can see here it's taking up a much wider space in our Bubble app and if we click on create PDF the PDF this time is going out Beyond the Edge of the page so this obviously isn't what we want but that will happen if you use a Min width that is greater than the size of the page you're using for the PDF itself one more thing to go through in terms of how the PDF creator plugin scales elements on through the PDF so I'm just going to undo those changes I made and we now have let's set that Max we to be infinite and I want to talk about how the plugin works if you're on different screen sizes so what I'm going to do is I'm going to go to right click and go to inspect and you can see here I'm going to go on to an iPhone size screen width and a couple things to note here first of all I've done a terrible job of making this particular PDF responsive you can see here it did not format correctly if we're looking at it on mobile but I just want to highlight what happens if you're on a smaller screen size and generating PDF what's actually going to happen is it's going to be formatted correctly and if we open that up you'll see we're getting it scaled properly and the reason that's happening is because again we're not taking the width of the element on screen the plugin is taking the kind of CSS Style asso associated with the specific element and its Max width is infinite at the moment therefore it's going to take up as much space as it can on the PDF canvas and we actually end up with a nicely formatted PDF a quick note maybe on the custom Dimensions option so going back again to our workflow you can see here we have a lot of the standard style formats and then down at the very end we have custom and if you tick custom what you can do is you can put in your own custom Dimensions here and the tax you're going to want to use is the width of the PDF so let's go with 400 and then the height of the PDF we go with 800 and that'll actually get us to those specific dimensions exit of that we'll get a slightly different size PDF as you can see here so that can be useful if you're targeting very specific dimensions for whatever use case you're going after you can also set custom margins so let's just set this back to a four and get rid of that but you can see here we have top left bottom right margins that we can set so let's say I wanted this set a margin of 40 pixels on each of the sides and at the top and the bottom this time when we generate our PDF I'm expecting to see white space at either side of the invoice element if you open that up you can see that's exactly what's happening so in my case it wasn't really necessary because i' actually built in the margins are padding at the side and the bottom top of the invoice element itself but if these elements here were hugging the side of the container it could be useful to put in some margins just to give it a bit of room to breathe now you'll note that every time we've been creating a PDF so far it's been popping in to our browser download section here and I've been able to open it up but there was another option earlier on in our set of options and that was this save to database option so it's just there under Auto download um maybe first actually if you set auto download to no and then you generate the PDF it's not actually going to download in your browser like we've been doing previously but you see something happen there you might have seen the load barar just happen at the top of the screen and what's happening there was we were saving down the PDF to our database I'm going to leave AO download as no for a minute but leave save the database as yes and if we take a quick look at our database you may be disappointed to see we don't have any sign of the PDFs that we've created in app data but where we can find them is in this file manager section if we click on this you'll see here's a bunch of PDFs that we've created with the custom name that we assigned and if we click on these you'll see they open up so we are saving these PDFs down to our bubble database but what we're not doing doing is we're not making them accessible to users because they can't access them if they're only here in file manager we need somehow to linkage to a specific data type and then users will be able to access so what I'm going to do is I'm going to create a data type called saved reports I'm going to create that and then I'm going to add a new field to it called link to report we'll make that a text field and the natural thing to do here would be guess once the generate PDF creator action has finished the next thing you might want to do is go to Creation new thing create a saved report and then what you can do is you can say the link to report equals you want to find the PDF creator element that you dropped on screen so if I type in PDF you can see it's here PDF creator a if you click on that you will have access to that URL in the element itself so ideally we'd be creating new save report and then we'll be creating a link to it via the URL that's under the PDF creator element but this is not going to work perfectly and I'm just going to show you now for demonstration purposes if we generate that PDF we can see here something's happening in the background if we go into our bubble database and click on file manager uh maybe just refresh this you can see the last one was at 12:15 and if we refresh yeah there's a new one now at 1218 but if we go to app data and click on Saved reports we do have a new entry but you can see that the link to report is actually empty so this hasn't worked and the reason this hasn't worked is you may have noted when we were generating the PDFs and saving them down to our databases there was a load bar coming up there and it took a few seconds for bubble to save down the PDF to our database and what happened was we essentially created this new thing before the PDF had been saved down and we couldn't get a link to it because we hadn't actually saved down the report before adding the link to the new thing so the way to get around this and a much more robust solution is is if we delete this here so what we can do then is go to click here to add an event click on the a PDF creator saved to database element and what's Happening Here is this event is going to trigger something every single time we save a PDF to our database so what I'm going to do is I'm now going to say create a new thing we're going to create a new Sav report and the link to that report is going to be equal to PDF creator array its URL so let's try it out again I might just get rid the color that I did set on this click on black color set it the white uh and let's refresh our buile application create the PDF nothing being downloaded we said Auto download to no but if we look at our database this time you can see here we have a new entry and we have a link to report that looks promising if we click on this copy it and paste it in here you'll see here we have our save down invoice so that is a way to allow users to access reports or other PDFs that you've created and just to really kind of hammer home how you could do this uh you could let's just grab this copy it paste it and we will put a repeating group in there just to show how you can actually let users access some of the elements or PDFs I should say so let's go to that uh maybe just set the Min height first to something we can work with we get rid of that and if we go to repeating group put that in there get rid of that button and we're going to set the type of content on this repeating group to be saved reports we'll simply do a search for all saved reports we want to a fix number of rows and then what we'll do is in each one we're going to put in a link and the link is just going to go to an external URL and the external URL is going to be equal to the current cells saved report link to report then we can put in open report and hopefully now we should be able to open this invoice via one of the entries into repeating group so just click on that and that hasn't worked because I'm guessing that was the one where we did not have a report saved down if we click on the second one it can indeed open that that up so just to clarify the first one didn't work because it was this blank inro here which I might as well delete whereas we can open up a save down PDF via this link here for the other entry that we did let's now move on to our second example and on the face of it this looks quite similar to what we just did we're creating a PDF of an invoice but this one's a bit more complex if you scroll down here you'll see that we have three separate sections to the invoice we have materials and you see there's a number of different line items there there's labor and again a number of different line items and finally other so it's a bit of a longer PDF and these are actually repeating groups underneath the hood here might actually be a good idea to just look at the setup here we have our group invoice again but you can see here if we go to the parent element of that particular group we have a repeating group where we're searching for this data type called invoice items and we're getting all the invoice items where the category is equal to material just to show you how that looks in our database under the invoice item data type we have a category with cost description and quantity so when I go into my invoice items here you'll see here for example the first entry is under the labor category it has a cost description of quantity and all of that feeds through the various line items if we're using a constraint here it's limited materials oring something very similar on the other two repeating groups for the labor one if I go to that particular repeating group you'll see here restricting to those where the category is equal to labor so I have a button down here and I'm going to click on that and we will see that we have another generate PDF creator we're taking the my invoice ID attribute which is assigned to the entire group invoice so let's generate that but before we do what I'm going to do just so you can see for demonstration purposes the difference it makes I'm going to set this page break to no so let's refresh our Bubble app and we scroll down we can see those repeating groups have loaded in and if we click on create PDF you'll see here we've got this out and it's not great because we the page break set to no which means that PDF plug-in is making no attempt to try and draw page breaks between various different elements and we get this not so welcome Behavior where it's cut off at the bottom one PDF page and the top of the other so let's change that page break from no to yes and see how it looks this still isn't going to be exactly what we want but it's going to be a step in the right direction at least so we're going to click on create PDF again it'll download into our browser and when we open up this time if we scroll to the bottom of the first page this at least looks a bit better in the sense that we don't have any elements that are halfway between one page and halfway between another but OB obiously you have this big white space at the top and that's not what we want either just to give you context on what's Happening Here when the page break is set to yes the plugin is going to break it so that no element is overlapping on the page break but it also wants the elements to be continuous it doesn't want to Gap in between materials and labor so that's why it's pushing this part of the invoice down so that it's directly followed by labor section but again that's not really what we want but we can fix this what we can do is rather didn't just put in my invoice as the AUD attribute for the element to PDF as we can break our invoice up into several different sections let me show you what I mean if we go back and we click on this section here which is kind of the header section and if we go down and we call this invoice header and let's copy that and then instead of generating a PDF of my invoice we're going to put an invoice header next we're going to go down to the material section here and I'm going to put in you can see materials here the attribute is already in there so we're going to use that and I'm going to paste it in to my ID attributes now the syntax here is important if you're using multiple ID attributes which is what we're going to do you need to put in a comma after the first one a space and then the next ID attribute we're going to build out the full invoice but let's just refresh and see what we've got so far we scroll down create a PDF and you can see here now we have the header and we have the material section you can see there that they're hugging the edges of the PDF and the reason that's happening is because if you think about it previously we would have been using the group invoice and the padding was built into it but now we're using this group here where there is no padding so what you can do to make that look a bit better is on our workflow we can add in some margins on the left and the right so let's do that we put in say 30 on the left and also 30 on the right and we're also going to add in our other sections so we've added materials let's add in labor you can see that has no ID attribute but we'll add one in we'll just call it labor we'll call the other section other and we'll call this section down the end here the footer and then if we go back to the workflow associated with the create PDF button we have invoice header and materials in we'll now put in labor other and footer and let's refresh our Bubble app scroll down to the end and create the PDF open that up and this is looking better there's a bit of a white space here but it is looking a lot better than it did we're not getting any issues with elements overlapping between one page and another but I would like to get it a big bit neater in the sense that we still have this bit of a white space at the end of the first page and the solution when you come across a white space like this is nearly always to go one layer deeper what do I mean by that well if you think about it at the very beginning we were creating a PDF of this entire group here we then moved on breaking it up into this particular one and this particular group and this particular group so now what we're going to do is we're going to break it down even one level further and particularly for the labor group because if you look at our PDF you'll see here everything's fine for materials but it's the labor group here that's kind of prematurely being put on the next page so if we can divide this up into smaller chunks then we may be able to get this up and have it a bit more neatly spaced so what I'm going to do is instead of having labor here what I'm going to do is I'm going to go back to our design Tab and I'm going to divide our labor group into three smaller chunks the first one is going to be this text element here so I'm going to call this labor title the second one is going to be this kind of header section here and I'm going to call this labor header and then finally the repeating Group which is actually the parent El of this group here I'm going to call this labor body and then if we go back to our workflow I'm going to replace labor with those three elements so we'll go for labor title labor header and labor body and just make sure our syntax there is okay yep that looks good so let's refresh our editor our page I should say one more time and then create our PDF once again and this time startup is looking fine okay we're getting closer we can see now that the title and the header section have been moved up to the next page which is what we want but what we don't really want is is having the first entry of the repeating group being on the next page ideally we'd probably have maybe three or four of the line items up here and then the rest of them on the next page and I suppose an issue that you might think will arise now is we've already broken down these elements as far as we can you can't really get any further down than a text element than the group element here or particularly the repeating group but plug-in does come with some functionality that actually allows us to break this repeating group up into multiple subgroups so what we're going to do is we're going to go back to our repeating Group which is this one here and we're going to put these square brackets around the ID attribute here and this is going to signify to the plugin that this element should be broken down into further smaller chunks now we put square brackets on the ID attribute on the element itself we're also going to need to put those square brackets in the attributes on the the workflow action so we only need to do it for the labor B section and let's try that now create our PDF once more scrolling down and yeah this is much Neer this time you can see we're getting those five line items on one page and it's breaking needly onto the next page with no elements overlapping on two pages so that's how you generate PDFs of kind of more complex reports that may be over a number of pages or may contain repeating groups I think it's a good illustration of how to do that now we were using multiple ID attributes here and they were all kind of from the same Master element you know they were all in this group invoice here you don't need to have all the ID attributes to be from the same one what I'm trying to kind of get across is you can mix and match elements from different parts of your bubble application so for example if we were to get a group and drop that down the bottom of our page way away from anything else and just drop a um some text in it not quite sure where that's gone oh up here put that and that and we'll just call this um group test we'll put a boorder around it just to signify that it's something a bit different and then if we go back to our workflow here you can see at the moment we have all of these what we could do is we just for example take the header and then also add in group test and we should be able to generate a PDF with the header on top and then this below it because it is going to go sequentially depending on which order you put the element ID attributes in so just to show you how that works let's create a PDF again and again we have a header section first and then that group test IDE attribute that we also put in which represents this group group down here so you can really mix and match elements from anywhere on your bubble editor I will say you do need the elements to be visible on your bubble page for the plugin to work so for example if I took that group that we just added and I unticked that this element is visible on page load and I collapsed it so it's not going to be visible when we refresh our application this isn't going to work we need the element to be on the page to generate a PDF of it so if I click this you see there we're getting an error code because the element is not visible I'm just going to undo the various ID attributes here so we go back to what we had a second ago with a more more complex one and I just wanted to talk briefly about kind of how to give the best user experience when people are generating PDFs and one of the things I've often seen is that people don't really want to have a PDF uh like this on their page they may prefer to hide it somewhere else or not necessarily hide it but maybe have the user trigger something else and then it appears so what I often see people doing is they may have something like a view invoice button where if you click on that you're displayed the invoice and this is just a pop-up element this is exactly the same group invoice inside it and then in this popup there might be a download PDF button so if I click that I'm going to get exactly the same thing and you can see there we have our invoice which is nicely formatted so that's just one way I've seen kind of people give a better user experience for those end users that are using the PDF creator plugin another thing I've seen people do which I quite like is rather than it downloading directly into the browser or being saved to the database and you'd be shown a link to it in a repeating group what I've seen some people do is use popups to kind of present the option for users to see a link to the PDF just going to delete this group and to show you how that my work I'm going to search for elements I'm going to search for another pop popup going to make it quite small I'm just going to call this popup PDF link and what we're going to do is we're just going to get a text element here and say view the PDF and then what I'm going to do is just change the layer of this a bit to make it a bit neater put this here in the center and also on the popup itself put that there we are not going to make it fixed width but we will say fit with content and we will not set them in height on that and then what we can do is we can add a link in here so if we search our elements for link get that we just going to drop that there we're going to group the two of these in a row container and we're going to make this the next one and then what we're going to say is we're going to to set the link destination to be an external URL and if we search for PDF creator a its URL this is going to allow the user to access that URL that we've created when we generated a PDF and then what we can do is we can open it in a new tab we can change the style slightly maybe to make a match this a bit better we 16 say and put in a space as well just before it to give a bit of room to breathe and what we can do then is this pop is called popup PDF link we can go to our workflow Tab and we can say when PDF creator a saved to the database we're already saving creating a new Sav reports like we did in the previous example but now what we can do as well is we can show an element and we can show popup PDF link so now if we refresh our bubble application and we scroll down and we say create PDF you can see it's been saved to the database and then the popup gets presented and we can click on that and that's another way to allow users to access the PDF that you've generated the final example we're going to go through is how you create a PDF of a custom Report with headers and Footers if I click on this button I'm going to be showing a popup that has a report for the East territory for a particular company we can see who the report has been prepared by a chair with some statistics and then also a brief comment on the month and if we scroll down there's actually three more similar sections one for the West territory one for the north territory and finally one for the South territory and if we look at the workflow that's associated with this download PDF button it's quite simple you'll see here where using the generate PDF creator a action again and I've broken it down into four different sub reports so for example on the very first one I've given this D attribute sales report one second is going to be sales report two and so on so let's test it out and see how it looks I'm going to click on download PDF and you can see that's been downloaded and we get this kind of nice summary of the various territories but you might have noticed that took a bit longer than some of the other reports we've generated and one of the reason that is the case is because there's a bit more going on first of all you know we have these chart Elements which are taking up a bit more size in terms of the file size and you can see here under scale I set it to four you know previously we had it as two we set it as four it's going to be a bit higher quality which means it will take longer to generate and that can be seen in the file size there 3.3 megabytes not massive but not nothing either so that was one of the reasons it took a bit longer and it can be a bit frustrating for the user if they're waiting for a report to be generated and they're not quite sure if anything's happening so what we're going to do is we're going to implement a loading screen before we get on to adding headers and Footers and the way I like to do that is if we go back to our design Tab and if we go down to our floating groups we're going to drag one of these onto our canvas and we might just leave that there there and what we're going to do is we're going to set the container layout to be column we're going to unset the fixed width and we're going to unset the fit height content so this floating group is now taking up the entire page we're going to change the appearance of it a bit what we're going to do is we're going to attach the kind of style that's there by default and we're going to change the background style to be that of a gradient starting color is going to be just black so we'll put in our zeros and then our ending color will go with this color that comes with the bubble presets and we'll set the opacity there to be 40 so then if we scroll down you can see down towards the very end it becomes a bit more transparent and that's still probably a bit dark let's actually change the transparency on the first color also to 40 and then what we're going to do is we're going to get a text element and we're going to drop this in our floating group uh we're going to put this in the middle and we're just going to say loading we'll change the style a bit change the color to white make it a bit bigger put it in the center there and do the fixed width and the M height and then importantly we're going to put it in the center of our floating group so you can see it's going down here now it seems like it's way too low at the moment this isn't actually in reality going to be where it is as we'll see in a minute um so what I'm also going to do is I'm going to add in an icon and I'm going to put that there and I'm going to search for the spinner icon which is this one here and then I'm going to click on make the icon rotate change that color to white and we're also going to put that in the center of our page and we'll put down next and we can see we have an error here so let me just check what that is fling group must be right under the undefined instead is under group main container ah so I think what I did there was I should have put the floating group on the page itself but what we can do is we can just cut that and click on page and paste it in and that'll get rid of our RoR and then what we're going to do is when we are generating our PDF we're going to trigger this floating group to be seen so what I'm actually going to do first of all is I'm going to go to this element is visible on page load for our floating group I'm going to untick that and then if we go back to our pop-up container and if we look on the workflow associated with download PDF we're going to generate the PDF creator then we're going to hide the popup that the report is in which is the pop-up container and then we're going to show an element and the element we're going to show is the floating group so let's try that out we're going to have to make another change in a second but just a good way to test it with what we have so let's open our report download our PDF which is going to take a second the popup is closed and then the floating group is shown our PDF has been downloaded and one final step we need to take is to hide the floating group once the PDF has been download it because we no longer want to show this now and we can't actually do anything else on the page so what we can do is we can click here to add an event we can say when a PDF creator downloaded or then going to hide an element and the element we're going to hide is our floating group so let's try that one more time open our report up download the PDF and then once our report gets downloaded you can see there that our floating group has gone away the last thing we're going to do is we're going to add headers and Footers to our PDF so let's say that we wanted to keep our report confidential and let's just open it up here and you wanted to put something down the bottom that said internal use only well that's actually quite easy to do with the PDF creator plugin what we can do is when we are using our generate PDF creator a action you'll see here there's a section down the bottom for footer and then also for header we'll focus on the footer first of all and come back to the header part shortly we have two fields we can put some cont content in with the left footer content and the right footer content fields and I'm going to put in the right footer content in capital letters internal use only and now if we generate another PDF and what I might do is just for the sake of saving a bit of time I'm going to set the quality of this down to two just so it gets generated a bit more quickly uh let's open our report and download our PDF and you can see it's smaller size because I've reduced the scale value down to two but this time if we scroll to the bottom of our report what we'll see is we have this internal use only on the bottom right hand corner and it's on every page so that can be useful you might want to put in your company name or something like that but another thing you might want to do is put in the page counter it's not going to be a huge issue given we only have four pages in this particular report but if you had a lengthier report you may want to keep track of what page you're on and again plugin makes this really easy to do what you can do is go back down to our footer section and in the left footer content I'm just going to type in the words page Dash counter and this is a special instruction to the plugin that means it's going to count the number of pages in The PDF and then add numbers that are associated with whatever page it's on so again let's try it open our report and download our PDF and we open it up and this time down the bottom we have our internal use only and then on the left hand side it's quite faint but you can see it there one if we go down here we have two and if we go down here we have three one more thing we can do in the footer if we wish which is we can also add in a line sometimes just distinguish what's the footer and what's not you'll see there's also the options here for the font size uh for the text and the bottom margin and the left and right hand margin you can play around with them if you want I'm not going to do so now but as the name suggests they change the size of the font and the margins in the footer but let's see how our report looks when we have the line in the footer open that up and yeah you can see we have our line here this time just to distinguish that this is indeed footer content so that's how you add a footer let's think about how we want to add a header right now so let's say you wanted to add maybe the company logo and the date or the month of the report in the header what you could do is go back to you generate PDF creator action and let's say we want to get a logo that's going to appear in the top left hand side of our sales report what we can do is under header we want to put in something that tells the plugin to put an image in the left header content field but what we need to do first is actually upload an image you can see here there's a specific section on uploading an image that you can use in the header or indeed the footer if you wanted to at the current time it only supports PNG and jpegs so s3g images not supported but let's upload an image okay so I've just uploaded a Cranford Tech logo and what is important is that the width and the height Fields here are filled out and you can see from the documentation this is just describing how wide you want the image to be in pixels on the PDF and in the height as well for this particular field and I do recommend you make make these fields match the exact dimensions of the image you've uploaded so I know for a fact this image is 120 pixels wide and 40 pixels high so that's what I'm going to put in there and then what you're going to need to do is in the left header content which is where we want the logo to be displayed simply type in my image this is another one of those special instructions that are programmed into the plugin so that it knows that if my image is typed in it's simply going to grab the the image we've uploaded and add it into our PDF so let's see how that looks next open our report download our PDF and we can see here we do have our logo on the top left we still have our footer as well and it's on every page which is what we want but what's obviously not ideal is that it's overlapping with the text so what you can do to avoid that is play around with the top margin you know if I know that this particular logo is going to be 40 pixels high and I also know that we have a top margin of 20 pixels that's going to mean at the very least I want the top margin of 60 pixels in reality I probably want a bit more space just so we can breed so what I'm going to do is I'm going to set the top margin here to equals 90 pixels so let's refresh that open our report up and download our PDF and then open that up and you can see there that looks a lot more in line with what we' want we have the logo we scroll down we have plenty of space in between that so that works out quite well let's add in finally the month of the report in the top right header content field so what we can do is we can go down here and if we go to right header content let's insert some Dynamic data and I'm going to search for the current date and time and I'm going to click on this format it as and there's a bunch of different types you could use you could use today's date but this is January's report so I want to try and get something that signifies it's only for January so what I'm simply going to do is I'm going to go to custom and then I'm just going to type in month month month month mm mm I should say so let's see how that looks open our report up download our PDF and we can see that we January in the top right hand corner so that's it for this tutorial I hope this has been useful if you do have any other questions you can let me know in the comment section

Channel: Cranford Tech

Views: 928

Keywords: bubble.io tutorial, bubble.io pdf, bubble.io reports, bubble.io pdf tutorial, bubble.io custom report

Id: gaFNz7UHDkI

Length: 49min 22sec (2962 seconds)

Published: Fri Jan 19 2024