Problems with invoice template

I had some issues after creating my invoice template these are the following;

  1. Invoice number prefix is not displaying on the invoice template. Only single invoice number is printing.
  2. Terms & Payment Advice were not printing on the invoice template.
  3. I am using an A4 page so notes should be printed at the bottom of the page note just after the total.
  4. Most importantly when I create a invoice having long list of items then the items list is printing from the top of the second A4 sheet but it should first print the customer information etc on the second sheet then the list of items.
  5. For multiple pages (A4) it should print the page number.
  1. This is on purpose, invoice number prefix will be variable for in-built template only. Since you are using custom template, you can simply hard-code prefix in custom template.
  2. See point 1.
  3. You can use CSS attribute “min-height” so you set minimal height of the container that shows line items. This way even if invoice is shorter, the container will not “shrink” and footer of the invoice will come to the bottom. You need to test how many pixels “min-height” should be set to. Another way would be to use fixed position trick - see http://stackoverflow.com/questions/1360869/html-print-header-footer
  4. This can be handled by wrapping whole invoice template in <table> tag where header that should show on each page should be inside <thead> tag and footer should be in <tfoot> tag. See - http://www.w3schools.com/tags/tag_thead.asp
  5. This can be done using counter(page) variable in CSS. See example - http://stackoverflow.com/questions/20050939/print-page-numbers-on-pages-when-printing-html
1 Like

How can I have a heading for either invoice is cash or credit ?

Every sales invoice is by default “credit” invoice. There will be ability to print cash receipts which can look like cash invoices if custom template is used.

When I use min- height for the columns of items then it set the height for the cell not the column. how can I set min- height for column.

Is there any way of getting the Quote, Purchase Order and Invoice number
in large numbers top left under the large letters for those products? At
the moment the number is very small under the delivery date on the
right…

@Awais, you should post JsFiddle example to demonstrate the issue.

@allangibbs, anything is possible but are you familiar with HTML/CSS?

I sort of understand it. I will give it a go anyway. What do I have to do?

Do you have any code sample on JsFiddle you can show how far you’ve got in building your HTML template?

You are asking if something is possible. The answer is yes, but I can’t tell you how to do it. You would need to show some code sample first. Then I can tell you what to change where.

Sir Here is the link for my template, I am using a pre-printed A4 paper.
http://jsfiddle.net/awais_sohail/RuFDL/108/

Every thing is OK for me except these issues;

  1. I am using an A4 page so notes should be printed at the bottom of the page note just after the total.
  2. When I create a invoice having long list of items then the items list is printing from the top of the second A4 sheet but it should first print the customer information etc on the second sheet then the list of items.
  3. For multiple pages (A4) it should print the page number.

These are all HTML issues and not particularly specific to Manager. I will try to create one simple template that will show how to address all three issues. But in nutshell:

  1. Notes at the bottom


HTML

<div id="invoice-footer">
    <div data-bind="foreach: Notes">
        <div data-bind="text: $data"></div>
     </div>
</div>

CSS

@media print
{
    #invoice-footer {
        width: 100%;
        display: block;
        position: fixed;
        bottom: 0;
    }
}
  1. Page headers on each page


HTML

<table>
    <thead><tr><td><!-- your page header HTML markup here --></tr><td></thead>
    <tbody><tr><td><!-- page content --></tr><td></tbody>
    <tfoot><tr><td><!-- your page footer HTML markup here --></tr><td></tfoot>
</table>
  1. Page numbers


CSS

@page {
  @bottom-right {
    content: counter(page) " of " counter(pages);
  }
}
1 Like

Sir did the data bind variable for inventory items name for invoice template is available now? If yes than what is it ? If no, than when it will be available?

Not yet, I’ll add it next week.

Sir I Tried this but the no. of lines of items were not limited and header were not printed on each page. here is the link for code;

http://jsfiddle.net/awais_sohail/RuFDL/277/

The HTML you have written is not valid. Tags are not properly closed, some tags are missing completely. There are some HTML validators on the Internet you can check see it for yourself.

I won’t be able to help you to fix the HTML code because this is out of scope but I’ll make it so Manager will accept only valid HTML. This way, once you have valid HTML code that Manager accepts, I will be able to help you again but the HTML code must be valid first.

Hi Lubos. Is there a way to adjust the invoice table headings? Like make it centered, and make sure it doesn’t come in 2 lines when converted to pdf, and set price in “Unit price” to capital P?

Only with custom themes. Depending on what you want to change, this could be quite difficult.

Only with custom themes.

No. Manager is not what-you-see-is-what-you-get. The screen view is rendered by a browser, either built-in for the desktop edition or whatever browser program you are using if server or cloud. When you generate a PDF, font substitutions occur and layout can change. The same thing can happen, for example, if you generate a PDF of a word processing document.

Only with a custom theme. Manager’s general style uses initial capital letters except in form titles.

Thanks for the info Tut. Can you help me set it up please? Only with the Unit Price column.

Sorry, no. I’m not a programmer. If you don’t have the skills yourself, hire a local programmer to help. Any competent web designer who can code Liquid should be able to do the job. And this is not a coding forum. Custom themes are your own responsibility.