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