Siebel Foundation: August 2017

Tuesday 29 August 2017

Siebel Open UI Enhancement : Fixing Text Area using jQuery

Hello All,

In this post i will provide some alternate solution to text area type fields which in Open UI have elastic control property.
In HI mode there used to be an icon on Text Area fields and on click of the icon a new popup opened and we could write and read the text easily which has been replaced by elastic control in open UI.

here, we are calling a jQuery plugin to dispaly the content of text area in a popup.

also, the issue can also be fixed without using 3rd party jquery plugin but that solution is restrictive, you can refer the link http://www.siebelfoundations.com/2015/09/fixing-text-area-issue-in-siebel-using.html

Features

Content of Text Area field displayed in Separate window popup
UI is Blocked till we explicitly close the popup
We can call the popup in multiple events like mouse hover, Click , Double click
We are using lobibox plugin from https://lobianijs.com/site/lobibox

Working demo is as shown below

Sample Code

$('[aria-label="SR Description"]').click(function(){

Description = pm.ExecuteMethod( "GetFieldValue", cntrl );

Lobibox.window({title: 'Description of Field',

content: Description});

});

here, Lobibox.window({title: 'Description of Field', content: Description}); is calling the popup with title and value of text are as content

Sample Video

you can email me for the exact PR file. Your comments are suggestion are most welcome.

Siebel Open UI Enhancement : CountDown Timer

Hello All,

In this post let me demonstrate you Countdown timer API in Siebel Open UI.
When working with siebel application like call center or Siebel Service we often have SLA/Time frame for a particular call in which we need to close the request.

In this article i have tried implementing jQquery Countdown function that calculates the remaining time for call escalation and popups user for the SLA time remaining.

We can configure this on any event like click , mouse hover, on focus etc.

I have configured this for click event.

Features

No need of manual calculation just pass the date in jQuery function and it will calculate the time
Time calculated is accurate to Seconds

Sample Code

var span = '<span id="CountDown"></span>'; /// Create a span to hold the time value

