QR Code generator component for Adobe AEM / CQ5

I like so much Adobe AEM: it is very easy to customize this product and make our customers happier. Moreover, Adobe AEM is based on a wonderful stack: it is easier to work on a state of art technology: Apache Jackrabbit OAK, Apache Sling, Apache Felix and the most important layer, Adobe AEM are so well integrated and very powerful technologies.

A new customer requirement

A customer asked me to create a new Adobe AEM component to generate on the fly QR Code images. The functional requirement is pretty simple: the author wants to add a QR Code that “renders” the current url page url. Occasionally the author wants to create a QR Code to an external Url or different page. QR Code are very useful because with a Sidekick-Adobe-AEM-Yuri-Simione-Custom component-QR Code--italiano-next 2u-consulenza-next2u.itsmartphone or tablet, everyone can scan the QR Code from a monitor and continue the browsing far from the desktop or far from a digital . In addition, if the end user print the page that contains a QR Code, it will be super fast to scan the QR Code and, again, to continue to surf the same printed information days or months later, without to enter an annoying url. Eventually, QR Code can store more than 4.000 character on a single image:  it is possible to store on a printed page any kind of information, like Sling selectors and parameters used to access the original page, visitor navigation path or detailed information of a specific product showed in the web site.

Why QR Code?

If you think that this is another strange requirement from your digital marketing team, you will probably change idea. QR Code are in some way related to digital marketing because these can connect a casual visitor to a specific page or, better, to a new web site that he or she never knewed or visited before. Think about digital signage in a shop or in a airport. Do you see the point?

digital-signage-qr-code-yuri.simione-adobe-aem--italiano-next 2u-consulenza-next2u.it

 

digital-signage-call-to-action-qr-code

If you are, like me, a digital marketer newbie probably still don’t get the importance of  the QR Code technology. Ok, this is not what you should appreciate or love, this is just a an image but probably your digital marketing team will ask you something similar soon. Adobe Experience Manager is used not just to publish sites or to create cool web applications or Html5 based apps for mobile phones or tablets. With AEM your digital marketing team can engage shoppers in large  in a shopping aisle of a shopping center, in the airport, in a public place, using digital signage or digital kiosks. Evantually, do you know that public administrations are using Adobe AEM? Visitors are not just shoppers, casual visitors could be also citizens that are looking for useful information in few seconds just watching a digital kiosks in a public place.

By the way, did you notice the new “Screen” link in the AEM 6 projects console? There are and there will be more features in AEM that integrate digital experiences in phisical stores.

aem-screen-yuri-simione-adobe-aem-digital.signage--italiano-next 2u-consulenza-next2u.it

The QR Generator component implementation

This is what my customer was asking. It is not more than that, a new component to create a QR Code, to drag and drop directly into the web page (or to statically include in every page):Yuri Simione - custom Adobe Aem Cq5 component

Of course, he wants that the new component works and can be configured via the new Touch UI interface:

blog-qrcode-touch-ui

With libraries like ZXing it is very easy to create a QR Code image from a string.  So, the first thing to do is to import one of these libraries as an OSGI bundle.

The good news is that Adobe already provides a similar bundle in the standard implementation. Adobe is using this bundle to publish the url of the authored mobile apps with a QR Code. In the OSGI system console you can easily find this bundle:

QR CODE GENERATOR - Adobe AEM - Yuri Simione

qrcode-to-crxde-lite-adobe-aem-yuri-simione The QR Code of the CRX DE Lite url, on your local AEM instance.

The same bundle is in the “active” state in the publish instance so we don’t have to manually activate that.

The bundle implements a simple servlet that renders a QR Code just passing the “url” parameters to the servlet …url. So, for example, to create a QR Code to the Adobe CRX DE Lite application, one can just enter this url: http://localhost:4502/libs/wcm/mobile/qrcode.png?url=http://localhost:4502/crx/de

With this bundle, the implementation required few steps and, litterally, very few lines of Java code. I just created a new component named qrcode-generator. Here, below, the Java code that I wrote for the component logic:

<%@ page import="com.day.cq.commons.Externalizer,
 javax.jcr.Node"%>
<%@ include file="/libs/foundation/global.jsp"%>
<%
 final String CODE = "qrcode"; // the qr code property name
 final String WIDTH = "width";
 Node n = currentNode;
 if(!n.hasProperty(CODE))
 {
 String extension = "." + slingRequest.getRequestPathInfo().getExtension();
 Externalizer externalizer = resourceResolver.adaptTo(Externalizer.class);
 String myExternalizedUrl = externalizer.publishLink(resourceResolver, currentPage.getPath() + extension);
 n.setProperty(CODE,myExternalizedUrl);
 n.setProperty(WIDTH,100); // default width
 n.getSession().save();
 }
%>
<img width="<%=properties.get(WIDTH,"")%>" src="<%= request.getContextPath() %>/libs/wcm/mobile/qrcode.png?url=<%=properties.get(CODE,"")%>"/>

Configuration

I created the component dialogs for both the Classic and the Touch UI, just using the CRX DE Lite:

touch-ui-dialog-adobe-aem-yuri-simione-italiano-next 2u-consulenza-next2u.it

classic-ui-dialog-configuration-adobe-aem-yuri-simione--italiano-next 2u-consulenza-next2u.it

One important point is that the standard bundle generates QR Code just for url (not for any kind of text) and only for the urls that are in a whitelist defined as a regex. Url based on the Externalizer service are automatically whitelisted: that’s why I used the Externalizer in the component logic implementation. The

externalizer.publishLink

creates a link to the Adobe AEM publish instance. If you need to create QR Code for generic text, you have just to modify the component configuration via the Apache Felix Console, using the menu OSGI >> Configuration:

osgi-configuration-adobe-aem-yuri-simione--italiano-next 2u-consulenza-next2u.it

And that’s it. Now the author can create a new QR Code in few seconds! Watch the new component in action on Vimeo.

The component package

I like to share my Adobe AEM experience and it is a pleasure to do that when many other colleagues do the same, daily. I created a new package that contains the custom component and everything needed to use the new component. Just click on the image below, download the package and try it on your environment (you have to install the package and enable the new coomponent in your pages but I am supposing you know how to do that).

package-adobe-aem-yuri-simione-consulenza-italiano-aem-adobe-cq5-next2u

Next steps

It is good to add a configuration to include the Alt text, a Description to the rendered QR Code as per every html <img /> tag. Then it is needed to update the dialogs in order to enable modifications for the new attributes. I am going to complete these changes (just few minutes required usingAEM stack!).

Digital marketing team is composed by “volcanic” people. They are never satisfied and they wants more and more, every day, something diffancy-qr-code-adobe-aem-yuri-simione-generator-custom-component--italiano-next 2u-consulenza-next2u.itferent, something more innovative. In the future they will want someghing like newer and fancy QR Code. We are ready to make our digital marketing team happy because with Adobe AEM you can concentrate “just” on business logic.

If you need more information or if you need a custom AEM implementation, just ask me or to my company, Next 2U Consulting, a consultancy firm based in Rome, Italy.

You can follow me in Twitter: http://twitter.com/artika4biz or on Linkedin http//linkedin.com/in/yurisimione .

Next 2U Consuting - consulenza e formazione EMC Documentum, Adobe AEM CQ5, Roma, Italia, Italiano

Next 2U Consuting - consulenza e formazione EMC Documentum, Adobe AEM CQ5, Roma, Italia, Italiano

This entry was posted in Adobe, WCM and tagged , , , , , , , . Bookmark the permalink.

Leave a Reply