API

Embedding QRCode Barcodes in Intuit QuickBase

Added by on July 27th, 2010, filed under API, QuickBase, Tutorials

Title: Embedding QRCode Barcodes in Intuit QuickBase

This post will describe how you can use the Google Charts API to embed to dynamically create QRCodes for contacts in a QuickBase online database application.

QR Code in QuickBaseQR 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’Add Field in QuickBase

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

Field Properties in QuickBaseThe 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:

1
"<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:

1
"<img src=\"http://chart.apis.google.com/chart?cht=qr&chs=120x120&chl=MECARD%3AN%3A"&[First Name]&"+"&[Last Name]&"%3BTEL%3A"&[Phone]&"%3BEMAIL%3A"&[E-mail Address]&"%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.

Formula Field in QuickBase

If you find a good use for these QR Codes in QuickBase, let me know. I’m sure many folks here at QuickBase would be interested to see how you are putting this feature to use.

Enjoy this Post?

Spread the word by promoting this post on FaceBook and Twitter.

Reader Comments (3)

  1. Sam September 16, 2010 at 1:08 pm

    Josh, this is fantastic, but I’m trying to find out how we can use this. Have people offered any ideas?

    • Joshua McGinnis September 16, 2010 at 1:21 pm

      Hi Sam. I’ve also questioned the usefulness of this feature. I was thinking that it might be useful for inventory tracking or for generating name-tags for a conference. Beyond that, I don’t know. I was kind of hoping someone out there would be able to find a use for it.

  2. Chuck July 17, 2012 at 5:21 pm

    I saw this and just wanted to let you know that I’ve used this. I’m a circulation manager. Even though I’ve moved on to using GPS I still used it.

    At first I had to create a QR code for each entry and that would’ve taken forever, so I made it do it dynamically. As well as use a shortened URL so it scans faster. Below is my code, hope it helps someone.

    var Text plaintext =”http://goo.gl/bGMbG”;
    var Text ciphertext = URLEncode(URLRoot() & “db/” & [_DBID_DELIVERIES] & “?a=API_GenAddRecordForm&_fid_40=” & URLEncode ([Record ID#])& “&z=” & Rurl());
    var Text url = “http://chart.apis.google.com/chart?cht=qr&chs=100×100&chl=” & $ciphertext;

    “”

What do you think?