custom invoice code help

Self-Hosted | v4/Legacy
1

Hello,

I need some help on customizing the invoice. I’ve messed around with the code etc. and been able to get some things to work, but I have been very unsuccessful overall and need help. Using the clean template base and customizing it as custom1

I would like to swap the invoice details and client info so that the client info appears on the left side and the invoice details on the right. Also I would like to change the word above this line to say SOLD TO rather than invoice. If possible I’d like to also put the word invoice (which i believe is $entitytype to the top right corner of the page.

Here’s the code:

[
  {
    "columns": [
      {
        "image": "$accountLogo",
        "fit": [
          185,
          80
        ]
      },
      {
        "stack": "$accountDetails",
        "margin": [
          7,
          0,
          0,
          0
        ]
      },
      {
        "stack": "$accountAddress"
      }
    ]
  },
  {
    "text": "$entityTypeUC",
    "margin": [
      8,
      30,
      8,
      5
    ],
    "style": "entityTypeLabel"
  },
  {
    "table": {
      "headerRows": 1,
      "widths": [
        "65%",
        "35%",
        "*"
      ],
      "body": [
        [
          {
            "table": {
              "body": "$invoiceDetails"
            },
            "margin": [
              0,
              0,
              12,
              0
            ],
            "layout": "noBorders"
          },
          {
            "stack": "$clientDetails"
          },
          {
            "text": ""
          }
        ]
      ]
    },
    "layout": {
      "hLineWidth": "$firstAndLast:.5",
      "vLineWidth": "$none",
      "hLineColor": "#D8D8D8",
      "paddingLeft": "$amount:8",
      "paddingRight": "$amount:8",
      "paddingTop": "$amount:6",
      "paddingBottom": "$amount:6"
    }
  },
  {
    "style": "invoiceLineItemsTable",
    "table": {
      "headerRows": 1,
      "widths": "$invoiceLineItemColumns",
      "body": "$invoiceLineItems"
    },
    "layout": {
      "hLineWidth": "$notFirst:.5",
      "vLineWidth": "$none",
      "hLineColor": "#D8D8D8",
      "paddingLeft": "$amount:8",
      "paddingRight": "$amount:8",
      "paddingTop": "$amount:14",
      "paddingBottom": "$amount:14"
    }
  },
  {
    "columns": [
      "$notesAndTerms",
      {
        "table": {
          "widths": [
            "*",
            "40%"
          ],
          "body": "$subtotals"
        },
        "layout": {
          "hLineWidth": "$none",
          "vLineWidth": "$none",
          "paddingLeft": "$amount:34",
          "paddingRight": "$amount:8",
          "paddingTop": "$amount:4",
          "paddingBottom": "$amount:4"
        }
      }
    ]
  },
  "$signature",
  {
    "stack": [
      "$invoiceDocuments"
    ],
    "style": "invoiceDocuments"
  }
]
2

You may be able to use a custom label on Settings > Invoice Design > Invoice Labels to update the text

3

Something like this?

[
{
“columns”: [
{
“image”: “$accountLogo”,
“fit”: [
120,
80
]
},
{
“width”: 300,
“stack”: “$accountDetails”,
“margin”: [
140,
0,
0,
0
]
},
{
“width”: 150,
“stack”: “$accountAddress”
}
]
},
{
“columns”: [
{
“canvas”: [
{
“type”: “rect”,
“x”: 20,
“y”: 0,
“w”: 174,
“h”: “$invoiceDetailsHeight”,
“r”: 10,
“lineWidth”: 1,
“color”: “$primaryColor:#eb792d”
}
],
“width”: 30,
“margin”: [
0,
25,
0,
0
]
},
{
“table”: {
“widths”: [
70,
76
],
“body”: “$invoiceDetails”
},
“layout”: “noBorders”,
“margin”: [
0,
34,
0,
0
]
},
{
“width”: 120,
“stack”: [
{
“text”: “$invoiceIssuedToLabel”,
“style”: “issuedTo”
},
“$clientDetails”
],
“margin”: [
0,
20,
0,
0
]
}
]
},
{
“canvas”: [
{
“type”: “rect”,
“x”: 0,
“y”: 0,
“w”: 515,
“h”: 32,
“r”: 8,
“lineWidth”: 1,
“color”: “$secondaryColor:#374e6b”
}
],
“width”: 10,
“margin”: [
0,
20,
0,
-45
]
},
{
“style”: “invoiceLineItemsTable”,
“table”: {
“headerRows”: 1,
“widths”: “$invoiceLineItemColumns”,
“body”: “$invoiceLineItems”
},
“layout”: {
“hLineWidth”: “$notFirst:1”,
“vLineWidth”: “$notFirst:.5”,
“hLineColor”: “#FFFFFF”,
“vLineColor”: “#FFFFFF”,
“paddingLeft”: “$amount:8”,
“paddingRight”: “$amount:8”,
“paddingTop”: “$amount:12”,
“paddingBottom”: “$amount:12”
}
},
{
“columns”: [
“$notesAndTerms”,
{
“stack”: [
{
“style”: “subtotals”,
“table”: {
“widths”: [
“",
“35%”
],
“body”: “$subtotalsWithoutBalance”
},
“layout”: {
“hLineWidth”: “$none”,
“vLineWidth”: “$none”,
“paddingLeft”: “$amount:34”,
“paddingRight”: “$amount:8”,
“paddingTop”: “$amount:4”,
“paddingBottom”: “$amount:4”
}
},
{
“canvas”: [
{
“type”: “rect”,
“x”: 60,
“y”: 20,
“w”: 198,
“h”: 30,
“r”: 7,
“lineWidth”: 1,
“color”: “$secondaryColor:#374e6b”
}
]
},
{
“style”: “subtotalsBalance”,
“table”: {
“widths”: [
"”,
“45%”
],
“body”: “$subtotalsBalance”
},
“layout”: {
“hLineWidth”: “$none”,
“vLineWidth”: “$none”,
“paddingLeft”: “$amount:34”,
“paddingRight”: “$amount:8”,
“paddingTop”: “$amount:4”,
“paddingBottom”: “$amount:4”
}
}
]
}
]
},
“$signature”,
{
“stack”: [
“$invoiceDocuments”
],
“style”: “invoiceDocuments”
}
]

4

Sorry, it’s hard to say without running the code

5

I tried putting that code into the custom template code section and got the error: Error: Parse error on line 2: [{“columns”: [{“imag --^ Expecting ‘STRING’, ‘}’, got ‘undefined’
It doesn’t display anything different on the pdf preview and I am unable to hit save. Both I’d guess are due to the error mentioned above, correct?

6

The original design does not have any sold to or client header/title above it on this template. I can put a custom label for INVOICE and get it to appear in the right spot (left in the header row) but this would change the wording of any other invoice title (entity type) correct?

7

This is basically what I am trying to achieve:
Invoice Sample

8

In the next version of the app we’re changing to HTML/CSS for the custom designs, you may want to wait until then as it should be easier to work with.

9

do you have an estimated date when this new version will be ready for official release?

10

We plan to release a beta to selfhosters in about a month followed by a stable release three months later