Looking for info on adding simply text invoice templates (self-hosted)

Self-Hosted | v4/Legacy
1

Hello,

I’d like to edit an invoice template. Initially, I want to simply add the words “TAX INVOICE” to the invoice.

I am using the Playful template as the starting point, and wanted to add TAX INVOICE above the area where $invoiceDetails is displayed.

I’ve had a play around in the pdfmake playground, but it seems to use a slightly different way of making declarations (they are not, for instance, put into quotation marks).

I’ve been unable to figure out how to insert a simply line of text where I want it. I can get it into various other places, but not above the invoice details box.

Any help would be greatly appreciated.

Thank you.

2

Try adding this after the opening square bracket:


  {
    "text": "$entityTaxType",
    "fontSize": "$fontSizeLargest",
    "margin": [322, 0, 0, 20]
  },
3

Thanks Hillel,

I’ve tried in a few spots, and as with my own custom code attempts earlier, nowhere seems to have the desired effect. Obviously I am completely missing the point of how it works.

Here’s the beginning of the template code…

[
  {
    "columns": [
      {
        "image": "$accountLogo",
        "fit": [
          120,
          80
        ]
      },
      {
        "canvas": [
          {
            "type": "rect",
            "x": 0,
            "y": 0,
            "w": 190,
            "h": "$invoiceDetailsHeight",
            "r": 5,
            "lineWidth": 1,
            "color": "$primaryColor:#009d91"
          }
        ],
        "width": 10,
        "margin": [
          200,
          0,
          0,
          0
        ]
      },
      {
        "width": 400,
        "table": {
          "body": "$invoiceDetails"
        },
        "layout": "noBorders",
        "margin": [
          210,
          10,
          10,
          0
        ]
      }
    ]
  },

Where in there would I insert the code you’ve provided?

Also, any clues on what field $entityTaxType links to? Does that have “Tax Invoice” in it by default? I suspect it’s something I’ll need to change, yes?

Here is an example of what I am trying to achieve (a before and after)…
Before and after

4

Actually, I see now that the code that came through by email had a bunch of codes not in the code above.

So… using the code above… adding it where you said HAS in fact placed TAX INVOICE somewhat in the location I was after.

Thanks.

I’ll now see if I can fiddle with the alignment and size. I’ll set up a new style for the size.
As for the alignment, if you have any tips, they would be very welcome.

5

You can adjust the ‘margin’ values to change the alignment.

6

Thanks. Got it positioned and sized more or less how I would like.

What I would like, ideally, is to have it included in the table column in which the rectangle with the $invoiceDetails inside of it appears; positioned above it, such that it pushes that rectangle and its contents ($invoiceDetails) down, and the “TAX INVOICE” text sits at the same top alignment as the logo.

Working on that now. I’ll let you know if I get stuck.

7

Hmmm… seems that no matter where I put it, I can’t get it to be in the same column as the $invoiceDetails box.

Is that even possible? Or perhaps PDFMAKE doesn’t allow for two objects in the same column cell?

8

I’m not sure I understand, do you want to post screenshots?

9

Here’s an image showing what I mean.
Top part is the current set up.
Bottom part is what I am wanting to achieve.
Example

10

Thanks, understood.

The way the design is constructed would make this difficult. You’d need to move the rectangle and $invoiceDetails into a stack and then include the label at the top.

11

Okay. I got the feeling that might be the case. I’ll just leave it as is for now.

Thanks very much for getting me this far. It’ll do the trick just fine.