Customize invoice design - products and item positions in table

[arnoldnym]

Hi guys and thanks for this wonderful Software

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:
  

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,

[hillel]

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.

[arnoldnym]

thanks for the fast reply

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

[hillel]

Standard line breaks should work

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

[ultnrg]

@hillel

This will be supported in v5

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!

[hillel]

Hi,

Thanks for reporting this!

@ben is this on your backlog?

[ultnrg]

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.

[ben]

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.

[vistree]

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://forum2.invoiceninja.com/t/product-description-on-extra-line-in-invoice-template/9418/2

[david]

@ultnrg

Are you able to share your solution?

[haris]

I managed to stack the item & description in single column using this script. But to make the item title bold, i had to add during product/invoice creation. Somehow css override in the designer won’t make any changes.

<script>
    let productTable = document.querySelector("#product-table tbody");
    let productRows = productTable.querySelectorAll("tr");

    // loop through each product row
    productRows.forEach(function (row) {
        let itemColumn = row.querySelector("td[data-ref='product_table-product.item-td']");
        let descriptionColumn = row.querySelector("td[data-ref='product_table-product.description-td']");

        // merge the content of item and description columns
        itemColumn.innerHTML += "<br><b>" + descriptionColumn.innerHTML + "</b>";

        // remove the description column
        descriptionColumn.remove();
    });

    // hide the Description header
    let descriptionHeader = document.querySelector("th[data-ref='product_table-product.description-th']");
    descriptionHeader.style.display = "none";
</script>

[xerus]

Somehow, this breaks linebreaks in the description.
And the description is bold while the title is not, the other way around from the request above.
Was struggling to preserve linebreaks in the description while also having linebreaks between title and description.

The solution is to change this line:

        // merge the content of item and description columns
        itemColumn.innerHTML = "<b>" + itemColumn.textContent + " <\/b><br>" + descriptionColumn.textContent;

Note the textContent: Inserting HTML elements with JavaScript - Stack Overflow