Design Syntax

Self-Hosted | v4/Legacy
1

Hi there,

I have a few questions about designing the output documents.

I have just tried to “design” my own invoice pdfs but I am a bit struggling with the syntax which seems to be slightly different from the syntax I see on the pdfmake.org website. Playing around in their “playground” works fine but adjusting my custom layout in InvoiceNinja leads to errors all the time…

Is there a more InvoiceNinja-related tutorial anywhere?

Another question is how to get the “items table” redesigned. It seems to me that it is a single variable that outputs the whole table. I would like to have an “article name” and “article description” in one single column where the name is bold, like that (hopefully this displays like I want):

Article/Description Quantity Single price price
My work in words 3 hrs 75 bugs 225 bugs
Detailed description of what I have done,
can contain more than one line.

(this should be a table…)

I would like to have a “Master”-Logo on the first page and a version of the logo on the following pages. Is it possible to place different items depending on page numbers? Where do I have to put a second image file (the main logo comes from the InvoiceNinja settings).

And last but not least: Is there a reference of available variables i can use in the layouts?

Thanks very much for any advice!
Timo

2

It could be an issue with quotes, all field names and properties need to be surrounded in double quotes in the app. I think single/no quotes works in the playground.

Just this short video: https://www.youtube.com/watch?v=pXQ6jgiHodc

In our next version we’re making the columns more customizable, you can make words bold with markdown. ie, This would be bold.

https://trello.com/c/kdS5jOmJ/196-support-customizing-product-task-fields-on-the-invoice

Those changes sound like they’d require adjustments to the code.

If you’ve created your first invoice and click ‘Help’ on /settings/customize_design you’ll see a list of variables.

3

Thans for your reply!

It`s not only the quotes-problem but also creating new blocks.

I have two columns at the top containing

  • client address on the left
  • my company details on the right.

That works fine.

Adding another row with 2 columns below with

  • invoice number on the left
  • invoice date on the right

does not work.

Also adding a single row does not work. There is no error shown but also no content.

I added the following code:

...

"columns": [
     {
        "text": "client-address",
        "style": "styleX"
     },
     {  "text": "my-company-details",
        "style": "styleY"
     }
  ],

"columns": [
     {
        "text": "invoice-number",
        "style": "styleA"
     },
     {  "text": "invoice-date",
        "style": "styleB"
     }
  ]

...

but the second couple of columns “overwrites” the first one so I only can see the invoice-number and -date parts…

Do I have to add more brackets like [ { () } ] or a “stack” of columns?

4

Is is working in the pdfmake playground?

5

Ah, I now it works. It there were some “[{()}]” missing… Sorry!

But there is still another question: Can I add varibles to the default text entries for conditions? I would like to write “Please pay 123.45 € until 11. Nov 2017.”

6

“text”:["Please pay ", “$balance”, " until ", “$dueDate”]

7

Thanks, this is very helpful!
Does it also work within the “default condition text field” in the invoiceNinja Settings to set it as a default value?

8

No

9

$balance does not work:

Uncaught TypeError: h.replace is not a function

Is this an error?

10

Try $balanceAmount instead.

11

it`s the same: Uncaught TypeError: h.replace is not a function

12

I think this is a bug, I believe it should be fixed in our next release (in 1 to 2 weeks).