Siebel Open UI Enhancement : Bar Code Plugin

Hello All,

In this article i have tried to implement Bar Code generator plugin that can convert Siebel Number and Id fields in Bar Code format  in real time.
This Example is based on JQuery and is full customizeable.

• We need to use a 3rd party Plugin that Offers Bar Code Generation option
• I am using file from the example, http://www.jqueryscript.net/other/Simple-jQuery-Based-Barcode-Generator-Barcode.html
• Include the file in Our PR file ,define("siebel/custom/BarCode", ["siebel/phyrenderer","siebel/custom/jquery-barcode"]
• Call Method in PR file
• We can pass dynamic value in plugin barcode Method with multiple display option 

Working Example 

Sample Code and Explain-out

1. Include jquery-barcode.js file ,this file can be downloaded from  http://www.jqueryscript.net/other/Simple-jQuery-Based-Barcode-Generator-Barcode.html and is required for the plugin to execute

2. Identify a placeholder to place BarCode, either identify an existing placeholder or create a new one for placing barcode

3. Set the Display parameters for your generated BarCode, parameters are defined in Settings 

 var settings = {
 output: "css",
 bgColor: "#F5F5F5",  // colour for barcode background
 color: "#000000",       // colour for barcode
 barWidth: "2",            //  Width of bars
 barHeight: "50",
 moduleSize: "5",
 posX: "10",
 posY: "20",
 addQuietZone: "1"
}

Sample PR file 

if (typeof(SiebelAppFacade.BarCode) === "undefined") { SiebelJS.Namespace("SiebelAppFacade.BarCode"); define("siebel/custom/BarCode", ["siebel/phyrenderer","siebel/custom/jquery-barcode"], function () { SiebelAppFacade.BarCode = (function () {     function BarCode( pm ){                 /* Be a good citizen. Let Superclass constructor function gets executed first */                 SiebelAppFacade.BarCode.superclass.constructor.call( this, pm );                               /* Static List of Control Identifier which will be displayed in Carousel; */                       }             SiebelJS.Extend( BarCode, SiebelAppFacade.PhysicalRenderer ); BarCode.prototype.ShowUI = function(){                 SiebelAppFacade.BarCode.superclass.ShowUI.call( this ); //get applet id and create new Id var pm = this.GetPM(); var controls = this.GetPM().Get("GetControls");                          var cntrl = controls[ "Service Number" ];                          var ServiceNumber = pm.ExecuteMethod( "GetFieldValue", cntrl ); // Value as input to pass to generate barcode  // settings for bar code display var settings = {  output: "css",  bgColor: "#F5F5F5",  color: "#000000",  barWidth: "2",  barHeight: "50",  moduleSize: "5",  posX: "10",  posY: "20",  addQuietZone: "1" }; // add a new container before applet data $('.GridBorder').before('<div id="barcode"></div>'); // append bar code in DIV $('#barcode').barcode( ServiceNumber, // Value barcode (dependent on the type of barcode) "ean13", // type (string) settings // parameters ); };     BarCode.prototype.BindEvents = function () { SiebelAppFacade.BarCode.superclass.BindEvents.call ( this ); var pm = this.GetPM(); }; return BarCode; } ()); return "SiebelAppFacade.BarCode"; }); }

Your Comments are most welcomed ..