$('#CountDown').countdown('2017/08/30'.on('update.countdown', function(event) {

var $this = $(this).html(event.strftime(''

+ '<span>%-w</span> week%!w '

+ '<span>%-d</span> day%!d '

+ '<span>%H</span> hr '

+ '<span>%M</span> min '

+ '<span>%S</span> sec'));

});

/// function to set the time in HTML of span element created above, also need to pass date in this code

Timeleft = $('#CountDown').text(); /// get the time value in a variable

Below is the sample working example.

Sample Video

you can email me for the exact PR file. Your comments are suggestion are most welcome.

Tuesday 22 August 2017

Siebel Open UI Enhancement :- Progress Bar in Siebel

Hello All,

In this post i will demonstrate a very useful API, Progress Bar Indicator. There are various areas where this API fits well as listed below

Opportunity Win/Loss Percentage
Order Status
Service Request SLA

In the below example the API takes value from Probability field on the form and displays the progress bar as per the percentage.

I would like to thank Sandip Mitra for his valuable inputs in this.

Sample Code and Explain-out

1. Identify a placeholder to place ProgressBar, either identify an existing placeholder or create a new one for placing progress bar.

$('.GridBorder').after('<div id="progressBar"><div></div></div>');

2. Set the Display properties by CSS for your generated ProgressBar, parameters are defined in CSS .

You can either add inline CSS as we are doing in this example or create a new CSS file,please refer this post for steps about how to add a new css in siebel

$('#progressBar').css({
"width": "auto",
"height": "30px",
"margin": "10px",
"border": "2px solid #111",
"background-color": "#292929"
})

$('#progressBar div').css({
"height": "100%",
"color": "#fff",
"text-align": "right",
"line-height": "28px",
"width": "0",
"background-color": "#0099ff"
})

3. Set the animation in ProgressBar.

We are using animate function of jquery library to show the progress bar, please refer the link ,https://www.w3schools.com/jquery/jquery_animate.asp

to explain the basic,

progressBarWidth = percent * $('#progressBar').width() / 100;

$('#progressBar').find('div').animate({ width: progressBarWidth }, {duration: 5000,easing: "linear"}).html(percent + "% ");

here in animate function we need to pass:-

(selector).animate({styles},speed,easing,callback)

selector, the Id of our created DIV $('#progressBar')

{styles}, styles for animation like width , height, etc..

easing, the movement of progress linear or non-linear

callback, function to be executed after the animation

4. Get the actual value of Probability from Probability field from form.

Get the value of control using PR file

var pm = this.GetPM();
var controls = pm.Get("GetControls");
var cntrl = controls[ "Probability" ];
var percent = pm.ExecuteMethod( "GetFieldValue", cntrl );

5. Write custom logic to refresh and load the Bar where ever required.

Working Example looks like,

Video for the working Example,

you can email me for the exact PR file. Your comments are suggestion are most welcome.

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.

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

Tuesday 15 August 2017

Siebel Auto Complete Plugin :- Part 1

Hello All,

In Siebel Dropdown fields (LOV) we have option to enter some Letter and related Option are shown in Dropdown, as shown in below image.

But in Normal Text Fields we have to enter the complete information there is no option of auto-complete.
We can extend the Option for auto fill for normal text fields also by the below mentioned Method.

We need to use a 3rd party Plugin that Offers Auto Complete option
I am using file from TypeAhead, http://twitter.github.io/typeahead.js/
Include the file in Our PR file
Call Method in PR file
We can either retrieve the Option from Fixed set of value as in this example or From a file (.txt) or at run-time by querying Database (will take this in further articles)

Sample PR Code

you can download typeahead.js file and PR file from here

PR File : https://drive.google.com/open?id=0B52024rQ9Hc0NXQxWTR1TEtUbzg
JS file : https://drive.google.com/open?id=0B52024rQ9Hc0LURFbTQ1aDNiTzg

if (typeof(SiebelAppFacade.AutoComplete) === "undefined") {

SiebelJS.Namespace("SiebelAppFacade.AutoComplete");
define("siebel/custom/AutoComplete", ["siebel/phyrenderer","siebel/custom/typeahead"],
function () {
SiebelAppFacade.AutoComplete = (function () {

function AutoComplete( pm ){
/* Be a good citizen. Let Superclass constructor function gets executed first */
SiebelAppFacade.AutoComplete.superclass.constructor.call( this, pm );

/* Static List of Control Identifier which will be displayed in Carousel; */

}

SiebelJS.Extend( AutoComplete, SiebelAppFacade.PhysicalRenderer );

AutoComplete.prototype.ShowUI = function(){
SiebelAppFacade.AutoComplete.superclass.ShowUI.call( this );
var pm = this.GetPM();

}

/// bind events function
AutoComplete.prototype.BindEvents = function(){
SiebelAppFacade.AutoComplete.superclass.BindEvents.call( this );
var pm = this.GetPM();
var controls = this.GetPM().Get("GetControls");

// read out Description field
$('[aria-label="Alternate Phone #"]').dblclick(function(){

// var controls = pm.Get( "GetControls" );
var cntrl = controls[ "Description2" ];
// alert(controls);
var Status = pm.ExecuteMethod( "GetFieldValue", cntrl );
//alert(Status);
responsiveVoice.speak( Status );
});

/////////////////////////////////

var substringMatcher = function(strs) {
return function findMatches(q, cb) {
var matches, substringRegex;

// an array that will be populated with substring matches
matches = [];

// regex used to determine if a string contains the substring `q`
substrRegex = new RegExp(q, 'i');

// iterate through the pool of strings and for any string that
// contains the substring `q`, add it to the `matches` array
$.each(strs, function(i, str) {
if (substrRegex.test(str)) {
matches.push(str);
}
});

cb(matches);
};
};

var states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'California',
'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii',
'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana',
'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota',
'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire',
'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota',
'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island',
'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont',
'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'
];

//$('#1_Last_Name').typeahead({ /// tt-menu tt-open

$('[aria-label="Alternate Phone #"]').typeahead({
hint: true,
highlight: true,
minLength: 1
},
{
name: 'states',
source: substringMatcher(states)
});

//define colour, Border and Width Scheme

$('.tt-menu').css({ "background": "#F5F5F5", "width": "155px","border-style": "solid"})

////////////////////////////////
};

return AutoComplete;
}
());
return "SiebelAppFacade.AutoComplete";
});
}

Working Example of the above is :

Will be sharing further advaced option te fetch data from Files and Siebel Database in further Articles.
Your Comments are most welcomed ..

Thursday 3 August 2017

Siebel Open UI Enhancement ,Part 4: Siebel Voice Commands, SIBI The Final API

Hello All,

In the previous articles of this series i explained text to speech functionality and speech to Text functionality.Here i will be sharing some

Text To Speech : http://www.siebelfoundations.com/2017/05/siebel-open-ui-enhancement-text-to.html

Text To Speech Advanced : http://www.siebelfoundations.com/2017/05/siebel-open-ui-enhancement-part-3-text.html

Speech To Text : http://www.siebelfoundations.com/2017/05/siebel-open-ui-enhancement-part-2.html

So here in this article i am explaining my final version, this post will demonstrate how Siebel can listen Voice Inputs and perform necessary actions. I call it SIBI

Siebel Voice Commands :

This functionality listens users voice as input and Understands commands like , Create a new record, Delete an Existing record, Navigate to next Record and Update a Existing Record
User will be able to enter value in any Field by speaking out the text and this API will write the value in field without typing
User Needs to Double Click on the fields to Start entering value in the Form.
No 3rd party API or plugin has been used for this
Its default feature of HTML5

Video Demo for the above is:

You can Download sample code here :
https://drive.google.com/open?id=0B52024rQ9Hc0NXQxWTR1TEtUbzg
So Make Siebel Listen to You ;-) by trying SIBI.
Please share your views about SIBI. Your suggestions are most welcome..

<<<<<<<< Previous in the Series >>>>>>>>>