MonkeyPDF Integration

Ask for Help
1

I been trying to resolve this issue by following other similar cases however I am not sure what I am doing wrong. I made a html template on the suborders that follows format:

<tr>
<td>{{Code}}</td>
<td>{{Description}}</td>
<td>{{Call Type Total}}</td>
<td>{{Suborder Total}}</td>
<td>{{Total}}</td>
</tr>

Then I went back to orders to make a joint list and add a
to break each line, I assumed that once this was done I could pass then the joint list in the PDF integration and get the list but I currently everything shows blank. Here is the html I am using as a template:

<!--
  Invoice template.
  Styled using Tailwind CSS.
  Head to the CSS tab to learn more.
-->

<div class="flex flex-row items-center justify-between mb-8">
  <div>
    <img
      src= https://res.cloudinary.com/dclzqucbv/image/upload/v1674408757/Perks-1_dlovbe.png
      height="160"
      width="145"
    >
  </div>

  <div class="w-2/5">
    <h1 class="font-bold mb-2 text-4xl">{% if credit %}Credit{% else %}Invoice{% endif %}</h1>
    <dl class="flex flex-wrap justify-between">
      <dt class="pr-2 w-3/12">Number:</dt>
      <dd class="w-9/12">{{invoice_number}}</dd>

      <dt class="pr-2 w-3/12">Date:</dt>
      <dd class="w-9/12">{{invoice_date}}</dd>
    </dl>
  </div>
</div>

<div class="items-center flex justify-between mb-8">
  <dl class="flex flex-wrap justify-between w-1/2">
    <dt class="w-3/12">Client code:</dt>
    <dd class="w-9/12">{{client_code}}</dd>

    <dt class="w-3/12">Due date:</dt>
    <dd class="w-9/12">{{due_date}}</dd>
    
    <dt class="w-3/12">Payment:</dt>
    <dd class="w-9/12">{{payment_mode}}</dd>
  </dl>

  <div class="border-2 border-blue-600 px-4 py-2 w-1/2">
    {{client_name | upcase}}<br />
    {{billing_address | newline_to_br}}
  </div>
</div>

<table class="border-collapse mb-8 numeric-tabular table table-auto w-full">
  <thead>
    <tr class="bg-blue-600 text-white">
      <th class="font-normal text-left">Code</th>
      <th class="font-normal text-left">Description</th>
      <th class="font-normal text-right">Call Type Total</th>
      <th class="font-normal text-right">Suborder Total</th>
      <th class="font-normal text-right">Total</th>
    </tr>
  </thead>
  <tbody>
    {% for item in lineItems %}
				<tr>
        <td>{{Code}}</td>
        <td>{{Description}}</td>
        <td>{{Call Type Total}}</td>
        <td>{{Suborder Total}}</td>
        <td>{{Total}}</td>
				</tr>
		{% endfor %}
    <!-- Adding empty row to always have a minimum of 12 product rows -->
    {% for n in (lineItems.size..12) %}
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    {% endfor %}
  </tbody>
</table>

<div class="flex mb-8">
  <dl class="bg-blue-100 flex flex-wrap leading-snug ml-auto numeric-tabular py-2 w-2/5">
    <dt class="block m-0 p-0 pl-4 w-3/5">TOTAL</dt>
    <dd class="block m-0 p-0 pr-4 text-right w-2/5">${{total_without_vat | with_delimiter, precision: 2}}</dd>
  </dl>
</div>

<hr>

<p class="mt-4 text-center"><small>PERKS HVAC - 123 Waffles Roads 12345 Demo-Ville TestLand<br>
  VAT Number IE 1234567X</small></p>

I think I am missing something as I checked the passed items on the form and got the following result:

lineItems":"\u003ctr\u003e\n\u003ctd\u003e{{Sub Order 1}}\u003c/td\u003e\n\u003ctd\u003e{{Service}}\u003c/td\u003e\n\u003ctd\u003e{{$100.00}}\u003c/td\u003e\n\u003ctd\u003e{{$206.00}}\u003c/td\u003e\n\u003ctd\u003e{{$306.00}}\u003c/td\u003e\n\u003c/tr\u003e\n\u003cbr\u003e\n\u003ctr\u003e\n\u003ctd\u003e{{Sub Order 1}}\u003c/td\u003e\n\u003ctd\u003e{{Service}}\u003c/td\u003e\n\u003ctd\u003e{{$100.00}}\u003c/td\u003e\n\u003ctd\u003e{{$30.00}}\u003c/td\u003e\n\u003ctd\u003e{{$130.00}}\u003c/td\u003e\n\u003c/tr\u003e"}

I believe these codes \u003c represent the < and stuff but I do not think the information should be passed in that format so I must of done something wrong. Any help is greatly appreciated.

2

Can you show us some screenshots of how you’re setting this part up?

Also this looks a bit odd for me. It looks like it should be item.code instead of Code.

2 Likes
3

I made a few adjustments I think I am getting closer

{% for item in parsedLineItems %}
      <tr>
        <td>{{ item.line_items_code }}</td>
        <td>{{ item.line_items_description }}</td>
        <td>{{ item.line_items_calltypetotal }}</td>
        <td>{{ item.line_items_subordertotal }}</td>
        <td>{{ item.line_items_total }}</td>
      </tr>
    {% endfor %}

The current out put is:

"lineItems":"[{\"line_items_code\":\"Sub Order 1\",\"line_items_description\":\"Service\",\"line_items_calltypetotal\":200,\"line_items_subordertotal\":66,\"line_items_total\":266}, {\"line_items_code\":\"Sub Order 2\",\"line_items_description\":\"Maintenance\",\"line_items_calltypetotal\":30,\"line_items_subordertotal\":0,\"line_items_total\":30}]"
4

Why is this parsedLineItems and not lineItems?

5

Apologize I been making changes to make it work and at some point I try to parse the thing to take out the n/ that were showing up. However, the output does not have those anylonger since I utilized the JSON function column type to format it and that seem to give me the current output.

    {% for item in lineItems %}
      <tr>
        <td>{{ item.line_items_code }}</td>
        <td>{{ item.line_items_description }}</td>
        <td>{{ item.line_items_calltypetotal }}</td>
        <td>{{ item.line_items_subordertotal }}</td>
        <td>{{ item.line_items_total }}</td>
      </tr>
		{% endfor %}

Here is that current portion of the code.

6

So is your file being generated correctly now?