Embedding QRCode 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 & 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 <Create a New Field>.

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=”\&quot;\&quot;/” />”

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=\”http://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%3Ahttp://quickbase.intuit.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.

Joshua McGinnis

Intuit web developer, designer, author of the QuickBase PHP SDK, social marketing guru and lover of politics, photography and dogs.

More Posts - Website

  • http://twitter.com/dreeves david reeves

    That’s pretty awesome. Great post!

    [Reply]

  • Surya

    Awesome technology and I am looking for a use-case. Can you post one for this?

    [Reply]

    Tscott Reply:

    Surya, a use case for this would be getting your contact information into a smartphone w/out having to type it in. Most current smartphones can read these 2-D barcode images. The other use case would be for product information. Any group of information that can be put into an image and then read by the phone, etc… could be beneficial.

    [Reply]

    Joshua McGinnis Reply:

    So think that through a little more. When and why would someone sitting at a computer need to scan in contacts or product information on a one-off basis?

    [Reply]

    Mikelbrady Reply:

    I could see lot’s of people in our company using this to add contacts to their Android phone.

  • Dmendoza

    Very Nice. Tried it but i get no image to show up. Code looks right. No errors.

    [Reply]

  • CGreene

    One could bump this up a notch and make the image hyperlink to a larger version for more accurate scanning. Below, replace all square brackets for HTML tags (not the QB field names) with angle brackets and you’re good to go. Hopefully this will post.

    “[a href="http://chart.apis.google.com/chart?cht=qr&chs=220x220&chl=NAME%3A"&[Name]&”%3B%20TEL%3A”&[Phone]&”%3B%20EMAIL%3A”&[Email]&”%3B%20″][img src="http://chart.apis.google.com/chart?cht=qr&chs=126x126&chl=NAME%3A"&[Name]&”%3B%20TEL%3A”&[Phone]&”%3B%20EMAIL%3A”&[Email]&”%3B%20″ alt=”Click to see larger QR Code image; aim SmartPhone and Scan” title=”Click to see larger QR Code image; aim SmartPhone and Scan” /][/a]”

    [Reply]

    Joshua Reply:

    Great idea. Have you figured out any good use-cases for this yet?

    [Reply]

  • Eric

    I have tried to make this work, even with the generic table property id, but cannot. Any help would be appreciated. Thank you.

    “”

    [Reply]

  • Eric

    I got this to work and it is truly amazing. Now I ran into the next surprise and that is I cannot print these QR fields from QuickBase except as a individual record. What I am trying to do is print on a label. Any ideas?

    [Reply]

    Joshua McGinnis Reply:

    Eric – can you not view the record with the QRCode field add to the view record form and then print from there?

    [Reply]

    Eric Reply:

    I can view the record, but I am trying to print Avery labels to be able to stick on the products.

    [Reply]

    Joshua McGinnis Reply:

    Not sure I can help with that. I believe those label programs work best when you have a csv of data. You may be able to use our API or the export report to CSV to get you closer …

    Eric Reply:

    i did try the csv export and it just spits out the code itself with the field data and no image.

    I then tried the link for the quickbase address label wizard and it spits out the data as below

    https://www.quickbase.com/db/xxxxxxxx?a=api_doquery^clist=15.39.42.16.6.7.8.18.9.10.11.12.13.19.20.21.22.38.14.26.40.41.25.44.43.24.23.1.2.3.4.5.^fmt=structured^xsl=6mztyxu8%3Fact%3Ddbpage%5Epagename%3Daddresslabels.xsl

    Data example:

    img src=”http://chart.apis.google.com/chart?cht=qr&chs=180×180&chl=https%3A%2F%2Fwww.quickbase.com%2Fdb%2Fbf6yfm8aj%3Fa%3Dq%26qt%3Dtab%26dvqid%3D-1000012%26query%3D%7B’0′.EX.[Field Name]%7D //http://chart.apis.google.com/chart?cht=qr&chs=230×230&chl=https%3A%2F%2Fwww.quickbase.com%2Fdb%2Fbf6yfm8aj%3Fa%3Dq%26qid%3D7%26nv%3D1%26v0%3D50247 ” alt=”"/>

    Intuit QuickBase Reply:

    Hey Eric — The best way to resolve this may be to talk to support so they can walk through this on a call with you:

    https://quickbase.intuit.com/support/portal/#YWN0aW9uPXN1Ym1pdGNhc2U=

    ^ Alex

  • Lora Aroy

    My favorites is QReate & Track. I like this one because it gives more options for the QR Code to be created from that just a web address.  It allows you to create a code for a web address, and email address, a phone number, a plain text message, a business card or to schedule an event into someones calender.  I really like the business card idea.  Some one can scan your QR Code and your contact info is automatically entered into their phones contacts. 

    [Reply]

  • Jenean

    I’m trying to get this to work and keep getting the error 
    Formula syntax error

    A formula must be a valid expression. I know this article was added quite a while ago but any help is appreciated.

    [Reply]

  • qrbarcode

    It is great that I could show the qr code image on web site using image tag!

    [Reply]

  • Pingback: QuickBase Asset Management Application Powers Parks and Recreation | The Fast Track