Barcode Control

I recently developed a SAPUI5 application that had the need to generate a barcode . I try to find it on SDK but I found what appears to be a control for scanning, but no one to generate codes. So I try to find some jQuery module that could do that and found many results,but I opted for JsBarcode.

Implementing JsBarcode

Following the instructions, I download JsBarcode.all.min.js and copy it to my project; then I load the file on index.html.

<script src=“JsBarcode.all.min.js”></script>

Then I add an svg tag in the XML view -using sap.ui.core.HTML control-.

<core:View xmlns:core=“sap.ui.core” xmlns:mvc=“sap.ui.core.mvc” xmlns=“sap.m”

controllerName=“barcode.Main” xmlns:html=“http://www.w3.org/1999/xhtml“>

     <Page title=“Title”>

          <content>

               <core:HTML content=“&lt;svg id=&quot;barcode&quot;&gt;&lt;/svg&gt;”/>

          </content>

     </Page>

</core:View>

Finally I use the onAfterRendering method -to have already drawn the svg tag- for generate the barcode.

sap.ui.controller(“barcode.Main”, { 

     onAfterRendering: function() {

          JsBarcode(“#barcode”, “Hi!”);

     } 

});

With these steps I have the barcode running!

But what if I encapsulate this in a SAPUI5 control? that way I could use bindings and the interaction with the control would be more standard.

Creating JsBarcodeUI5 control

All information to develop controls are in the SDK so let’s do this! First we fill the metadata with all properties -avilables on JsBarcode doc- and the rendererer.

var JsBarcodeUI5 = Control.extend("openui5.jmmartinez.barcode.JsBarcodeUI5", {
  metadata: {
  properties: {
  "value": {
  type: "string",
  defaultValue: "defaultValue"
  },
  "renderType": {
  type: "string",
  defaultValue: renderType.svg
  },
  "format": {
  type: "string",
  defaultValue: format.code128
  },
  "width": {
  type: "int",
  defaultValue: 2
  },
  "height": {
  type: "int",
  defaultValue: 100
  },
  "displayValue": {
  type: "boolean",
  defaultValue: true
  },
  "fontOptions": {
  type: "string",
  defaultValue: ""
  },
  "font": {
  type: "string",
  defaultValue: "monospace"
  },
  "textAlign": {
  type: "string",
  defaultValue: "center"
  },
  "textPosition": {
  type: "string",
  defaultValue: "bottom"
  },
  "textMargin": {
  type: "int",
  defaultValue: 2
  },
  "fontSize": {
  type: "int",
  defaultValue: 20
  },
  "background": {
  type: "sap.ui.core.CSSColor",
  defaultValue: "#ffffff"
  },
  "lineColor": {
  type: "sap.ui.core.CSSColor",
  defaultValue: "#000000"
  },
  "margin": {
  type: "int",
  defaultValue: 10
  },
  "marginTop": {
  type: "int"
  },
  "marginBottom": {
  type: "int"
  },
  "marginLeft": {
  type: "int"
  },
  "marginRight": {
  type: "int"
  },
  }
  },
  renderer: function(oRm, oControl) {
  oRm.write("<div ");
  oRm.writeControlData(oControl);
  oRm.addStyle("width", "auto");
  oRm.addStyle("height", "auto");
  oRm.writeClasses();
  oRm.writeStyles();
  oRm.write(">");
  oRm.renderControl(oControl._html);
  oRm.write("</div>");
  }
  });

Once we have this, we would start over, pick up the options and render the barcode with them.

JsBarcodeUI5.prototype.init = function() {
        this.barcodeId = this.getId() + "-barcode";
        this._html = new sap.ui.core.HTML({
        content: "<" + this.getRenderType() + " id='" + this.barcodeId + "'></" + this.getRenderType() + ">"
        });
    };
    JsBarcodeUI5.prototype.onAfterRendering = function() {
    this.createBarcode();
    };
    JsBarcodeUI5.prototype.createBarcode = function() {
    JsBarcode(jQuery.sap.domById(this.barcodeId), this.getValue(), this._getBarcodeOptions());
    };
    JsBarcodeUI5.prototype._getBarcodeOptions = function(){
     var mBarcodeOptions = {};
     mBarcodeOptions.format = this.getFormat();
     mBarcodeOptions.width = this.getWidth();
     mBarcodeOptions.height = this.getHeight();
     mBarcodeOptions.displayValue = this.getDisplayValue();
     mBarcodeOptions.fontOptions = this.getFontOptions();
     mBarcodeOptions.font = this.getFont();
     mBarcodeOptions.textAlign = this.getTextAlign();
     mBarcodeOptions.textPosition = this.getTextPosition();
     mBarcodeOptions.textMargin = this.getTextMargin();
     mBarcodeOptions.fontSize = this.getFontSize();
     mBarcodeOptions.background = this.getBackground();
     mBarcodeOptions.lineColor = this.getLineColor();
     mBarcodeOptions.margin = this.getMargin();
     mBarcodeOptions.marginTop = this.getMarginTop();
     mBarcodeOptions.marginBottom = this.getMarginBottom();
     mBarcodeOptions.marginLeft = this.getMarginLeft();
     mBarcodeOptions.marginRight = this.getMarginRight();
          return mBarcodeOptions;
    };

And with this we can use it in any view we need and make binding to any of its properties as any SAPUI5 standard control!

<core:View xmlns:barcode="openui5.jmmartinez.barcode" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" controllerName="barcode.Main" xmlns:html="http://www.w3.org/1999/xhtml">
  <Page title="Title">
  <content>
  <barcode:JsBarcodeUI5 value="Hi SAPUI5 Community!"/>
  </content>
  </Page>
</core:View>

You can download the control code here.

Please feel free to put your comments and suggestions!