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

**URL:** <https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220>\
**Category:** Community Resources\
**Tags:** tutorial\
**Created:** [May 29, 2023, 4:36am UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220 "2023-05-29T04:36:22Z")\
**Posts on this page:** 12\
**Page:** 1

<div class="post-metadata">

**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\
**Post date:** [May 29, 2023, 4:36am UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/1 "2023-05-29T04:36:22Z")

</div>

[![](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/3/c/3c990e87136d474356eb4e5b09a74c39185eec5f.jpeg "🎓 Glide Tutorial - Create Dynamic Invoice PDF's (Line Items)") ](https://www.youtube.com/watch?v=h6jvhg8t8nI)

**What’s going on Gliders!**

Following on from my previous tutorial that explained [how to create free PDF’s](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/18) 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.

```auto
// 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.

```auto
// 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.](https://www.skool.com/loqode)

---

<div class="post-metadata">

**Author:** ![Uzo](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/uzo/32/22639_2.png) [@Uzo](https://community.glideapps.com/u/Uzo)\
**Post date:** [May 29, 2023, 9:06am UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/2 "2023-05-29T09:06:46Z")

</div>

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 😉

 ![Screen Shot 2023-05-28 at 11.04.25 PM](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/0/500d911600e5dffc7e188fb5b38be76263721182.jpeg)

> **[External Data Source](https://external-data-1.glide.page/dl/3b1bc8)**
>
> Multi Spreadsheets Data source for Glide Pages with Stripe and PayPal integrations, Address Picker, Custom Emails, PDF Invoice Creator. Unlimited rows and updates.

---

<div class="post-metadata">

**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\
**Post date:** [May 29, 2023, 9:26am UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/3 "2023-05-29T09:26:03Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![GrumpyRick](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/grumpyrick/32/18079_2.png) [@GrumpyRick](https://community.glideapps.com/u/GrumpyRick)\
**Post date:** [May 29, 2023, 6:35pm UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/4 "2023-05-29T18:35:38Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\
**Post date:** [May 29, 2023, 9:05pm UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/5 "2023-05-29T21:05:35Z")

</div>

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 👍

---

<div class="post-metadata">

**Author:** ![GrumpyRick](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/grumpyrick/32/18079_2.png) [@GrumpyRick](https://community.glideapps.com/u/GrumpyRick)\
**Post date:** [May 30, 2023, 5:55pm UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/6 "2023-05-30T17:55:05Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\
**Post date:** [May 30, 2023, 9:30pm UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/7 "2023-05-30T21:30:26Z")

</div>

I shared it in a previous community post [here](https://community.glideapps.com/t/create-unlimited-free-pdfs-no-integrations-fees/62116/18) and in [Loqode School](https://www.skool.com/loqode/classroom/6da90d08?md=f2dfefad52804301876d82bb081cef39) as a short tutorial 👍

---

<div class="post-metadata">

**Author:** ![slscustom.ru](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/slscustom.ru/32/77336_2.png) [@slscustom.ru](https://community.glideapps.com/u/slscustom.ru)\
**Post date:** [May 31, 2023, 12:02pm UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/8 "2023-05-31T12:02:45Z")

</div>

> [@Loqode](#):
>
> an app I built that renders the HTML as a webpage, then triggers the Print/Save As PDF functionality of your browser.

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

```auto
<!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>

```

---

<div class="post-metadata">

**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\
**Post date:** [May 31, 2023, 9:28pm UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/9 "2023-05-31T21:28:08Z")

</div>

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 👍

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [July 14, 2023, 4:15pm UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/10 "2023-07-14T16:15:25Z")

</div>

> [@slscustom.ru](#):
>
> ```auto
> <meta name="viewport" content="width=device-width, initial-scale=1.0">
> <title>HTML to PDF</title>
> <script src="https://cdn.tailwindcss.com"></script>
> <script>
> 
> ```

Hola @Loqode

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

> src=“[https://cdn.tailwindcss.com](https://cdn.tailwindcss.com)”

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

```auto
<!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](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/a/6acc960afbb9b560c632c75cd4be349a3b1650f6.png)

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

> src=“[https://cd.canvasjs.com/canvasjs.min.js](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.

---

<div class="post-metadata">

**Author:** ![Loqode](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/loqode/32/50217_2.png) [@Loqode](https://community.glideapps.com/u/Loqode)\
**Post date:** [July 14, 2023, 10:45pm UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/11 "2023-07-14T22:45:48Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![gvalero](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/gvalero/32/1037_2.png) [@gvalero](https://community.glideapps.com/u/gvalero)\
**Post date:** [July 15, 2023, 2:02pm UTC](https://community.glideapps.com/t/dynamic-invoice-pdfs-add-remove-line-items/62220/12 "2023-07-15T14:02:40Z")

</div>

> [@Loqode](#):
>
> 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.

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!