Custom Login Page in Siebel Open UI

Hello All,


In this Post i want to demonstrate how we can change login page in Siebel Application.
Login page is specified for every application and can be seen in Object Explore --> Application


Below are the high level Steps

1. Identify the Login Web Page from Application






2. Open The Web Page in Object Explore and find the Web Page, clone the existing page and Provide a new Web Template





3. Clone the Existing Web Template, in my case i named it Login Custom, change the definition of web template to refer new custom CSS and JS files
<link href="files/login_custom.css" rel="stylesheet"> --- line 8

<div od-type="include-script" file="login_custom.js"/> --- line 16





4. Now we have New Web Page and Web Template, replace Web Page for the application and test your changes






Vanilla Login Page:


Modified Login Page:




link to CSS file :

https://drive.google.com/open?id=1IwMdKAgWwFqQO7OC7O8hHtELwPe2iu0J

Bookmarks in Siebel : Use of Browser Web Storage

Hello All,

Recently i tried to mimic one very important feature of browser, the bookmarks.
Bookmarks store our saved web pages/ links to important websites which we want to visit again or are frequently accessed by us.

So i tried to built something in siebel UI wherein i can store some important websites and access them from siebel only.

Web storage which is property of browser, is the key to store this data.




Below is the sample solution ,                               


Links Applet on Home Page



Option to Add new link

Working Solution 

• Need a Container to capture the website information and store it in web storage 

var a = '<div id="container"><div id="header"><h2>My Favorite Links</h2><small>save your best links</small></div><div id="content"><ul id="favorite-links"><li><a href="http://www.siebelfoundations.com">Siebel Foundations</a><button class="removebtn">x</button></li><li><a href="http://www.google.com">Google</a><button class="removebtn">x</button></li><li><a href="https://support.oracle.com/">Oracle Support</a><button class="removebtn">x</button></li></ul><div id="new-link-button"><button>Add New Link</button></div></div><div id="add-link-form" style="display: block;"><label>Title</label><br><input id="title" placeholder="Title here"><br><label>URL</label><br><input id="url" value="http://"><br><button id="add">Save Link</button></div></div>'

$('#_swecontent').prepend(a);  // append it to page

• Since this information is stored in web storage, values persists even after logout of application and no siebel files, Database is required

localStorage.setItem('vk-links', $ul.html());   // use of web storage       

Sample code for this can be found on , https://codepen.io/4gray/pen/glGun

                        
Limitation 

• If we clear browser cache the values stored in web stores vanishes.

Benefits

• No Database, Files, Preference file is accessed 

