A few days ago, Gregor Wolf, one of my fellow SAP Mentors was looking for a UI5 control that would display a QR codes:
/wp-content/uploads/2016/08/img_57b761b1876b3_1019491.png

When I first started experimenting with custom controls, I have been experimenting with a couple of Javascript libraries, including the great QR library by Kazuhiko Arase. I believe at that time, I started experimenting with this library because it was possible to re-render the QR codes without rendering the entire DOM element, a feature that UI5 can leverage in its custom controls.

As I still had this custom control lying around, I decided to polish it up and release it under an MIT license on Github:
https://github.com/jpenninkhof/openui5-qrcode/

Here’s a screenshot of the control in action:

/wp-content/uploads/2016/08/screenshot_1019549.png

Installation is quite similar to any other custom control:

  1. Add the control directory to the application directory (webapp) of your project (don’t forget the 3rdparty directory)
  2. Register a module path for the control in the init method of your Component.js file:
    // Register custom controls
    var modulePath = jQuery.sap.getModulePath(this.getManifestObject().getComponentName());
    jQuery.sap.registerModulePath("com.penninkhof.controls", modulePath + "/control");
  3. Define the namespace in the top of your view: xmlns:p=”com.penninkhof.controls”, e.g.:
    
    <mvc:View
        controllerName="com.penninkhof.qrcode.controller.Main"
        xmlns:html="http://www.w3.org/1999/xhtml"
        xmlns:mvc="sap.ui.core.mvc"
        xmlns:p="com.penninkhof.controls"
        xmlns="sap.m">
    
  4. And just add the line below  to your view.
    <p:QRCode code="Awesome code" />

    Of course you could also bind the code to a model:

    <p:QRCode code="{/code}" />

To play around with the control, check out this demo-app on:

https://jpenninkhof.github.io/openui5-qrcode/

Enjoy! And please do feel free to fork and contribute on Github!

To report this post you need to login first.

1 Comment

You must be Logged on to comment or reply to a post.

Leave a Reply