Wednesday, 14 January 2015

Siebel Open UI: Right Click Menu in Applets

If you have been using Open UI for a while, you can list out many differences you observe from HI client and Open UI client. One difference is if you right click on a list applet, it does not open the menu as it did in HI client. If you are looking to make this work similar to HI client, this post is for you.

Below is the PM code to open the applet menu on right click on Applet.
---------------------------------------------------------------------------------------------
if( typeof( SiebelAppFacade.openmenupm ) === "undefined" ){
    SiebelJS.Namespace( "SiebelAppFacade.openmenupm" );
    define("siebel/custom/openmenupm", [], function () {
        SiebelAppFacade.openmenupm = ( function(){
var consts  = SiebelJS.Dependency( "SiebelApp.Constants" ); 
            function openmenupm( proxy ){
                SiebelAppFacade.openmenupm.superclass.constructor.call( this, proxy );
            }
            SiebelJS.Extend( openmenupm, SiebelAppFacade.ListPresentationModel );
            openmenupm.prototype.Init = function(){
                SiebelAppFacade.openmenupm.superclass.Init.call( this );
this.AddMethod( "ShowSelection",  SelectionChange, { sequence : false, scope : this } );

            };

function SelectionChange(){
var FullId = this.Get("GetId"); // get applet Id

$(".ui-jqgrid-btable").mousedown(function(event){
if(event.which == 3) //this is the right click event on table body
{

$("#s_at_m_" + FullId).click(); // simulate click on the menu object
return false;
}
});
$(function () {
 $(".ui-jqgrid-btable").bind("contextmenu",function(e){
e.preventDefault(); // prevent the right click browser menu to open like view source, inspect element
});
 });
};
            return openmenupm;
        } ());
        
return "SiebelAppFacade.openmenupm";
    });

}
------------------------------------------------------------------------------------------------------------
This code is working fine but please test this thoroughly if you are trying to use it in your application. 

The only issue is this PM opens the menu of the Applet as if the user clicked on the Menu button. The only difference is that the menu opens near the menu button and not at the location of mouse click. This can be taken care by setting the menu object's top and left coordinates like below. You can try and see if the code similar to below can be used to set the coordinates. 
---------------------------------------------------------------------------------------------
var y = event.clientY; // get current click Y coordinate
var x = event.clientX; // get current click X coordinate
$("#s_at_m_" + FullId).click(); // open Menu
var off = $("#s_at_m_" + FullId).offset().top; // get the height of menu button
y = y - off; // calculate the Y of the menu click with respect to Menu button
$(".siebui-appletmenu").css("position","absolute");
$(".siebui-appletmenu").css("top",y);
$("siebui-appletmenu").css("left",x); // set the coordinates
return false; // this is a psuedo code and it works for y coordinate, x coordinate is not working.. give it a try and try opening the menu at the click location
---------------------------------------------------------------------------------------------
Well this is not full functional code, but give it a try to open the menu at the click coordinates. 

So, we can make the Applet Menu to open on right click of the Applet. If you have a requirement to make the applet work similar to HI mode, this code will take care of it. 

Hope this helps!!

Saturday, 3 January 2015

Upgrading to Open UI

Are you planning to upgrade to Siebel Open UI!! This post might help you!!

I am going to discuss about few product issues observed in Open UI. 

Behaviour and Performance: Do not expect Open UI to work the same way as ActiveX application. Open UI and ActiveX applications are based on different technologies. Open UI runs on JavaScript plug-ins and ActiveX application uses ActiveX objects which are proprietary IE plug-ins. Though Open UI is built to provide the same functionality as earlier, it might behave differently. Open UI is comparatively slow than ActiveX client. This is because every UI element needs a JavaScript file loading to function and render in UI. 

Open UI provides you the ability to modify any UI object and functionality. If you are well versed in CSS, JavaScript and JQuery you can fix most of the UI product issues. But remember to test all your changes rigorously.

Below are some product issues.

1. Blank screen on login - If you see a blank screen on login for the first time, replace the srf with a new full compile file. If you are seeing this issue even after the full compile, check your browser console. You might observe an error related to customizations to JS files. Note that latest patch set on 8.1.1.11 is not working in IE8. You will see a blank screen in this case.

