The latest version now includes support for HTML/CSS templates which means total flexibility in how your invoices can look like.
I’ve created sample invoice template on JsFiddle which you can use as a bootstrap (or for learning purposes) but keep in mind, it’s totally possible to create one from scratch. Templates must be written in HTML/CSS, variables are injected via popular KnockoutJS library. If you are not familiar with KnockoutJS, check my JsFiddle example to see how it is done (pay attention to data-bind attributes)
Once you are happy with your template in JsFiddle, add it to Manager.
Go to Settings tab and click HTML Templates (you might need to enable it by clicking on Customize button)
Click New HTML Template button to create new template.
Enter something into Name field, then copy & paste from JsFiddle HTML code to HTML field and CSS code to CSS field. Then press Create
Edit one of your invoices and select your newly created template in HTML Template field.
Then view the invoice.
The invoice looks similar to default theme but that is just because I’m not creative enough. With HTML/CSS you can really create anything.
We welcome the new feature!
I have some questions/points about the creation of a template:
I can see the variables at the javascript window bottom-left:
This variables should do the trick? Is the variable for issue date = “IssueDate”?
So where ever i want i can call it with data-bind?
I can’t find anywhere the variable for the uploaded (via the options) logo of the company. Can we put it somewhere?
From what you said, is it possible to make the template to a HTML editor and then, inject the variables with knockoutJS?
Is it on your roadmap, now that there is a way, to have such template method on other printouts of the system, such as customer payments for example.
I have little knowledge of HTML, and see for the first time the KnockoutJS, so it will be a bit difficult for me, but i think i can manage it with some practice.
Yeah, the Javascript window on JsFiddle contains variables that will be injected into your HTML template by Manager.
Regarding logo or any other images you want to put on your template, upload them to imgur.com and use HTML code to load the image from imgur.com. In future, there will be variable for business logo uploaded to Manager too.
Not sure what you mean, I think all wysiwyg HTML editors suck big time so I really don’t recommend trying to make a template with them. Also most HTML editors won’t be able to inject javascript variables through KnockoutJS like JsFiddle does it, that’s why I wrote that template in JsFiddle. Also, when you are trying to create your own template using JsFiddle, you can simply share the link to your JsFiddle with anyone who knows HTML/CSS and will be able to tell you why it doesn’t work. That person doesn’t even need to know anything about Manager or accounting at all.
Yes, I’m planning to extend this across all printable content in Manager. First of all, I need to make this templating system more user-friendly for invoices which will be the most common use-case for this feature. Keep in mind, this is also learning exercise for me.
Yes, unfortunately it is quite technical but that is really the only way how to achieve total flexibility. I will create some tutorial that will try to teach how to create new HTML/CSS template from scratch.
For those who don’t want to invest time into learning HTML/CSS, we are also going to introduce simple paid conversion service which will simply allow customers to upload scanned image of how they want their invoice to look like and HTML/CSS markup will be provided in return.
This way non-technical users can take advantage of this feature too. Not to mention, in future, there will be probably many user-created free HTML/CSS templates for Manager published so it won’t be problem to find one you like (similar to how you can download free Wordpress themes).
Sir, great work but i had little problem How can I insert inventory items name and customers phone numbers in the invoice what variable should I use ? And I want that the invoice should always be in A4 format so that total and sub total should be in the last of page. So, guide me to that.
Right now, not all possible variables are visible to invoice template (e.g. customer telephone numbers, inventory item names). I’m currently working on this further and adding more variables. The idea is to expose to invoice all possible variables, including variables collected from custom fields on invoice or customer level.
The next version is going to make these variables exposed in the program so it will be possible to copy & paste them to JsFiddle. I hope to make this available tomorrow.
When you use Email function, do you receive PDF with background-color set or not? Regarding float variable, can you show JsFiddle with your template? I’ll try to reproduce.
