Modifying Labels in List Applets: Applying Color Coding

Hello All,

Recently i got a query from one of my friend, where in he wanted to have header labels in list applets to be in different color.

i.e. Suppose in Contact List Applet , first 5 fields that have Personal Information appear with red Label,
Next 5 with Address Information appear in Green label and last 5 with Random Information appear in blue label.

Seems pretty simple isn't it.

Well actually it is a bit tricky, why? you might ask and will only know the catch when you try to achieve this.

The issue is with the Id's(Dynamic Id) siebel generated for the labels , one time id will be say jqgr_2_1_first_name and at the next login it will be jqgr_2_4_first_name 

So any hard coded Id's will not work :-( , Now we need to traverse the applet to always fetch current Id's for the label and then apply any CSS changes,

below snippet of code needs to be used.

var pm = this.GetPM();var appletFullId = this.GetPM().Get("GetFullId");var appletPlaceHolder = $("#s_" + appletFullId + "_div"); // example: "s_S_A5"


$(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[1].childNodes[1].id; // label of first element in list applet

$(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[2].childNodes[1].id; // label of second element in list applet

• Here we are first finding the applet Id (appletPlaceHolder )
• then we are searching for the labels in Label row (ui-jqgrid-labels') ,
• then finding the Id for the label sequentially, .childNodes[1].childNodes[1].id; for 1st and .childNodes[2].childNodes[1].id; for 2nd

the last step is to apply css of formatting 

this can be done via 2 ways , 

1. Inline CSS 

var Label1 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[1].childNodes[1].id; /$("#" + Label1).css({'color':'red'});

2. Add Class Method (Need a custom css or need to add teh new style in existing css

var Label1 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[1].childNodes[1].id;

$("#" + Label1).addClass('label-color-red');

Link to PR file,

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

or you can use below PR file, 

if (typeof (SiebelAppFacade.ModifyControl) === "undefined") { SiebelJS.Namespace("SiebelAppFacade.ModifyControl"); define("siebel/custom/ModifyControl", ["siebel/jqgridrenderer"], function () { SiebelAppFacade.ModifyControl = (function () { function ModifyControl(pm) { SiebelAppFacade.ModifyControl.superclass.constructor.apply(this, arguments); } SiebelJS.Extend(ModifyControl, SiebelAppFacade.JQGridRenderer); ModifyControl.prototype.ShowUI = function () { var pm = this.GetPM(); SiebelAppFacade.ModifyControl.superclass.BindEvents.apply(this, arguments); } ModifyControl.prototype.BindEvents= function () { var pm = this.GetPM(); var placeHolder = "s_" + pm.Get("GetFullId") + "_div"; var appletFullId = this.GetPM().Get("GetFullId"); //var pm = this.GetPM(); var appletPlaceHolder = $("#s_" + appletFullId + "_div"); // example: "s_S_A5"            //     $("#" + placeHolder).find("Complaint Number")       var Label1 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[1].childNodes[1].id;                 $("#" + Label1).addClass('color-control'); var Label2 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[2].childNodes[1].id;                 $("#" + Label2).addClass('color-control'); var Label3 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[3].childNodes[1].id;                 $("#" + Label3).addClass('color-control'); var Label4 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[4].childNodes[1].id;                 $("#" + Label4).addClass('color-control'); var Label5 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[5].childNodes[1].id;                 $("#" + Label5).addClass('color-controlblue'); var Label6 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[6].childNodes[1].id;                 $("#" + Label6).addClass('color-controlblue'); var Label7 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[7].childNodes[1].id;                 $("#" + Label7).addClass('color-controlblue'); var Label8 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[8].childNodes[1].id;                 $("#" + Label8).addClass('color-controlblue'); var Label9 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[9].childNodes[1].id;                 $("#" + Label9).addClass('color-controlgreen'); var Label10 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[10].childNodes[1].id;                 $("#" + Label10).addClass('color-controlgreen'); var Label11 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[11].childNodes[1].id;                 $("#" + Label11).addClass('color-controlgreen'); var Label12 = $(appletPlaceHolder).find('.ui-jqgrid-labels')["0"].childNodes[12].childNodes[1].id;                 $("#" + Label12).addClass('color-controlgreen'); SiebelAppFacade.ModifyControl.superclass.BindEvents.apply(this, arguments); } return ModifyControl; }()); return "SiebelAppFacade.ModifyControl"; }) }

Favourites Windows in Siebel : Siebel Open UI Enhancement

Hello All, 

We have Recent record functionality in Siebel which is quite useful in navigation to recently accessed records.

Keeping the functionality as base and referring my Previous post on bookmarks, i have tried to implement a similar functionality, "My Favorites" 

In this functionality 

• User can Mark a record as Favourite using the Button Add Favourite, You can give you Own Name to the favourites or it will take the Name with Entity + Row Id by Default 

• The Added Favourite will appear in a floating window on the left corner of the screen

• Clicking on the link will navigate the user to the detail of the record

• There is no restriction of View/BO/Visibility i.e. if i am in Service View i can be navigated to any view
• User can remove the Added link by clicking the X icon to keet the list updated 

Features 

• This is based on Pure JavaScript, So lightweight
• No Siebel BC/BO instance required
• Works on 3rd Level View Tabs also i.e works on Parent-Child-Grandchild hierarchy as well
• The List is stored in browser local storage so no Siebel data base is instantiated 
• You can give you Own Name to the favorites or it will take the Name with Entity + Row Id by Default 

Short coming

N/A, As of now :-) 

Key Component of code 

get the exact URl formed when a record is navigated

•  k = window.location.href;   

Appending to list each time Add favourite is clicked

• $('#favorite-links').append('<li><a href="'+k+'">'+finaltext+'</a><button class="removebtn">x</button></li>');

Storing the List to local Storage of browser

• localStorage.setItem('vk-links', $('#favorite-links').html());

Link to File 

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

Related Article

http://www.siebelfoundations.com/2019/03/bookmarks-in-siebel-use-of-browser-web.html

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 

Tree Hierarchy in Siebel Open UI

Hello All,

In this post let us try to show data from a Entity in a Tree structure, to show a 360 Degree view all related entities in one place


Use Case, 

For any Entity Say contact if we need to See its related Opportunities, Account or Orders, we need to first drill down on contact and from 3rd level view bar navigate to particular view to see its details,

This approach can bring in all related entities in one view so avoiding any drill down and additional Navigation 

Solution, 

• The implementation of its solution is very simple, we need to capture full details of current Contact in XML format so we can use any IO based on contact, 
• Get IO Hierarchy using EAI Siebel Adapter Business Service 
• Get XML by converting IO Hierarchy to XML using EAI XML Converter

Now we have XML, we need to display the XML in Expandable Format to mimic a tree structure,

You can have multiple modification in the structure to include Drill downs, color combination etc.

Sample Code, 
https://drive.google.com/open?id=1EIxHVcwKJxz-IGfpzjFIuU52kHlQVUkw

Reports in Siebel Open UI without BI Publisher

Hello All,

in this post let us explore report generation functionality in siebel.
Generally we have BIP integration with siebel for any report generation.

RTF files/Templates are uploaded in siebel and we can genrated reports in the uploaded format.

I tried to achieve something that can generate reports/PDF files without BI Publisher, seems a bit absured but its achieveable.
Though it cannot get all the functionalites of BI Publisher but it servers the purpose for simple reports

The Solution

1. Get the values which we need to display in Report in PR file
2. Generating HTML in Desired format with field values/records from a PR file
3. Call 3rd party plugin to convert the HTML to Canvas and then to pdf

here's the output,

Click on Open Summary it displays a Preview and when i click on Generate Report, PDF for reports gets generated and downloaded

Benefits,

• Although it cannot replace BI Publisher, but can be used for certain reports that are single page and require no/less calculations
• Since no BIP is used, can be set up for some priority reports which are very critical and cannot afford  BIP unavailablility
• No Cost included, so free :-)

Disadvantages

• Since it works on HTML, so complex logics and multi page reports cannot be build
• Need Individual Coding/Setup for each report which will be difficult to maintain
• Generated Reports are not very clear i.e. qualty of pdf generated is not very good
• Dependent on 3rd party,

Open UI Code

3rd Party Jquery required,

• https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.22/pdfmake.min.js
• https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js

Code that generates the PDF

$('.open-report').click(function () {

                html2canvas($('#report123')[0], {

onrendered: function (canvas) {

var data = canvas.toDataURL();

var docDefinition = {

content: [{

image: data,

width: 500

}]

};

pdfMake.createPdf(docDefinition).download("Table.pdf");

}

})

Complete Code, 

https://drive.google.com/open?id=14qCed01MaqnoN9rKJU-AWVQcaHSC5A0e

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

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

Notifications in Siebel Open UI : Part 2

Hello All,

In this article i will show configuration for Facebook like assignment Notification in siebel for Service Request assignment.

Manual notification can be set from Administration Communication --> Message Broadcast screen details about how to set can be viewed in this article http://www.siebelfoundations.com/2017/09/notifications-in-siebel-open-ui.html

Rich Notifications

Detailed Notification 

In this article let's try this to automate this via Workflow Policy. We need to set up a Workflow policy and define action for it.

• Defining Workflow Action 

• Defining Message Broadcast in Policy Action

Here Define the Subject, "This is Testing" in my case 

Message Template, here define the message and Field Substitutions

Also in the bottom applet we can define the Recipient of the call ,it can be set to Position or Employee  

• The Next Step is to define a Workflow Policy and Associate the Action with it

once our workflow policy is defined we need to regenerate triggers and add it to Workflow Monitor Agent.

I will cover the steps to generate trigger in my next post.

Notifications in Siebel Open UI

Hello All,

In this post lets us discuss some change in Siebel Notifications and Message Broadcast in Open UI.

• In Siebel HI, scroll messages appeared in the message bar at bottom of the screen.
• Also, messages can appear in an alert dialog box in the middle of the screen and in the message bar at the bottom of the screen

In Siebel Open UI Notifications and Broadcast Messages are displayed in in notification panes that users access by clicking the Notification icon located at top Right corner, and blinks in different color depending on type of Notification.

It's Much similar to how notifications are displayed in Facebook or Gmail where a highlighted text is displayed above various notification icons.

                                  Sample Facebook Notifications

Notification on Top Right in Siebel 

Notification Summary Detail

These Notification and Messages are Picked from Administration Communication --> Message Broadcast screen. For Custom message(Broadcast Messages) we can explicitly make a record here and can set the visibility of Message to User Specific, Position Specific or Division Specific as shown in below applet and it will appear in Notification Bar.

For Other System Notifications (Report Generation, Call Assignment) an entry is made here in Broadcast Message BC implicitly by Siebel internal processes and is displayed as Notification to user.

I will cover more details of how we can set custom notification on certain events in next article.

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.

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