2. MVG applets are blank - If you see this issue, sett the Open UI object manager component parameter AppletSelectStyle to Applet Select

3. Set Profile attribute in JS or Browser scripts - Set Profile Attribute is not allowed in JS files or Browser scripts as a fix to security defect. To enable this, set the Open UI object manager parameter EditProfileAttr to TRUE. If you are using HI client, then also you need to set this parameter for browser scripts to work. This is applicable to versions 8.1.1.9 and above.

4. Control Labels wrapped to next line - If you are using long labels in UI, they will get wrapped to new line. To prevent this, 

In theme-base.css modify the below line from pre-wrap to no-wrap
-------------------------
div.mceGridLabel {white-space: no-wrap;}

5. Side by Side applets render beyond viewable area - In some views, for e.g., Views with 50-50,25-75 templates, side by side applets are rendering beyond the viewable area. User has to scroll to right to view the applets. 
The issue is resolved by modification to the web template parameter: "table-layout: fixed" in the view SWT file.

6. SI mode applets do not render in Open UI - In home page you will see the error "why can't i see this applet? open ui cannot display this type of applet contact system administrator" in salutation applet. This is because it is a SI mode applet and they do not work in Open UI. You need to recreate or modify the applets to HI mode. 

7. HTML captions does not work as earlier - In some cases, HTML tags in controls do not work as expected. You can move the HTML attributes to a custom PR file to render as expected. Test all the objects that had html embedded.

8. List Applet column headers behave differently - Sometimes the list applet column headers are aligned differently (right or left) compared to ActiveX client. This may cause another issue for which we have a fix to move the label to align left.

You can make the column alignment uniform across the application by making below change.

Add "text-align:left;" to \23030\SCRIPTS\3rdParty\jqGrid\current\css\ui.jqgrid.css file under the block ".ui-jqgrid .ui-jqgrid-htable th div", which updated all list applets header to left.

If you are trying to resize the column width by dragging the column header, drag it only horizontally, if you move your mouse down to the table, the control will get lost. It is a minor user issue but users do complain about this sometimes.

9. Import or Export XML files - In open UI, writing an XML file to a location, importing or exporting workflow XMLs etc will work only with temp folder. To make this work for other locations, use below cfg parameter. Provide a list of locations with semi colon seperated list. If you face the error with code SBL-EAI-50228 anywhere, this might be the solution for the issue.

[EAIFileTransportConfigSubsys]
EAIFileTransportFolders = D:\TEST;D:\FS

For server, Navigate to Administration - Server Configuration > Enterprises > Parameters > set "EAI File Transport Folder List" (alias EAIFileTransportFolders), i.e.:

    EAI File Transport Folder List = D:\TEST;D:\FS

10. Application unresponsive - In Open UI, if you are doing an action that takes more than 30 seconds to complete, after 30 seconds you will get the cursor back but the application will not respond to your action. If you feel it is ok to have performance of more than 30 seconds (30000 milliseconds), modify the loadindicator.js file. 

In loadindicator.js, note that 30000 milliseconds (30 seconds) is hardcoded: you can increase this value

    var that = this;
    if( this.m_gbusy > 1 && config.timeOut ){
        clearTimeout(this.timeoutid);
        this.timeoutid = setTimeout( function(){
              that.timeout = true;
              that.Free();
            }, 30000);
        return this;

    }

I will keep adding more items to this list. 

Tuesday, 4 November 2014

Siebel Open UI : Profile Attributes vs Browser Cookies

Profile Attribute Security

If you have used Siebel profile attributes, you know that these are name-value pairs used to store any information including user profile and retrieved any time during the application session. If the session is closed, the profile attributes will get nullified. This is custom functionality in HI client. 

In earlier versions like 8.1.1.3 or before, we can set profile attributes by entering code like the below line in browser address bar. 

Javascript: theApplication().setprofileAttr("ABC","ABC");

This has been disabled to fix security issues. Now that Oracle has identified security vulnerabilities in the browser scripting, in Open UI, they have disabled setting profile attributes. But for users who are OK with security constraints, the profile attribute setting from browser scripts are enable after setting server parameter EditProfileAttr = TRUE. Now, the security reasons for disabling the profile attribute setting are unknown, but if it is a consideration for you, we have another option in Open UI. 

