Quantcast
Channel: SAPUI5 Developer Center
Viewing all articles
Browse latest Browse all 789

Generate QR Code in SAPUI5 Application using Google Chart API

$
0
0

In this blog, we will see how we can generate QR code using Google Chart API.

QR_CM.png

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.

sapui5_qr1.jpg

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.

sapui5_qr2.jpg

As displayed below, you will be able to see the decoded result of your QR code.

sapui5_qr3.jpg

 

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


Viewing all articles
Browse latest Browse all 789

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>