• Lightweight and customizable to include links to internal screens and views (haven't yet explored this but feasible) --Tried to extend this functionality for Siebel View Navigation and it worked see article 

Timeline in Siebel : Siebel Open UI Enhancement

Hello All,

With OpenUI siebel UI/UX has unlimited room for innovations and development.

So i tried to make some changes in UI to get the feel of modern HTML5 based applications, a Timeline is what i tried to convert an applet into.

The Idea is pretty simple, for the business entities that displays data relative to time, show that in a timeline view to make the UI better, Informative and easy to understand for end user.

below is what i achieved, there can be a lot of improvement/modification in this which you can try

• A Timeline view of Applet

The Solution ,

• Need to Identify the business entity , i am using address for illustration, others can be Audit Trail, Activity Stages, Opportunity / SR Life Cycle, Sales/ Service History, Interaction History.  

• Identify the timeline, there are couple of Options available on the net i am using one form w3schools https://www.w3schools.com/howto/howto_css_timeline.asp

• Embed the HTML and CSS in your PR file, you can either write inline CSS or create a separate CSS file

Note ,

the main work here is how to pass Siebel data to HTML i.e. how to pass list applet data to HTML container.

for this we can use, GetRecordSet

var pm = SiebelApp.S_App.GetActiveView().GetActiveApplet().GetPModel(); // for Application level PR var pm = this.GetPM(); // for Applet level PR b = pm.Get("GetRecordSet"); // for getting the record in Array b

And data can be extracted from array b , in below format

  b[i] [j]

i refers to the index of record
and
j refers to the column

e.g.

 var a = b[0]['City'];   // city for first record of applet
 var c = b[0]['Street Address'];  // Address for first record of applet

Working Code,

https://drive.google.com/open?id=1GkUbBiGw_WG0Z_uLFCfpfXwLZeVLSNaY

Preventing Unresponsive Sessions for Long Queries

Hello All,

In siebel Open UI there is Issue which most of us might have faced.

If we navigate to a view or Run a query and it takes more the 30 seconds,

• The Busy cursor on the screen disappears 
• The page becomes unresponsive as query is yet running in background 
• and most likely we end up clicking randomly and session becomes unresponsive

so, to overcome this scenario lets try to break it into parts and find its solution

• When a query is Fired , initiate a function to show some message that notifies Query has stated execution
• When Query finished, notify that query has executed
• In the Meanwhile from Executing Query to Fetching Results, show some message to user or Block the screen to prevent user interaction

The Solution :

• Identify Query is Executed , 

$('.siebui-icon-executequery').click(function(){ // do something her to prevent user clicking on screen })

• Notify Application that Query has finished execution ,

pm.AttachNotificationHandler(consts.get("SWE_PROP_BC_NOTI_END_QUERY"), function(){
  //alert("after query has completed fetching result");
})

• Block the UI till Query fetches results

$('.siebui-icon-executequery').click(function(){   
var text = "Wait.. Fetching Results ";
    $("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({
        "position": "fixed",
        "top": 0,
        "left": 0,
        "width": "100%",
        "height": "100%",
        "background-color": "rgba(0,0,0,.5)",
        "z-index": 10000,
        "vertical-align": "middle",
        "text-align": "center",
        "color": "#fff",
        "font-size": "30px",
        "font-weight": "bold",
        "cursor": "wait"
    }).appendTo("body");})


sample working example looks like,

Benefits:

• Overlay will be there till query completes execution 
• Prevents unnecessary session unresponsiveness due to random click 
• No 3rd Party jQuery Pluign , uses siebel PM methods

Sticky Notes in Siebel - Siebel Open UI Enhancement

Hello All,

The Title of the post may seem a bit absurd, as what can be the connection of Sticky Notes with Siebel.

But this post is inspired by yellow colored sticky notes which we generally use to jot down some tasks or write important memos.

So, the idea is to make something in siebel, that can be used as a writing pad where we can write some details like Account Name, Password, Username, Frequently used Entities, Mobile number etc.

My Approach,

I wanted to make this SRF and Database Independent , so i decided to juggle with SPF file.
SPF or user preference file in siebel is system generated file that stores details like

• Last Navigated Records, which we call Recent Records
• View and Tab Layout
• Fields Layout
• Theme Preferences etc.

Now, we need a way to read and write to SPF file and Expose it to logged in user for editing.

Below line of code does the purpose of updating SPF file

pm.OnControlEvent(consts.get("PHYEVENT_INVOKE_CONTROL"),pm.Get(consts.get("SWE_MTHD_UPDATE_USER_PREF")), inputPS);


Detailed Code :

var inputPS = CCFMiscUtil_CreatePropSet();   //get last value of User Prefrence  var value = pm.Get ("User-Notes");  //set User Prefrence Name inputPS.SetProperty("Key", "User-Notes");   //set User Prefrence Value inputPS.SetProperty("User-Notes", Notes);   pm.SetProperty("User-Notes", Notes);   //set our custom User Prefrence pm.OnControlEvent(consts.get("PHYEVENT_INVOKE_CONTROL"), pm.Get(consts.get("SWE_MTHD_UPDATE_USER_PREF")), inputPS);

above code initializes a Property set User-Notes   in which we capture the Notes and save in SPF file.

The final part is to create a Canvas to resemble a Sticky Notes , i have tried and achieved below 

Benefits :

• Values Stays even after logout
• SRF and Database Independent 
• Lightweight and concise 
• No 3rd Party jQuery library required

sample code for reference, 

https://drive.google.com/file/d/11G2ksqH6n5XK75ZQD3Es8DpixOuybv7_/view?usp=sharing

Bringing Back Scrolling in list Applet

Hello All,

In this post i will share one of the enhancement or probably i should call it fix for enabling scrolling which was a very useful feature in Siebel HI.

In Open UI we have now navigation controls in bottom of applet In IP 13 to IP 16, we have below controls

• Next Record
• Previous Record 
• Next Record Set
• Previous Record Set

In IP17 onwards there is change in navigation controls, now there is no option of Next and Previous record in list applet, we now have

• Next Record Set
• Previous Record Set
• Last Record Set
• First Record Set

Now with the below code we can use the record navigation from Mouse scrolling , 

• Scroll down to go to Next record Set 
• Scroll up to go to Previous Record Set.

Lets try to understand the things we need to get the things Working 

• Bind Mouse Scroll event , to let Siebel know that it has to do something on mouse scrolling

$(appletPlaceHolder).bind('mousewheel', function(e){}

• Check for Up/Down Scrolling, to perform forward or backward navigation (this code is standard HTML 5 code )

 if(e.originalEvent.wheelDelta /120 > 0) {

        console.log('scrolling up !');

else 

        console.log('scrolling Down!');}

• Call method for Navigation , method called for fetching next records is GotoNextSet and for moving to previous record is GotoPreviousSet. We need to call this method based on Scrolling directions

if(pm.ExecuteMethod("CanInvokeMethod", "GotoNextSet"))

{

pm.ExecuteMethod("InvokeMethod","GotoNextSet",null,false);

}

Note : We could have directly written  pm.ExecuteMethod("InvokeMethod","GotoNextSet",null,false) , but i have used if statement and check for CanInvokeMethod to prevent error which will appear in case of scrolling even if we have reached last record set or First record set

Final Code

$(appletPlaceHolder).bind('mousewheel', function(e){         if(e.originalEvent.wheelDelta /120 > 0) {             console.log('scrolling up !');             e.preventDefault(); // to prevent default browser scrolling //to prevent unnecessary pop ups using canInvoke first  if(pm.ExecuteMethod("CanInvokeMethod", "GotoNextSet")){ pm.ExecuteMethod("InvokeMethod","GotoNextSet",null,false); }  }         else        {             console.log('scrolling down !');             e.preventDefault(); // to prevent default browser scrolling                  //to prevent unnecessary pop ups using canInvoke first  if(pm.ExecuteMethod("CanInvokeMethod", "GotoPreviousSet")){ pm.ExecuteMethod("InvokeMethod","GotoPreviousSet",null,false);}         }     });

Downloadable link to PR file https://drive.google.com/open?id=15LPuMOgDNBvQju-S1KoX5ePi6yJTBPAH

try it, your comment and suggestions are always welcome

Bringing back Right Click in Siebel Open UI

Hello All,

I should have written this Post 5 Years back when Open UI was launched and this functionality was depreciated.
saying its better late then never, writing this post to show how to bring back right click functionality in siebel (this was a common us in HI, but with open UI this was removed)

There are several post's for the same and have explained very clearly, i have added some important points with the feature,

1. Write a PR file.
Since we are tracking the right click event we need to have the code written in BindEvents function of PR file.

Form_Applet_RightClick.prototype.BindEvents = function() { SiebelAppFacade.Form_Applet_RightClick.superclass.BindEvents.call( this );
var appletFullId  = this.GetPM().Get("GetFullId");
       var appletPlaceHolder = $("#s_" + appletFullId + "_div"); var selBtnSiebMenu = "#s_at_m_" + appletFullId.match(/\d+$/); // takes the trailing digit from the FullId (e.g. "5")
       var btnSiebMenu = $(selBtnSiebMenu); // selector for the applet menu button  
       $(appletPlaceHolder).mousedown(function(e) {
         if (e.which == 3 ) {
// alert(selBtnSiebMenu);
             $(appletPlaceHolder).bind("contextmenu", function(e) {
         e.preventDefault(); // prevent the browser context menu to appear
              });

   $(btnSiebMenu).trigger("click"); // simulate a user click        
       $(selBtnSiebMenu + "-menu").animate ({ top: e.pageY - 150 + 'px',left: e.pageX + 'px' }, 0);
                                    return false; } // end if
          });   

};

2. Need to Identify Default Right Click event 

$(appletPlaceHolder).mousedown(function(e) {
                            if (e.which == 3 ) .....

2. Need to disable the default right click menu

            $(appletPlaceHolder).bind("contextmenu", function(e) {
                            e.preventDefault(); // prevent the browser context menu to appear
                             });

3. Need to Place the Opened Menu next to Cursor.

$(selBtnSiebMenu + "-menu").animate({ top: e.pageY - 150 + 'px',left: e.pageX + 'px' }, 0);

4. Need to Bind it through out the Application then Single applet

for this need to make entry in Manifest Administration with Name as DEFAULT FORM APPLET and Usage Type Physical Renderer
See screen shot below,

Working Example looks like ,

Link to PR File ,

https://drive.google.com/open?id=13yhMfV3q17qpLABNEbiyTeBm-2YVVbqF

This can be extended for List Applets too.. do give it a try

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.

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

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

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

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