Browser Cookies

We might have heard of this term many times, but a few really know about these. Browser cookies are name value pairs of data that a browser saves from the sites the user visit. Follow this link to know more about cookies.

Now, let us observe the similarities between Profile attributes and cookies. 

1. Scope: Both are name value pairs, profile attributes are used almost everywhere in application like browser scripts, server scripts and business services or workflows. You do not need a browser session for profile attributes to work. But, cookies need a browser session. They work only for javascripted objects like PM, PR or postload.js or preload.js and so on. 

2. Security: Cookies are vulnerable to attacks from hackers or people in same network who are trying to steal information. But, they are secure if you are using them to write non-sensitive information. If you are writing a view name in cookie, it is fine but do not consider saving phone number, credit card information etc in cookies. There are ways to create secure cookies. Profile attributes have some security issues when used in browser script.

3. Life time: Profile attributes get nullified after session is closed. Cookies on the other hand has a life time. We can set the end date of a cookie to a future date. But, each browser stores cookies in a separate location. There are ways to share cookies across browsers, but this is not in the scope of this post. If you clear your browser cookies, the cookies get deleted even when you have a session open. 

Overall, for a Siebel developer, Profile attributes is the preferable option. But web developers will look to use cookies as much as they can. Siebel is in a phase of moving to a web standard application with Open UI and cookies are going to play their role in future. It would be interesting to see how useful cookies are going to be when used in Open UI.

Sunday, 2 November 2014

Siebel Open UI Vertical Scrollbar Continued..

Here is the final version of the PR to move the List Applet horizontal play bar to vertical scrollbar. The PR is tested for basic functionalities like query, resize, save record etc. I have fixed another issue where the list applet header getting aligned with list columns in the script.


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

    SiebelJS.Namespace( "SiebelAppFacade.vscrollpr" );

    //Module with its dependencies


    define("siebel/custom/vscrollpr", ["siebel/jqgridrenderer"], function () {
        SiebelAppFacade.vscrollpr = ( function(){
            function vscrollpr( pm ){
                SiebelAppFacade.vscrollpr.superclass.constructor.call( this, pm );    
            }
            SiebelJS.Extend( vscrollpr, SiebelAppFacade.JQGridRenderer );
   vscrollpr.prototype.Init = function () {
            SiebelAppFacade.vscrollpr.superclass.Init.call(this);    
            };
   vscrollpr.prototype.ShowUI = function(){
                SiebelAppFacade.vscrollpr.superclass.ShowUI.call( this );
     var currbwidth = $(".ui-jqgrid-bdiv").width(); //get current body width
     var btabwidth = currbwidth - 60; // provide 60px space for scroll bar
var currhwidth = $(".ui-state-default.ui-jqgrid-hdiv").width(); // get current header width
var htabwidth = currhwidth - 60; // provide 60px space for scroll bar
$(".ui-state-default.ui-jqgrid-hdiv").css("width",htabwidth); // set header width
$(".ui-state-default.ui-jqgrid-hdiv").css("float","left"); // float it to left
     $(".ui-jqgrid-bdiv").css("width",btabwidth); // set body width
     $(".ui-jqgrid-bdiv").css("float","left");   // float it to left
     var html = $(".ui-pager-control").html(); // get the play bar html
     $('.ui-pager-control').appendTo('.ui-jqgrid-view'); // remove the playbar and append it to grid 
     $(".ui-pager-control").css("float","left"); // float it to left
     $(".ui-pager-control").css("width","60"); // set playbar width to 60 px;
     $(".ui-pager-control").css("-ms-transform","rotate(90deg)"); // rotate 90 degrees in IE
     $(".ui-pager-control").css("-webkit-transform","rotate(90deg)"); // rotate 90 deg in chrome
     $("span.ui-separator").parent().css("width","45"); // set separator width to 45px. this should be calculated based on height of applet
            };       
  vscrollpr.prototype.resize = function( )
          { // recalculate the widths after resize
 SiebelAppFacade.vscrollpr.superclass.resize.call( this );  
var currbwidth = $(".ui-jqgrid-bdiv").width();
     var btabwidth = currbwidth - 60;
var currhwidth = $(".ui-state-default.ui-jqgrid-hdiv").width();
var htabwidth = currhwidth - 60;
$(".ui-state-default.ui-jqgrid-hdiv").css("width",htabwidth);
$(".ui-state-default.ui-jqgrid-hdiv").css("float","left");
     $(".ui-jqgrid-bdiv").css("width",btabwidth);
     $(".ui-jqgrid-bdiv").css("float","left");   
     var html = $(".ui-pager-control").html();
     $('.ui-pager-control').appendTo('.ui-jqgrid-view');     
     $(".ui-pager-control").css("float","left");
     $(".ui-pager-control").css("width","60");
     $(".ui-pager-control").css("-ms-transform","rotate(90deg)");
     $(".ui-pager-control").css("-webkit-transform","rotate(90deg)");
     $("span.ui-separator").parent().css("width","45");
 }
return vscrollpr;
    } ());
        return "SiebelAppFacade.vscrollpr";
    });
}



