November 7, 2012

Easy QR Codes generation in Salesforce without writing “CODE”

QR codes are simple and fast, its quick way to transfer information around. One of the good example of that could be seen in Dreamforce, where QR codes are their in the event invites for registration and member badges for quickly creating the contact in mobile app.
QR Code scanning apps are pretty much available on all major mobile platforms. So, powering your Salesforce org with QR codes opens a lot of possibilities for quick sharing of information in various scenarios like,
by showing QR Code on:
  • Contact, one can quickly creating entries in mobile address book.
  • Product, use in printing product label or in custom mobile scanning app.
  • Account, for quickly getting information like name, contact etc.
  • Event, for creating event entries in mobile.
  • Custom Object, expose required information.


How to add QR code support to your Org ?


You must be thinking that it would require creating a visualforce page with API integrations etc. But fortunately its way simpler then that, here is the recipe for the same


Step#1 Get your smart phone ready


Please install the QR code scanner app.
We will be using this app to scan the QR codes.


Step#2 : Using Google Chart Infographics


Google Chart Tools: Infographics service offers easy URL based QR code generation. The syntax on a high level is as follows
https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=Hello_World
The key param here is last one i.e. chl, and we passed a string “Hello_World” to it, so it will be parsed when the QR code is scanned. Please click on above URL to see the generated QR code and feel free to scan it. Learn more about syntax of URL here: https://google-developers.appspot.com/chart/infographics/docs/qr_codes#overview
A more decent example for the same would be generate a QR code for contact record, that is directly importable in smart phone via QR code scanner.  For example, here is a contact QR code below in MEMCard format, scanning it should give you access to contact details of guy called Abhinav Gupta.
Sample QR Code in MemCard formatHere is the complete Google QR code format URL for your reference:
https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=MECARD:N:Gupta,Abhinav;ADR:21, Electronic City, Gurgaon, India, 122001;TEL:+91111111;EMAIL:abhinav@fakedomain.com;;


Step#3 Bring it on Salesforce


Using the above QR code URLs is way easy in salesforce because of formula fields, one can easily create dynamic QR codes binded with record values. Here is an example of the above QR code formula which generates a MemCard format QR code for contact
IMAGE('https://chart.googleapis.com/chart?chs=150x150&cht=qr&chl=MECARD:N:' +  FirstName + ' ' + LastName  +';ADR:'+ MailingStreet +',' + MailingCity + ',' +  MailingState  + ',' + MailingCountry + ',' + MailingPostalCode + ';TEL:'+  MobilePhone  +';EMAIL:' +   Email  + ';', 'Scan the QR code to create contact in your mobile' )
Please note we used IMAGE formula function to generate an image out of the Google charts url, also note the use of Contact merge fields in building up the URL.
Using the above formula try creating a formula field in Contact, and add it to the page layout. You should see something like this
Contact page showing QR code generated in Memcard format via Formulas 
Scanning the above QR code should come up with something like this on your mobile device.
How Contact's scanned QR code looks like in Android Bar Code scanner
The cool factor about this scanned code is that one can perform various actions based on contact info like
  • directly call the number
  • add it on contacts
  • send email
  • directly view the address on map to get driving directions etc.


What are other possibilities ?


The above example just shows some goodness about Contact and MemCard format, their is no stopping point to go creative with events via VEvent or ICS format, or do something with other sobjects like using new location fields to add lat/long info in QR code, so that mobile app can precisely point it, here is example format for the same
geo:40.71872,-73.98905,100
Lastly, Google QR code infographics is deprecated now, but their are various QR code API’s available as alternates, which can do the same.
Have fun, and let me know your thoughts.