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

Configuring Confirm Popup on New Record

Hello All,

I this post let us experiment with a very common functionality in Siebel.
Confirm Popup on deleting a record.

lets try to make something for New record also, wherein a prompt will appear confirming for new record creation.

to achieve this we need to identify the method invoked ,

• we can use notification handler SWE_PROP_BC_NOTI_NEW_RECORD for the purpose

Display a prompt and based on user selection continue or cancel the operation


pm.AttachNotificationHandler(consts.get("SWE_PROP_BC_NOTI_NEW_RECORD"), function(){
               var retVal = confirm("Do you want to create a new record ?");
               if( retVal == true ) {
                  //document.write ("User wants to continue!");
                  return true;
               } else {
                pm.ExecuteMethod("InvokeMethod","UndoRecord");
               
               }
})

sample code for reference,

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

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