Note: The code needs full testing before implementing. Also, I have hardcoded the value in below line. You need to do the calculation in this case for list applets with different heights.
$("span.ui-separator").parent().css("width","45");

Disclaimer: This is not production ready code. Do not use this code without proper testing. The JQGrid model provides this scroll bars by default as horizontal playbars. So, this is vanilla and it is not a good idea to modify it. 

Thursday, 30 October 2014

Siebel Open UI Vertical Scrollbar

Siebel Open UI vertical scrollbar in List Applets

In Open UI, the traditional vertical scroll bar is replaced by horizontal play bar buttons. These buttons perform the same functionality as that of vertical scroll bar in HI applications. But a lot of people are not liking this feature as compare to HI mode. This might confuse the users with horizontal scroll bar which is used to see columns to the right of the table. 




Oracle has used JQGrid model to render the OUI list applets. The horizontal play bar is a feature of JQGrid plugin. This makes it different from HI mode applets in many ways. I have discussed the differences and comparisons of these two type of applets in another post. It is not technically correct to have JavaScript scroll bar.

Here , I have tried to make this horizontal play bar align vertically. For this purpose I have written custom PR to render the existing play bar to rotate vertically and place it next to the list.

Here is how it looks. 


The PR contains the following code in ShowUI method.

     var currwidth = $(".ui-jqgrid-bdiv").width(); // get current width of list table
var tabwidth = currwidth - 40; // 
$(".ui-jqgrid-bdiv").css("width",tabwidth); // leave 40 pixel space for scroll bar
$(".ui-jqgrid-bdiv").css("float","left"); // set the table to left
var html = $(".ui-pager-control").html(); // get the horizontal play bar html - this is not required
$('.ui-pager-control').appendTo('.ui-jqgrid-view'); // remove the play bar and move it next to list
$(".ui-pager-control").css("float","left"); // make it float to left
$(".ui-pager-control").css("width","40"); // place it in 40 pixel room we created
$(".ui-pager-control").css("-ms-transform","rotate(90deg)"); // rotate the horiontal scroll bar by 90 deg. to align vertically..for IE browser
$(".ui-pager-control").css("-webkit-transform","rotate(90deg)"); // same as above.. for chrome,opere,safari browsers

$("span.ui-separator").parent().css("width","45"); // set the separator width to fit the list table height

This actually is just moving the existing play bar to right of the list and rotating the play bar. The PR file can be viewed here

Note: This is just a sample code and only written in Show UI method. The same should be taken care in other events like browser restore/resize. The same code should be replicated wherever necessary.

Check out the full code at below link. This is for educational purpose only.
Part-2

Also check this out for creating a scrollbar that looks and works similar to a browser scrollbar. 

Open UI and HI list applets vertical scrolling

If you had chance to work on Open UI, you would have observed a lot of difference in UI level objects like MVG, Query Assistant buttons, list applets etc when compared to HI mode. Well, since the base technology in rendering the UI is changed, the changes are required for technical reasons. One such feature is vertical scroll bar being replaced by horizontal play bar. Let us see why this change is probably made. 

