🎓 Dynamic Invoice PDF's (Add/Remove Line Items)

Community Resources
1

What’s going on Gliders!

Following on from my previous tutorial that explained how to create free PDF’s in Glide, this tutorial shows you how to make those PDF’s even more versatile with dynamic line items. This sort of functionality is quite handy for invoices, receipts, or anything else where you need to add/remove multiple line items from the PDF you’re trying to create.

Line Items
In your line item table, each individual Line Item should have a Template Column (e.g. “HTML”) where the info is dynamic.

// For example:
<li>ITEM - PRICE</li>

Invoice
Then the Invoice table has a Relation Column (Pulling in all the related Line Items), a Joined List Column (joining all of Line Item’s “HTML” columns, separated by new line or nothing (no commas), and a Template Column that pulls info from current invoice as well as the joined HTML from related Line Items.

// For example, the Template Column would look something like:
<h1>NAME</h1>
<ul>LINEITEMS</ul>

// The final HTML (used to create the PDF) will look something like:
<h1>🎓 Loqode Students</h1>
<ul>
   <li>Item 1 - $100.00</li>
   <li>Item 2 - $200.00</li>
   <li>Item 3 - $300.00</li>
</ul>

The beauty is that since it’s all HTML based you can make the PDF as complex or as simple as you want, and it stays dynamic as the related Line Items or Invoice is updated/edited.

As always, if anyone ever needs a hand with getting this up & running, or anything else Glide related, don’t hesitate to reach out or join my free Glide community.

7 Likes
2

Nice… I did something similar HTML view of the invoice, that you can edit and see changes in real-time… and then send it as PDF :wink:

Screen Shot 2023-05-28 at 11.04.25 PM
Screen Shot 2023-05-28 at 11.04.25 PM3310Ă—1960 196 KB

1 Like
3

That’s what I love about Glide, there’s always a solution! Just have to get creative :muscle:

3 Likes
4

Very interested in this solution. Where do you send the code after created…something like pdfmonkey?
Also, I have a client with timecards related to jobs. What would be the best way to separate the timecards by jobs with one job on each page of the pdf.

1 Like
5

The code is being sent to an app I built that renders the HTML as a webpage, then triggers the Print/Save As PDF functionality of your browser. Totally free, no integrations needed :+1:

3 Likes
6

Is this something you can share? Or perhaps something I can build as ell with nocode?

1 Like
7

I shared it in a previous community post here and in Loqode School as a short tutorial :+1:

3 Likes
8

Hi, Loqode!
Thanks for idea!
Do you mean if i hosting my self page with this code it will works same way?

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTML to PDF</title>
  <script src="https://cdn.tailwindcss.com"></script>
  <script>
    function getUrlParameter(name) {
      name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
      var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
      var results = regex.exec(location.search);
      return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    }

    function loadPdfContent() {
      const pdfContent = getUrlParameter('PDF');
      if (pdfContent) {
        document.getElementById('content').innerHTML = pdfContent;
        setTimeout(function () {
          window.print();
        }, 500); // 1000 milliseconds = 1 second
      }
    }
  </script>
</head>

<body onload="loadPdfContent()">
  <div id="content"></div>
</body>

</html>
2 Likes
9

If that’s the source code from my app then yes, it should work if you host it yourself! Just make sure you use the correct URL in Glide :+1:

2 Likes
10

Hola @Loqode

I think your service will fail when it has to use/call an external site/library like

src=“https://cdn.tailwindcss.com”

I tried with this basic and simple code and it failed too:

<!DOCTYPE HTML>
<html>
<head>
  <script type="text/javascript">
  window.onload = function () {
    var chart = new CanvasJS.Chart("chartContainer", {
      title:{
        text: "Fruits sold in First Quarter"                    },
      data: [//array of dataSeries              
        { //dataSeries object
         type: "column",
         dataPoints: [
         { label: "banana", y: 18 },
         { label: "orange", y: 29 },
         { label: "apple", y: 40 },              
         { label: "mango", y: 34 },
         { label: "grape", y: 24 }  ]}]
     });
    chart.render();
  }  </script>
  <script type="text/javascript" src="https://cd.canvasjs.com/canvasjs.min.js"></script>
</head>
<body>
  <div id="chartContainer" style="height: 300px; width: 100%;">  </div>
</body>
</html>

image
image1250Ă—659 35.3 KB

For this example, I think the problem comes from this statement

src=“https://cd.canvasjs.com/canvasjs.min.js”

I need to put a chart like it in my PDF files and it is the missing part to be perfect.

Any idea or workaround to fix it Marco? Thanks again for your great tool!

Saludos.

11

I would suggest copying the Source Code of my solution and add a few libraries to it so you can customise/tweak to your preferences… Tailwind CDN is already imported in my solution, so you could add https://cd.canvasjs.com/canvasjs.min.js to your version and it should work as expected. You can host as a free solution in Netlify or Replit :+1:

Also, the HTML you attach as a parameter should have anything like or HTML… It should just be the specific HTML you want to render in the body of the page.

1 Like
12

Hola Marco!

Sorry, but I couldn’t follow you regarding the missing parameter that something like HTML should have. May you explain it a little more?

Also, where can I find your course code to try to replicate it in Replit or GitHub?

Thanks a lot again… feliz día!