Effortlessly Create PDF Invoice for Supervision with airSlate SignNow

Create pdf invoice for Supervision

in this video we're going to be showing how you can use this free template to generate a PDF invoice in your own app very quickly so let's take a look at how it works first we can adjust the customer name here then we can easily add some different invoice items and you can click generate PDF of invoice and it will generate a PDF once you've generated our PDF you can review it of course you'll be able to customize this as much as you need including adjusting the logo and adding any relevant payment details to the [Music] bottom all right so let's say we want to add the ability to generate invoices to our own now specifically for different users what we're going to do is we're going to start off with actually creating a copy of this simp invoices template and that's going to open up your own version of this template then we're just going to go through the process of copying various different elements of this template into our existing app as you can see there's very detailed instructions here and so what we're going to do is we're going to copy these at a high level in this video of course we'll link to this template in the description of the video the first item is to copy the database structure we'll pop over to the database structure and as you can see there's invoice and invoice items with a few different data typed to them we'll pop into our own app and head over to data and then we'll add an invoice and invoice items under invoice we're going to add some custom Fields first we're going to add customer name and then we're going to add invoice items which will be a list of invoice items and we'll add a link which will be an link to our PDF later we're also going to add in different fields for the inlo type including description quantity total and unit price The Next Step that we're going to do is add a page to our own app to actually generate the invoice this is going to be a hidden page so your users won't actually see it but it is required to generate the PDF we're going to take a look at the template and copy their invoice page then we're going to copy the container and we're going to add that to our own invoice page we'll simply just paste this into our own app we also quickly adjust the layout of the page so that it's a column and that will be good to go of course you can adjust this page to your own design but we'll get to that in a moment the next step is to add a plugin called PDF potion which you can find in the bubble Marketplace you're also going to need a PDF potion account once you've created your account you can generate an access and copy your access to the fields near the bottom of the plugin page PDF potion does come with a free account with up to 50 PDFs per month but there's also various play paid plans if you wish to generate more PDFs than that great our next step is to head back over to the template app and take a look at the backend workflows we're going to copy the backend workflow of get PDF and paste that into our own backend workflow it's very important that we adjust the name here and remove the underscore and copy part of it please note you'll need to be on a paid bubble plan in order to add backend workflows to your app if we go to our app if we go under general settings and scroll all the way to the bottom you'll want to make sure that the option to add an ID attribute to HTML elements is checked this will ensure we have a small box at the bottom where we can add in a specific ID attribute then we're going to copy part of the template page into our own app so we'll copy this section here that's highlighted in blue and it says copy this group so we'll right click copy copy with workflows and we're going to paste it into our own app at the bottom of our page you'll notice that this takes on some styling of my own with my own primary colors next we're going to copy the popup invoice item and again copy with workflows and we're going to paste into our own app we're also going to copy the loading screen and we're also going to copy the custom events workflow and we're going to copy the loading page workflow again copying these into our own app you'll notice that there are a number of Errors up here we'll go through and correct those as well to correct these errors we're going to start through a sequence of events so when the page is loaded we'll start there we'll create for the create a new invoice we're going to adjust this to invoice the customer name is going to be the input customer name value and we're going to set the state of the group that we copied to be our new database type of invoice we'll also need to go over to our group that we copied and ensure that the custom state of our invoice is invoice type this will now turn blue to show that it's all correct the next step is to adjust our popup for add invoice so we'll start by editing the workflow to show the popup uh simply click on the workflow and choose show an element and then we're going to choose the popup that we copied earlier then from our popup we're going to click on the add invoice item and edit that workflow as you can see you pull in information from the popup itself just change the type to invoice items then the next one is the thing to change and that's going to be the custom state from our group that we copied as an invoice and then we just have to adjust the thing that we're changing which is invoice items and we're going to add the invoice item from step one we're going to reset the inputs we're going to hide the popup and that's it for that one the create PDF workflow so the first thing is going to be showing the loading screen to give the user uh understanding that the PDF is being generated we're just going to reset the inputs we're going to run the create PDF action and then we're also going to trigger a custom event uh for the newly created invoice and that's only going to trigger when the link is updated on the specific invoice that we're creating we do need to update the custom event as well so that the input is the newly created invoice type from earlier then this workflow step will trigger properly let's take a look at what errors we have remaining here looks like we need to adjust our repeating group slightly so we'll head back over to our app editor and we'll update the repeating group type to invoice items as well as we'll adjust the data source to be the group that we copied custom States and that specific invoices items then from there we will adjust our completed workflow so that it hides the loading screen and it will open up the link in a new tab from there we'll head over to our invoices page and again update the repeating group type to invoice as well as the page type to invoice there is one more error that we do need to change on the back end and that's just to update the data type as well to invoice then from there we can head back over to our dashboard and test out our invoice generation We'll add in a new company name add in an invoice item and create the PDF as you can see this is our new PDF of course you're probably not going to want the Cranford Tech logo and we're also going to add in some information below here so that people know how they can pay this invoice so in order to do that we'll head back over to our app editor and then in our invoice page what we can do is upload a new logo uh into this image element here we're going to adjust the sizing a little bit to accommodate our new logo size and then we're going to add in a new group below the amount du group or Group total so we'll drag our group down to the bottom here make it a full width group We'll add in a text area and this will be our section header of payment details apply a little bit of styling and then we'll also add in the payment details which I'll quickly copy in below there we go then from there we can retest our PDF generation again adding in you know a custom invoice name adding in our invoice item and generating the PDF as you can see we have the updated company logo as well as the payment details of course you can access all of the PDF potion resources at PDF po.com or if you do have any questions please leave them in the comments below