Consider vertical scrolling using normal javascript for a table. We can have a vertical scroll bar in a list applet like this. But for the js scroll to work, the table html should have all the table rows (tr) and columns (td) tags and values which should show when we scroll.

So if I have 100 records with 10 fields each, I should have 1100 html tags (100 rows, 1000 columns). This will make my HTML very big. But the actual problem is, we need to get the field values of 100 records and place them into 1000 columns. You know, 1000 GetFieldValue() functions need to get executed. Consider the joins, MVGs and links, the performance will kill your browser. This rules out the JavaScript scroll bar.

Actually, this is the reason why even in HI mode, we have GotoNextSet, GotoPreviousSet, GotoNext, GotoPrevious methods in vertical scroll bar. These are the same methods we have in Open UI list applets also. So, we query a set of records (generally 10) and place them in UI. If user wants to get more records, user has to click on scroll buttons. 

But the visual difference we observe is the slider is missing in Open UI.




Open UI used JQGrid plugin which is a JQuery based plug-in which has built in methods to access/set/modify the Grid/table elements in the HTML. The horizontal play bar is a feature of JQGrid. So, Oracle used it in Open UI. JQGrid is currently used by many web based technologies. 

The horizontal play bar can be aligned vertically and made to look like vertical scroll bar except without slider. I am going to post the script required to make this change. If we can add a slider to this and make it work, then we can have the same vertical scroll bar as in HI mode. 

Please leave a comment about your thoughts on this.

Thursday, 23 October 2014

Siebel High Interactivity Framework vs Open UI Framework

Siebel High Interactivity Framework

If you are browsing YouTube in any browser, it needs an add-on or plug-in to run the video. The browser does not have capability to play the video all by itself (although, latest HTLM5 enabled browsers have this capacity). It requires an add-on or plug-in. Similarly, for a Siebel application UI to work, it requires additional add-ons.

Before Open UI framework is introduced, Siebel High Interactivity application can only be opened in IE browser. The Siebel application is rendered using Internet Explorer's ActiveX Controls. The application requires the ActiveX controls for proper rendering and functionality of UI.
ActiveX objects are programs (add-ons) that supplements and enhance the browser experience. The ActiveX objects for Siebel are included as part of the installation and are placed in SWSE/public/enu/23030/applets location. (This location varies based on version; 23030 is for 8.1.1.11) Below is the location of ActiveX objects in local web client.

 When you access the application, the browser will prompt for the download of ActiveX and if user allows the prompt, it downloads ActiveX from your SWSE folder location. These ActiveX controls are installed in your IE. This is how Siebel High Interactivity Framework works. This can be viewed from Internet Settings -> Manage Add-ons


Users can not open HI application in any other browsers. Moreover, for ActiveX controls to download and work, user has to change internet settings which have a risk of decreasing the browser security. ActiveX objects are more prone to security risk as they are installed in your local computer and can access your computer.

Open UI framework:

Open UI is a framework for customising User Interface of Siebel. This uses Javascript, JQuery, CSS etc to render the Siebel application and function as per the requirements. Just like ActiveX, JQuery is a JavaScript based plug-in. There are other extended plug-ins to JQuery like JQuery-UI which are used in Siebel Open UI framework.

Why Open UI?

There are many reasons why Open UI framework is built when there is an already working, tested High Interactivity framework available.
Unlike before, the number of browsers and operating systems has increased beyond IE and Microsoft windows. Forcing the users to keep using IE and using only windows environment is not a good idea. It is not easy to recreate add-ons for other browsers and test them. Windows 8 does not support ActiveX anymore. Check this link. This seems to be the death blow for HI framework.

What Open UI offers?

Here are the few advantages in Open UI compared to HI ActiveX framework.
1.   Support to all browsers. Earlier Siebel application can only be opened in IE browser. This is due to the dependency on ActiveX controls. Open UI framework is based on Javascript, JQuery, CSS which is supported in all browsers.   
2. Siebel Application in Mobile. Access Siebel application from any device.
3.   Custom user experience. Provides capabilities to UI customisations which HI framework does not provide. 
4. Working offline.