How to modify the the Invoice product lines?

[christoferd]

Hi :-)

Running latest Docker version.

Trying to create a tax invoice that fits on 58mm receipt. i.e. a sales Receipt

I'm a Laravel PHP JS CSS developer (no experience with Flutter, Dart)

Customizing the product lines?

Is it possible to do with just CSS?
After a lot of thought, maybe it is possible to do with just CSS?
Idea is to set table, tr, td "display: block", so they don't behave like table elements, essentially resetting their CSS. So that way I can apply Flex and have complete control of those elements.
Could that work?

... Update: I've tried this now and it looks like it's the way to go. Looks like I can have full control of the table and elements via CSS with Flex layout.

Alternatively, some notes on when I was going through the code trying to see if I could override it to have control of how it is displayed...

A: Dug through files and in design1.blade.php & design2.blade.php found
{!! $invoice->table(['product_key', 'notes', 'cost','quantity', 'discount', 'tax_name1', 'line_total']) !!}
I'm assuming this is handled by a third party function as I cannot find it in the invoiceninja code base.
I wish I could replace this with my own code... is that possible?
Is this design1.blade.php file even used with the Invoice?

B: Also found "product-table" in clean.html
<table id="product-table" cellspacing="0" data-ref="table"></table>
This is where the invoice lines are inserted. I'm guessing flutter/dart inject the table html in there somehow.
Not sure if this is something easy to modify.
Modifying that would affect every single invoice, right?

C: Where are New Design and New Invoice Design files?
I was hoping to create a new design name to not have to overwrite any base code.
Created a new design but no new files appeared in the views folder.
Where are all the new design html/css code saved to?

[turbo124]

You can find all of the custom selectors here:

https://invoiceninja.github.io/docs/custom-fields/#page-content

You certainly are able to hide/show the product table columns using CSS only

The invoice designs are in

views/pdf-designs/

however i would suggest making your css changes using Settings > Invoice Design and customize a design there so that your changes persist any updates.

We inject the product tables when building the html using the id tags, you can find the responsible class in

App\Services\PdfMaker\Design.php