Generate QR Code in SAPUI5 Application using Google Chart API
In this blog, we will see how we can generate QR code using Google Chart API.
As per Wikipedia,
QR code (abbreviated from Quick Response Code) is the trademark for a type of matrix barcode (or two-dimensional barcode) first designed for the automotive industry in Japan. A barcode is an optically machine-readable label that is attached to an item and that records information related to that item. The information encoded by a QR code may be made up of four standardized types (“modes”) of data (numeric, alphanumeric, byte / binary, Kanji) or, through supported extensions, virtually any type of data.
The QR Code system has become popular outside the automotive industry due to its fast readability and greater storage capacity compared to standard UPC barcodes. Applications include product tracking, item identification, time tracking, document management, general marketing, and much more.
Google Chart API provides nice way to generate QR code. You can find good details on Google’s QR code API here
Taking reference from this website, I developed simple SAPUI5 application to generate QR code of Contact details in the MeCard format.
Also I am generating BusinessCard with QR code as an image on it.
Let’s see the SAPUI5 application screen and output.
As displayed above, I am providing contact details information and then generating MeCard type QR code and also using the same image on business card UI element.
Now, to decode QR code, I am using zxing online QR code decoder. Here either we can upload the QR code image file OR specify the image URL. you just need to right click on the image generated (as displayed in above screen) and provide the URL path.
As displayed below, you will be able to see the decoded result of your QR code.
You can access the code at GitHub and also can access live demo at JSBin
I hope you enjoyed reading this blog on QR code generation. Please feel free to put your comments/suggestions. And I hope you will be happy to generate QR code with this simple SAPUI5 application 🙂
Great Post, i was looking for something like this for a application i was building. Thanks a lot 🙂 .
Thanks Pruthvi for your comments !
It's great post , I am new at SAPUI5 , I want to make an application where I can use my mobile camera to capture/scan the QR code generated from this code and then I want to use that information in my other app.
So, basically I am trying to find code to scan a QR code with my mobile camera.
Unless you are asking for clarification/correction of some part of the Document, please create a new Discussion marked as a Question. The Comments section of a Blog (or Document) is not the right vehicle for asking questions as the results are not easily searchable. Once your issue is solved, a Discussion with the solution (and marked with Correct Answer) makes the results visible to others experiencing a similar problem. If a blog or document is related, put in a link. Read the Getting Started documents (link at the top right) including the Rules of Engagement.
NOTE: Getting the link is easy enough for both the author and Blog. Simply MouseOver the item, Right Click, and select Copy Shortcut. Paste it into your Discussion. You can also click on the url after pasting. Click on the A to expand the options and select T (on the right) to Auto-Title the url.
Thanks, Mike (Moderator)
SAP Technology RIG
well it was indeed a good link you have shared, i am currently working on the proof of concept where i need to write the logic for decoding the barcode or QR code. Is there any logic for decoding the barcode.? please advice.