Saturday 19 August 2017

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.

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 ..

No comments:

Post a Comment

Siebel GoTo View - Handling Realtime cases

 Hello All,  We all must have used GoTo view functionality of siebel to navigate to a particular view from current view. What if the require...