Embedding QR Code Barcodes in Quickbase
This post will describe how you can use the Google Charts API to embed dynamically created QRCodes for contacts in a Quickbase online database application.
QR Codes are a 2D barcode that can store a bit more data than standard barcodes, such as a complete person’s contact information with their name, company, email, and phone number.
Embedding the QRCode in Your Application
Before you begin, you will need to navigate to the table where your contacts are located and add a new “Formula – Text” field where you want the QRCode to be visible on your ‘Contacts’ form.
Adding the New Field to Your Contacts Table
One way of accomplishing this is to view or edit a contact record and then right click beneath one of the existing fields and then click on a ‘Add a field after this one …’.
This will bring you to the Add a Field to a Form screen. Scroll all the way down and clicked on .
Set the Field Label to ‘QRCode’ (or whatever you want to label it). Set the field type to ‘Formulat – Text’
Generating the QRCode Formula Code
Once you have created the field, you can right-click on the field in the view contact record form and then click on ‘Edit the field properties for this field’.
This will bring you to a screen where you can edit the ‘Formula’ for this field.
Understanding How the Formula Field Works
The formula field is a textbox that lets you insert html intermingled with variables that represent fields in your application.
When a formula field is rendered, the server is parsing the contents of the formula field and dynamically generating the output before you see what is on the screen.
This is why if you put in a formula that uses a field called [First Name] , you see “Joshua” on the report and not [First Name]. The server has dynamically replaced the first name variable with the first name of the person corresponding to the record you are viewing.
This will come in handy when understanding how the QRCode is being built.
The QRCode Formula
You are allowed to put HTML in formula fields which means that you can make a report that will display an image using the img tag.
The first step is to create an empty image tag and put that in your formula field. It should look the following:
“<img src=”” alt=”""/” />”
Notice that strings (and any HTML is considered a string) must be surrounded with quotes. Anywhere that you will need quotes to be rendered, to surround the src and alt attributes for example, you will need to escape the quotes with a .
When you want to append a field with a string, you must close the string with a quote and concatenate the field with a plus sign. Click here for help using formulas in Quickbase.
And finally, here’s the complete formula field value:
“<img src=”https://chart.apis.google.com/chart?cht=qr&chs=120×120&chl=MECARD%3AN%3A”&[First Name]&”+”&[Last Name]&”%3BTEL%3A”&[Phone]&”%3BEMAIL%3A”&[E-mailAddress]&”%3BURL%3Ahttps://www.quickbase.com/%3B” alt=””/>”
If your name, email, address, and url fields are different – you should replace them with whatever the name of your fields are.
If you examine the code, you’ll see that all that is happening is that you are creating an image tag that dynamically passes in information about the contact record to a url that spites out the QRCode.
Learn how Quickbase partner, Incapsulate, implemented a QR tagging and information access system for a local division of Parks and Recreation.