How to generate a printable Invoice using Glide Apps - SOLVED!

[Simon_Hill]

In recent times, many App developers have faced the challenge of how to generate a printable invoice (or other document) WITHOUT using CSS or Webhooks or the like.

My suggestion: Generate a web page that contains all the Invoice information. From there the user can print out the web page in the usual way. They can even print to PDF.

This can be done by creating a Glide Page that shares a Glide table with your Glide App. Now all you need to do is store the invoice info in the shared Glide table and then add a button in the app that generates a link to the Glide Web-page (opens the web-page or emails the link or copies link to clipboard, etc…). The web page can be formatted to look like an Invoice, complete with graphics that are also stored in the shared Glide Table.

In order to serve up the correct invoice for each user, the Glide Page can have an input field that asks for a unique value, which is displayed in the App. A nice benefit with this approach is that users can retrieve the invoice at their convenience as many times as required.

I have tested this concept and it seems to work well.

[IDEApps]

Could you please share a video tutorial for doing this matter?

Thanks in advance.

[Jay_Mojo]

Great, I was pretty much thinking of following this route - great to see someone has tested it. (I’m still very much a Newbie on Glide)

[Jay_Mojo]

I’m assuming one can also setup a new Invoice screen? Instead of another Glide Table as a new Glide page is really only “another screen” or am I missing something here?

[Jeff_Hager]

I have in-app invoices, and yes, you can simply print the screen or print to PDF, but the problem for me was that it only printed the part of the screen that’s physically visible at the moment. If you have to scroll to see everything then it won’t print everything. It’s been a while since I’ve tried. That was with Apps. Maybe it works better with Pages and prints everything beyond the scroll line???

Are you showing content where you have to scroll? Which OS/Browser are you using?

[Carter]

Good idea, can you tell us like Jeff says, if we can see all the pages ? If the pdf have 2/3 pages. Thanks !

[NFNHello]

I’ve only ever been able to print only what is currently showing on the screen in Pages. I’ve seen this limitation in both Chrome and Safari on my Mac.

[DillanMartinez]

Hello, in my use case, I use a google extension from my computer that does this job for you, what it does is that it takes a screenshot of your page and sends you the option to print the entire page.

1. you can find the extension with this name
   
   
2. Press the extension button above the page you want to print or that contains the invoice
   
   
3. Then it will send you to a page where you can print and save a pdf of the invoice or selected page
   
   

I know there must be better solutions but this was the one I found!

[Carter]

It’s a bit complicated for users, it’s not “user friendly”, I prefer use Zapier with PDFmonkey, and you can generate PDF links or PDF.

Because your solution it’s good for a CRM part for exemple, but for the client it’s a bit too much (still my opinion).

[DillanMartinez]

I completely @Carter agree with you I use it to give a free solution to a client

[Jay_Mojo]

Great idea… the specific closed group I’m wanting this for are already using screen grabs on other workflows so it works for them. Though for most users this is not ideal.

[Yasin_Hassanien]

In my case I use make.com with a webhook to be triggered by open link in a browser and return back webhook response to an html page to load with a script embedded in the html to trigger print so it will show print directly

So what you will need is to design a html page you can simply use google docs and export html

Or use word to html online tools to convert word to a html code

Cheers

[Simon_Hill]

Yes your web browser typically prints as many pages as required to print the entire web page (Chrome or Explorer). Or the user can override and only print selected pages as per the usual print options.

In my usage case I would design the web page to fit on 1 page.

[Yasin_Hassanien]

Here you go guys the HTML
This is a sample of printing QR Codes for an inventory system and the project title for hardware items

In this case, I used the deep screen link from glide so the user can scan from their phones the QR it will redirect them to the project details in the glide and in a very fast time all project details even if the app is private it will work and won’t expose data

<!DOCTYPE html>
<html>
<body>
<h2>Project Name: XXX</h2>
<h4>Item Code: XYZ</h4>


<img src="https://quickchart.io/qr?text=https://www.google.com" alt="PROJECT TITLE HERE" width="500" height="500">
<script type="text/javascript">
      window.onload = function() { window.print(); }
 </script>
</body>
</html>

You can have this as a webhook response in the second step as below shot

This will have the user open a link in the browser and allocate the data in the HTML and trigger the print document directly in less than 1 second

[Simon_Hill]

Here is a video demo.

I want to stress that this avoids use of any advanced skills like web-hooks, google extensions or CSS. It’s based on using standard Glide no-code apps and pages.

[IDEApps]

Thanks @Simon_Hill

[IDEApps]

I’m using GAS to create PDF file (imag below), but still don’t know how to fire with OnChange trigger . I may try as your video demo

[erwblo]

Great!