Customize invoice design - products and item positions in table

Self-Hosted | v4/Legacy
#1

Hi guys and thanks for this wonderful Software :slight_smile:

I want do customize the invoice design as follows:

  • When adding items, you have to fields in invoiceninja (product and notes)
    But in the pdf, both fields appear in separate columns and I couldn’t find any way, to position the labels in rows, to achieve something similar to this:
    WhatsApp Image 2020-09-28 at 16.45.33
    WhatsApp Image 2020-09-28 at 16.45.33714Ă—233 37.4 KB

So, in bold the item/product and below in normal font the item details. Is it somehow possible to achieve this in the design?

Thanks in advance and regards,

Product description on extra line in invoice template
#2

This will be supported in v5

In v4 one workaround is to include both the title and description in the product description and remove the product key from the invoice on Settings > Invoice Design > Product Fields. You can surround words with * and ** for bold and italics.

#3

thanks for the fast reply :slight_smile:

is also possible to create linebreaks in the description or list of bulletpoints ?

#4

Standard line breaks should work

I don’t think bullet points are supported but maybe you can fake it with ascii bullets •

#5

Hello!

I am trying to achieve exactly what the OP has asked for except in v5. I’ve been trying for the last couple of days but cannot seem to find a way how. It doesn’t seem possible to create a table manually (as the table is linked to <table id=“product-table”) so I cannot control the fields inside the table to merge them.

I also tried looking around in Invoice Design > Product columns but it doesn’t look like you can merge in there either.

Is there a way to do this in v5?

Thanks for all your hard work on this software!

#6

Hi,

Thanks for reporting this!

@ben is this on your backlog?

1 Like
#7

Got this working for now, but it’s probably more of a workaround for now.

To get it working, I’ve added both fields into the table. I wrote a javascript function which I’ve put in the footer which then loops through the table, grabs the second column and adds the values to the first column. I target the relevant td’s using the data-ref attribute. Then I just set display=none using javascript to the second column to hide it and style the first column as needed.

1 Like
#8

Thanks for sharing this. Yeh, it sounds like a bit of hassle, we have an idea how this should be achieved.

This is in my backlog.

#9

Hi @ben , any update on this task? I have exact the same problem and want to put the description below the product name.
Created an issue here:
https://forum.invoiceninja.com/t/product-description-on-extra-line-in-invoice-template/9418/2

#10

@ultnrg

Are you able to share your solution?