Skip to Content
Author's profile photo Jose Manuel Martinez Exposito

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!

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Gregor Wolf
      Gregor Wolf

      Hi Jose,

      have you thought about providing your control as a real open source project at GitHub?

      Best regards
      Gregor

      Author's profile photo Sreehari V Pillai
      Sreehari V Pillai

      Good one . Very useful

      Author's profile photo Urvish Vijay Panchal
      Urvish Vijay Panchal

      Really helpful. Thank you so much 🙂