I would like to place a unique barcode onto each of our invoices. It’s a fairly specific need for our environment but would help up out a lot.
I am happy to generate the barcode using my own server and implement using CSS background-image but cannot find a way to pass the unique invoice number to my server.
Is there a way to pass the invoice ID into the CSS or perhaps I need to be using a jQuery block of code to implement this?
This would be possible via the Custom Scripts option that comes with our Power User Subscription.
I’m not at a computer at the moment, so bear with me, I’ll have a look and come back to you shortly.
It would be easy if your PDF generator passed a UrlReferrer or something containing the InvoiceID in the request headers when it parses the CSS to grab the image from my server.
We have a Power User Subscription so Custom Scripts should be an option. I thought I looked at that though and couldn’t figure out what the script would need to do to apply a unique image to an invoice.
Alternatively, is there a way to reference the InvoiceNumber in the Invoice Footer Text, i.e.:
< img src=“myServer/GetBarcode/{InvoiceNumber}” >
Looking at this, there is a value passed through in the javascript in a variable invoiceID. However, inserting this on a PDF would become a little bit more tricky.
I’m not entirely sure how possible this would be, but I’ll convert this thread to a feature request, and if there’s enough interest, we’ll revisit this.
[Edit]
Would this work for you? This script checks if the URL is already present in the notes, and if not inserts an image linking to the URL.
var n = $('#txtterms').val().search("qr-code-generator.com");
if((n == -1) && (invoiceID > 0))
{
$('#txtterms').val($(this).val() + '<img src="http://www.qr-code-generator.com/phpqrcode/getCode.php?cht=qr&chl=' + invoiceID + '&chs=75x75&choe=UTF-8&chld=L|0">');
}
I’ve used a generic QR generator, but you can use your own URL here.
You would also need to save the invoice, and modify it again, but you can play around with the code and see how that goes. Hopefully that’ll give you a good starting point
Fantastic! Thanks so much for the help. I now have the barcode I need (not QR code, but great example)
Cheers
@IntrepidBrewing may I ask where on the invoice you’d like to insert the QR code? I imagine in the payment terms box?
What we can do is allow you to use some tokens on the image link so you don’t need to use Javascript. This will be simple to implement and it will work on the web and PDF view.
With the new token your link would look like this:
http://www.qr-code-generator.com/phpqrcode/getCode.php?cht=qr&chl=@InvoiceId@&chs=75x75&choe=UTF-8&chld=L|0
Will that work?
Hi Glenn, sorry for the slow response. Yes, if we can use tokens then that would be a much better solution. Currently we need to create the invoice, save it, then modify it to pick up the invoice ID. I think your way wouldn’t require that re-editing step. Would it be a pain to implement the token support?
I would actually rather the image be at the top / bottom of the invoice rather than bang in the middle but I can live with that. Fixed positioning the image using CSS doesn’t appear to carry over into the PDF but that is a minor inconvenience.
Cheers,
Ben
I’m pleased to say that you can now use @InvoiceId@ as a token in your notes or payment terms.
<img src="http://www.qr-code-generator.com/phpqrcode/getCode.php?cht=qr&chl=@InvoiceId@&chs=75x75&choe=UTF-8&chld=L|0"/>
If you place this at the bottom of your invoice terms, it should appear close to the bottom of the invoice:
After payment terms we have “Appended text” defined in Sales >> Invoice Customisation. We could potentially also achieve the same here, but then the barcode would then automatically appear on every invoice and estimate.
That’s much better than the JavaScript method, cheers Glenn.
It would be better for us if we could use this in the Appended Text box as we already have some text that appears on all invoices. Unfortunately I cannot get this to work with the new Token method. Works perfectly in the default payment terms box though.
Cheers.
We’ll have a look at including this on the appended text box too. I will let you know if we are able to do this.
EDIT:
It is possible for us to extend this to also work in the footer region (Appended Text). That should be live by end of today.
You guys are awesome. Thanks.
As a bit of an explanation, we will be using the barcode to allocate returnable stock to a given invoice, to assist us with tracking our casks of beer. That way we should know who has casks that we need to collect. It is a rather cumbersome thing to do without any form of automation and this seemed like a good solution.
Quick update, this is now available to use in the footer “Appended Text” box, which should push it even further down the invoice.
Yep, that works perfectly. Exactly what I needed
I’ve added the code to the footer region and there has been a positive outcome a barcode is generated. Unfortunately the barcode takes a significant amount of space (approx .25 of A4 page). Is there a way to reduce its size similar to the example further up this feature?
Hi @gjwguk
The URL used above was only an example. If you have a look on Google, there should be more flexible QR generators out there
You could use some CSS to resize it.
The CSS doesn’t appear to apply to the PDF generation, well, it didn’t for me. Works on the screen though. Finding a suitably sized barcode generator is probably the way to go.
Ah OK, I don’t think there any PDF generators that are too clever with CSS unfortunately. As you were then!
Hmm, yes, that generator seems to be ignoring the size parameter, but there are others that seem to behave better, e.g.
http://api.qrserver.com/v1/create-qr-code/?data=@InvoiceId@&size=60x60
generates
Something like this should work:
<img src="http://api.qrserver.com/v1/create-qr-code/?data=@InvoiceId@" style="width:60px;"/>
The PDF generator struggles with CSS3, but adding a basic width: 60px attribute should work.