Siebel Foundation: Siebel Open UI Tutorials

Showing posts with label Siebel Open UI Tutorials. Show all posts

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

Sunday 21 May 2017

Siebel Open UI Enhancement ,Part 3: Text to Speech API, Enhanced

Hello All,

In the previous article of the series i explained text to speech functionality on button click.

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

One of reader advised me if we could extend this for multiple fields,

There should not be a button that reads just one field
Different fields could be read by Siebel

So, i tried to implement this with the approach

find a event to trigger speech , for this i used double click
on the event call Speak() method
Pass value of field in Speak()

Sample PR File

The code is similar as explained in previous post. The working sample looks like

Downloadable link to PR and JS file.

https://drive.google.com/open?id=0B52024rQ9Hc0ZFg0bnYyTHM4bTg

In my next post i will be sharing Speech to Text conversion functionality in Siebel.

<<<<<<<<Next in the Series >>>>>>>>>

Saturday 20 May 2017

Siebel Open UI Enhancement ,Part 2: Speech to Text Enhancement

Hello All,

In my previous post (http://www.siebelfoundations.com/2017/05/siebel-open-ui-enhancement-text-to.html) i tried to implement Text to speech conversion i.e. read out Siebel fields on a button click. So this time i tried to implement something similar on that ground.

If you are an iPhone user you might have explored SIRI functionaly which allows you to control your phone with your voice commands, i tried something similar to that but on a very basic level.

Siebel Speech to Text :

This functionality listens users voice as input and sets the spoken text as value in a field.
No 3rd party API or plugin has been used for this
Its default feature of HTML5
Its very lightweight, responsive and accurate detection is possible with this

See below video for basic functionality, will share exact code and advanced functionality in upcoming post on this series..

For exact code please inbox me, i will be happy to share.
Downloadable link to PR(TextConvertor.js) file.

https://drive.google.com/open?id=0B52024rQ9Hc0ZFg0bnYyTHM4bTg

In my next posts i will be sharing some advanced voice control functionality in Siebel.

Siebel will be able to Create ,Delete, Update records on your voice commands same as the features offered by SIRI, i am calling this plugin as SIBI excited ??, stay tuned will demonstrate this in my next post.

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

<<<<<<<< Next in this Series >>>>>>>>>

Your suggestions are most welcome..

Monday 15 May 2017

Siebel Open UI Enhancement ,Part 1: Text to Speech API

Hello all,

After a long break from writing any useful post i am writing this post after one of my application user demanded a feature to readout Siebel Fields, so i thought to give it a try and achieved it as below.

The concept is very simple we need to call a 3rd party plugin or API and pass field value to it, that we want system to speak. There are various API's available to achieve it to name a few

https://responsivevoice.org/
http://www.jqueryscript.net/other/Lightweight-jQuery-Based-Text-To-Speech-Engine-Articulate-js.html
http://www.masswerk.at/mespeak/
http://www.jtalkplugin.com/

I used method from https://responsivevoice.org/, the API is free to use and supports many options.

Base function is responsiveVoice.speak("Text to Speak"), here speak() take in input the text to speak. Additional parameters that can be passes are,

Changes default voice to "UK English Male", responsiveVoice.speak("hello world", "UK English Male");
Sets Pitch of voice, responsiveVoice.speak("hello world", "UK English Male", {pitch: 2});
Sets volume of vocie, responsiveVoice.speak("hello world", "UK English Male", {volume: 1});

for further documentation please refer, https://responsivevoice.org/api/

Tasks to do to make it work in Siebel,

Download responsivevoice.js from http://code.responsivevoice.org/responsivevoice.js or Include the script directly in your code , <script src="http://code.responsivevoice.org/responsivevoice.js"></script>
Add the file under Manifest Files if downloaded else directly refer this is PR file
Write a PR file with this JS file under define section , define("siebel/custom/SpeechConvertor", ["siebel/phyrenderer","siebel/custom/responsivevoice"]
Associate PR file with a Applet
In PR file write code to get value of certain field and call speak() method on some event say Button click.

Sample PR File

Downloadable link to PR and JS file.

https://drive.google.com/open?id=0B52024rQ9Hc0ZFg0bnYyTHM4bTg

Explanation of Code :

1. Define and Include 3rd party files

define("siebel/custom/SpeechConvertor", ["siebel/phyrenderer","siebel/custom/responsivevoice"] ,

all the JS files that code refer need to be defined here. Since we are using speak() method that is defined in file responsivevoice.js so we need to include this. Also either we can directly call file by refering its web location ["siebel/phyrenderer","//code.responsivevoice.org/responsivevoice.js"] or by locally saving file under siebel/custom folder.

2. Creation of button that will call method speak

var id1 = this.GetPM().Get("GetFullId") + '-siebui-cust-ActivateMember-btn';

//Custom Button that will trigger speech API

var Speak = "<button " +
"id= '" + id1 + "' " +
"class= 'siebui-ctrl-btn appletButton' " +
"aria-label=Speak " +
"type=\"button\" " +
"data-display=\"Speak\" " +
"title=Speak " + ">" + "Speak" + "</button>";

$("#s_" + this.GetPM().Get("GetFullId") + "_div").find(".AppletMenu").append(Speak);

3. Function that gets value of a selected field and calls speak method

$('button[data-display="Speak"]').click(function(){

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

Working Demonstration of this is shown in below video.

any suggestions are always welcome...

In my next post i will be sharing Speech to Text conversion functionality in Siebel..

<<<<<<<<Next in the Series >>>>>>>>>

Wednesday 21 September 2016

Creating a Custom Button using PR file

Hello All,

Recently i had a requirement where i was required to add a new button on List applet to perform some update operation. This is very basic requirement and can be easily done by creating a button at applet control and associating a script to perform the desired operation.

This time i thought to work without a SRF recompile, so i tried this with PR file and i actually saved a lot of time and learned something new.

Actual Requirement was like :

Need to Create a button in the Highlighted area

Button Created using PR

Sample PR Code :

explanation of Code :

var id1 = this.GetPM().Get("GetFullId") + '-siebui-cust-Validate-btn' , Id which we are assigning to the button

var ValidateBttn = "<button " +

"id= '" + id1 + "' " +

"class= 'siebui-ctrl-btn appletButton' " +

"aria-label=Validate" +

"type=\"button\" " +

"data-display=\"Active\" " +

"title=Validate" + ">" + "Validate" + "</button>" , code for custom button here we have defined Id, Label and Title for this button

.find(".siebui-icon-find").append(ActivateMemberBttn) , code finds Object with class siebui-icon-find and adds button near this object

to find the Place holder for button :

Click fn + F12 to open browser console
Select the element after which you want to place control
Look for its class, can be found under (Class : "") tag
make sure the class is unique i.e. used only once in the current div else it will result in Creation of multiple buttons

Now complete you PR file and write any code you want to perform in your PR on button click event.

Hope this was helpful ...

Wednesday 30 September 2015

Fixing Text Area Issue in Siebel using custom PR file

Hi all,

In Open UI there is a change in behaviour of fields of type Text Area, in HI there used to be a icon in text area field on on click on that a popup opened and the data was displayed separately in popup.
But in Open UI the functionality has been replaced with dragable Field option, wherea icon apper in the botton right of field and the field can be enlarged.

We had a requirement recently to fix the Text Area field issue, we used the below appraoch.

1. Increase the dimension of TextArea field onFocus.

2. Set the values of dimensions to initial onBlur.

This does not replicates the HI behaviour but serves the purpose.
PR file looks Like

if (typeof(SiebelAppFacade.LOYHideFieldPR) === "undefined")
{
SiebelJS.Namespace("SiebelAppFacade.LOYFixTextAreaPR");
define("siebel/custom/LOYFixTextAreaPR", ["siebel/phyrenderer"],
function () {
SiebelAppFacade.LOYFixTextAreaPR = (function ()
{
function LOYFixTextAreaPR( pm )
{
/* Be a good citizen. Let Superclass constructor function gets executed first */ SiebelAppFacade.LOYFixTextAreaPR.superclass.constructor.call( this, pm );
/* Static List of Control Identifier which will be displayed in Carousel; */
}
SiebelJS.Extend( LOYFixTextAreaPR, SiebelAppFacade.PhysicalRenderer ); LOYFixTextAreaPR.prototype.ShowUI = function() SiebelAppFacade.LOYFixTextAreaPR.superclass.ShowUI.call( this );
var pm = this.GetPM();
//Enlarge Comments field on Focus Rahul Verma
$('[aria-labelledby = "Description_Label"]').focus(function()
{
$(this).css( {
'height': '147px',
'width': '488px',
'position': 'inherit',
'margin': '2px 0px',
})
});
$('[aria-labelledby = "Description_Label"]').blur(function()
{ $(this).css( {
'height' : '48px',
'width' : '104px' ,
'position' : 'inherit'
})
});
};
return LOYFixTextAreaPR ;
}
());
return "SiebelAppFacade.LOYFixTextAreaPR";
});
}

Hope this was helpful..

#Note : please see post http://www.siebelfoundations.com/2017/08/siebel-open-ui-enhancement-fixing-text.html for a jQuery based solution to this issue.

Monday 21 September 2015

Conditionally hide a field using PR file in siebel

Hi all,

Recently i had a requirement to hide a field conditionally based on the value of another field. This could be done using browser script but since we are using Open UI so we achieved it using
Physical Renderer file(PR). The arrpoach is preety simple.

1. Need to Identify the field depending on which to hide the other field or Hide same field.
2. Write the logic in PR file to hide the field.
3. Register the custom PR against the applet in Mainfest Administration.

The exact logic is :

Result
Field Active is hidden if the value is N, This can be modified for other requirement as well we just need to identify the correct element /field to hide, using inspect element.

PR file looks Like

if (typeof(SiebelAppFacade.LOYHideFieldPR) === "undefined")
{
SiebelJS.Namespace("SiebelAppFacade.LOYHideFieldPR"); define("siebel/custom/LOYHideFieldPR", ["siebel/phyrenderer"], function ()
{ SiebelAppFacade.LOYHideFieldPR = (function () { function LOYHideFieldPR( pm )
{ /* Be a good citizen. Let Superclass constructor function gets executed first */ SiebelAppFacade.LOYHideFieldPR.superclass.constructor.call( this, pm );
/* Static List of Control Identifier which will be displayed in Carousel; */
}
SiebelJS.Extend( LOYHideFieldPR, SiebelAppFacade.PhysicalRenderer );
LOYHideFieldPR.prototype.ShowUI = function() { SiebelAppFacade.LOYHideFieldPR.superclass.ShowUI.call( this );
var pm = this.GetPM();
var controls = this.GetPM().Get("GetControls");
var cntrl = controls[ "ActiveFlag" ];
var ActiveFlg = pm.ExecuteMethod( "GetFieldValue", cntrl );
// alert(ActiveFlg); Test to check if value is retrieved or not
if(ActiveFlg == "N")
{
$('[aria-labelledby = "ActiveFlag_Label"]').hide();
$('#ActiveFlag_Label').parent().hide();
} };
return LOYHideFieldPR ; }());
return "SiebelAppFacade.LOYHideFieldPR";
});
}

Hope this was helpful..

Fixing UI issue using CSS in Open UI

Hi All ,

In my previous post http://siebelfoundation.blogspot.in/2015/09/adding-new-css-in-siebel.html i explained how to register a new css in siebel. In this post i will show you how to make changes in CSS and deploy on server.
The steps are very simple.

1. We need to use the console to identify the Object on which we need to make changes
Press F12 and select Inspect element from the top left of the consle window.

Hover on the element you need to apply any change and click on the element.

CSS and HTML tags related to the element will be seen in the right corner of console.

Identify the element and test changes in the console, once changes have been identified we will move the changes to custom CSS file.

Issue : Fields Width is too small and text is not appearing properly

Solution : Identified the Class for the field and increased the field width.

2. Write the code in custom CSS file located on webserver under "swse/public/enu/files/custom/NewCss.css"
Once you have idetified and tested the changes in console now you need to add the changes in CSS file

// custom CSS file

.siebui-align-left { width: 180px !important; } // For increasing the width

3. Clear browser cache and reload siebel application, and your are done.

Hope this was helpful ...

Friday 18 September 2015

Adding new CSS in Siebel

Hi all,

Recently i had a requirement to make some changes in siebel application layout, the changes were related to CSS. So instead of making changes in existing CSS we prefered to write a new CSS file and register in the application.

The approch is very simple we need to follow below steps.

1. Write a new css file, and add your code there.

2. Save your file under custom folder in Web Server (swse/public/enu/files/custom/NewCss.css)

3. Make an entry for your new css in Theme.js file located in (swse/public/enu/23030/script/siebel/custom/Theme.js)

4. Under Administration - Application ,Mainfest File make an entry for Theme.js if its not there.

clear cache and you are done, changes made in new css will be reflected without changing vanila siebel files.

you need to add the below lines in theme.js to register custom css with the vanila themes.

SiebelApp.ThemeManager.addResource(

"GRAY_TAB",

{

css : {

"sce-theme" : "files/custom/NewCSS.css" // Location of CSS file which needs to be added as part of existing theme

}

);

SiebelApp.ThemeManager.addResource(

"TANGERINE_TAB",

{

css : {

"sce-theme" : "files/custom/NewCSS.css" // Location of CSS file which needs to be added as part of existing theme

}

);

SiebelApp.ThemeManager.addResource(

"GRAY_ACCORDION",

{

css : {

"sce-theme" : "files/custom/NewCSS.css" // Location of CSS file which needs to be added as part of existing theme

}

);

SiebelApp.ThemeManager.addResource(

"TANGERINE_ACCORDION",

{

css : {

"sce-theme" : "files/custom/NewCSS.css" // Location of CSS file which needs to be added as part of existing theme

}

I will post details of how to customise the UI in my upcoming post..till then happy reading...:-)