Collaborate on Invoice HTML Template for PDF for Planning with Ease Using airSlate SignNow

Invoice html template for pdf for Planning

in this lesson we're going to go over how to create an advanced pdf as well as how to assign a new custom advanced pdf to your invoice or sales order or really any place where they're being used and make sure that you get all the configurations set up and understand how that whole process works if you don't know what an advanced pdf is it's essentially just an invoice or a sales order and how that whole document looks and how the information is displayed on that document to start off with we're going to go into customization forms and then advanced pdf html templates and inside of here these are all the different types of advanced pdf templates that you can use if you see customize next to it that means that this is the standard one that is provided and this cannot be edited directly you would have to essentially create a copy of that by selecting that customize in this example we're going to go over an invoice or i'm going to search for the invoices and you can see that over here in type that's the different types it has and i have quite a bit here already but we're going to just create a new one based off the standard so i'm going to look down to where there's probably a customize because that means that's the initial one and that's what i see there says standard invoice pdf html template i'm going to select customize and here i'm going to select the template setup and change my name to a tutorial invoice template and then you can add some description here as well if you need it to or maybe a different id as well and you can also change the way the page looks whether it's portrait or landscape and the different sizing of those pages in margins too generally they're just kept like this i don't think i've ever seen any that aren't like that now that we have this created you can see that we have this builder tool here there's two options for creating your advanced pdfs you can use this builder tool which has some preset things done for you right now or you can also click this source code which will bring up the code of it and allow you to access that more directly this really is my favorite way to do it through the code because i'm a developer and it just makes a whole lot more sense and then i don't have to deal with the tools that are not always the best optimized to set these up and really this tool is not my favorite for a click and drag type tool the next thing now that we have figured out that we can create this new tutorial invoice pdf template i want to make sure that it appears whenever i do print it what i need to on an invoice so i'm going to click save and once it's saved i'll just confirm that it shows up in the list where i want it to and i'll just find it using this invoice i'll scroll down and there it shows up right there that's good the next thing that we need to do is we need to make sure that this advanced pdf is the one that is going to be called out onto the invoice whenever i print it because right now it might not have this one particularly assigned to it so i'm going to go into the invoice of one of them so transactions and sales create invoices i'm going to select list and i'm just going to select the view on this first one and i need to customize the form to make sure it's using this new one and i had just done this but normally you would you could create a new name this will create a new transaction form and then you would select your print template and for us it's our new one that we just created and that would ensure that this one is the one being printed right now for the email template being sent out it says other test email invoice and it will not be the same as this one and you don't really want them to be the exact same because coding is a little bit different for an email template otherwise you're going to get some really weird email styling and it'll look way off so that's it's really a different skill set going on so now that we know that we have this print template we're going to just click save and yeah i really want to submit it and i'm going to go back into transactions uh right now we're in the custom trims action forms which is located forms template transaction forms and you can just see that the one that we were just editing within there is right here just so you know let's go back into the the invoice and i can show you where we're going to be printing the new invoice whenever we're ready the advanced pdf we're going to go into sales and create invoices just look at the list of them i'm going to view this one there's this print now this is totally the native one that we selected we have not customized this form at all so that's how it's gonna show up so i'm gonna select print and it'll give me a nice preview of that specific invoice information on the template okay so this is what we get now we know that we need to do a little bit some customization because the information is way off now just from experience i know that what's going on here is simply because the logo that i uploaded into my company information was a much larger image file size and it doesn't automatically reset it so i have to go manually go change how that would reset into a normal file size normally this would be on the top left corner but at least now we know that this is how it would look if i didn't do anything at all now let's go back in and do some editing to this to see if we can get this to look a little better i'm going to go back into the customization and the forms advanced pdfs and then i'm going to search for the one that we created the tutorial and i'm going to select edit and this is what i'm talking about right here this image was really big the file size was and that image is sourcing using something called free marker and it'll it'll source the id of fields without doing anything special to them you can select this to edit the code directly but as soon as you do this you risk the chance of breaking the way this configurator works so i would say if you haven't gotten an experience using the coding then maybe create a separate one and and go from there and you can copy and paste code over pretty easily so just just know that as soon as you start editing the code you you run the risk of this breaking a little bit more and honestly that's not a big deal because you'll realize soon enough that it's better just to write the code for it so i'm going to right click on this image and select the image properties and you'll notice that this is kind of a preview of that information but we saw that we had a massive logo that stretched really large so we can override the width i'm going to say probably like oh 200 or so and then a height maybe of 100 based on i know how our logo looks right now and i feel like if i select okay it does create this little outline so i know what it'll look like and then this other information is different types of text you can also select this text and change the font sizes and in different fonts as well and do some bullet pointing and change the way that company name would would look this right here is pulling in the id of that company and what that means is that in my company information if i go over there there's an id for each of the information that they're pulling through like this address this main address text they're going to be pulling this information through and each of the ids like if i wanted to show the website that it would just be the company information dot url is how the code would look uh something similar to that if i'm not mistaken and we could go in here and i could edit this a little bit more in detail if i needed to you'll notice that this is actually a table so there you go there's some rows and some columns here i actually am going to go ahead and right click and select table properties and you'll see that it's stretching 100 there's three rows and two columns so there's this column and this column and this one over here is actually in three rows and you can what you can do is you can override styling if you know some html you can override this to say like color are one of our colors that we use and i can change this all to becoming an orange color within here which which is a nice way that you can quickly do some styling changes if you don't really want to edit the big form but let's go ahead and give this a little preview this is preview button over here okay so this is a little better at least the image isn't going way off the screen and covering everything in this preview mode it just gives you some basic information it fills out the form so that you can get an idea of what it might look like in in this case they just put the max amount of characters um or are pretty close to that and then give you some of your information that it was able to pull like the company information this demo anchor group if i go into that com company information that's that right there it's pulling that field and if i go in here you can see that okay yep it did pull that address field it did bring it to the next line because of the column width of this one and we've got some invoice information there are three rows one two three here and then there's bill two ship two they've got some totals in here some summary information the terms this is pulling the terms from the the customer information so let's go back into here and look at this a little bit more in detail so how do you get this terms even to appear here and how would it source that information automatically so we're going to go in here and i'm going to select there i'm just going to go down a line and i'm going to put click this plus which is fields and let me scroll down to see maybe something else that i could throw in there i bet i could put in a memo or maybe the sales rep if you wanted to show the sales rep and maybe you wanted to on the next line show the sales rep email so they had someone to contact so let's say that we want to get this page number in here i'll show you how that works all it is is this button up here they say page number and then you could say page number of and let me type this out of this other one which is the total pages the page count that's really all they're doing down there and if i wanted to add a page break or horizontal line i should say to create some separation between even a table we can definitely do that and you can do a lot of information with each of these tables especially when you're using some some other things in the more advanced features you can do something called grouping which would take do a little bit more math and function related work to summarize information let's say you wanted more more summary information on this invoice you could do that in encoding and in the assignment i do have an example of what that might look like for for one of the assignments and that's pretty advanced so you're definitely going to be wanting to use this coding and look at the source code for that to be able to access that information in greater depth so let's take a peek at this and review it so this is what it looks like right now and it's it's not ideal obviously you're going to want to do some a little bit more editing here to make sure it looks right but you can see that a lot of the information might be there so there is no sales rep name actually so what we have here is just the sales rep email the sales rep name would show up here if there was one you can see that page two of two or one of two right and that's where we put that information normally you would set it inside of the footer so that you don't just have it located on one spot right and let's go save this and see if it's how it looks on an actual order so i'm going to click save and then we're going to go into the invoice of an example one and i'm going to click view on that person and click this button right here and print it and this is going to give me some real information on an actual invoice on how it might look to a client that might be receiving it or one of your customers right so it's obviously a lot shorter because there's not all that random information and it has the information that you need up here you can customize this even more to make it look right and to change the fonts and to change the look of really everything to get to the point where you want to be really granular you do have to start editing the code there's definitely a lot of limitations with this little tool it'll just get you to the point where you have something available but i would definitely suggest editing the code even further to have something a little bit better than this let me show you how you can edit that code a little bit more in depth and give you a high level summary of what that code is and how that html works if you haven't done something like that we're back with our advanced pdf but now i'm going to go into more of a hard coding mode here in just a second so i'm going to select this source code and i'm going to say yep i want to switch over to that and what it's going to do is bring me all the code for that advanced pdf so the main things that you want to be looking at are going to be the styling right here here's all the different classes that you'll be using the table size the th the table headers the table columns td different types of information and most developers will obviously know how to do some styling within html and some css in an advanced pdf it's probably better to do more class type styling and then in an email template you want to do more inline styling because different types of emails like outlook reads the styling a little differently we've got our head information that just closed out up there with all of our styling now we're getting into the bread and butter things that the body here the first table is calling out a table and saying okay the table column one two three four right and we've got the first row technically right here i like to organize it a little bit differently because it's hard to read like that so let me just explain tables if you haven't done them before in some html so you've got a table call out and then you're saying the first row there's gonna be three columns within that row and then in the second row there's gonna be another three columns and you can combine columns and rows and stuff like that too not that hard and then here's where you're going to use free marker to call out an id and to bring that information from a record so this is saying record.due date at label the record.due date at label means the label of the due date id which in this case is just due date right and i'm bringing the information that the due date information which is record.due date and then there's some more records in our case we added a caption right and we'd have the terms the label of the terms and then and then that's in the header right here and then in the next row we've got the actual terms the data the record.terms coming in and you can go down a little further you've got the total pages that you got tax rates some subtotals and that information you can start using different types of loops and and lists so that you can do grouping of different types of content and make your invoice a little bit more unique really the best thing to do is to edit this code so that it mimics the styling of your company and call it good until you need to do some more advanced stuff a little later in your setup process and that's totally just fine so hopefully this gives you a good understanding of what you need to do if i were you i would actually be editing this code in a different software maybe in visual studio code and then copy and paste it in here clicking save and then using that preview feature and that's really it for advanced pdfs so if you have any other questions feel free to reach out and make sure to comment as well and hopefully i'll be able to answer some of your questions