Responsive UI Demo of Siebel Open UI IP2014

With IP2014 Siebel has adopted responsive UI design which adapts the UI in real time to the screen size and HTML5 capabilities available on the device. Following video is the best Siebel demo we have ever seen so far.

Please watch and Share!!  

Demo showcases :
- Differences between desktop and tablet devices(ipad)
- HTML 5 Compatibility test
- Application menu adapts to screen size (hides context menu on iPad)
- Icons are larger on tablet device for easy navigation.
- Calendar changes the layout for easier navigation in iPad
- Fluid Grid adapts to the resolution of desktop application into a tablet mode and further to mobile resolutions 
- Checkbox adapts to slider using plugin wrapper on iPAD
- MVG shows both shuttle applet and list applet.
- MVG on iPAD shows as pre IP2014 application.
- iPAD enables multi-select checkboxes.
- Scrolling in remains the same in desktop as in IP2013
- Infinite Scrolling is available in iPAD with progress bar!!! No need of IP2013 Solution  

How to get current timestamp in JavaScript?

Following Javascript code returns current date and timestamp of client. This is quite handy for Open UI development, one can call following code from console.log() method to record the invocation sequence which is otherwise very difficult.

function displayTime(str2) {  
    var str = "";
    var currentTime = new Date()
    var hours = currentTime.getHours()
    var minutes = currentTime.getMinutes()
    var seconds = currentTime.getSeconds()
    var milliseconds = currentTime.getMilliseconds()
    if (minutes < 10) {
        minutes = "0" + minutes
    }
    if (seconds < 10) {
        seconds = "0" + seconds
    }
    str += hours + ":" + minutes + ":" + seconds + ":" + milliseconds;
    return str2 + ": " + str;
    }

Siebel Open UI Example:

 console.log("PR Invoked" + displayTime("@"));

Hope it helps. 

How to traverse javascript object?

For in loop is one of my favourite commands of JavaScript and it just one step behind the modest alert() ;) 

It is a very powerful command and helps you to loop through any JavaScript object without knowing what object is all about. You don't need to know the types that exists in the object or number of child objects that object has. You just need have the handle of the object and you can loop through all its properties.

It is quite handy if you cant get your head around Siebel Open UI and you want to know what else is available in that object and how the functions are implemented in an object.

Examples:

MyPM.prototype.Setup = function (propSet) {       
    for(var x in propSet){console.log(x + "" + propSet[x]);
    }
        SiebelAppFacade.MyPM.superclass.Setup.call(this, propSet);
}

In this example I am trying to find what else is passed through the property set by Siebel to the Setup function of Presentation Model. and the following I am trying to all the methods that are available by theApplication() object.

for(var x in theApplication()){
console.log(x + " " + theApplication[x]);
}

For those who don't know, For in loop is just plain old JavaScript and is not some thing the jQuery offers.

Happy Hacking :)

JQuery UI Controls for Siebel Open UI

Have been following Siebel blogs to find out latest innovations in Siebel Open UI? Wonder what else you could do with Open ui and jquery? Voice Recognition and Google Map Integration is not enough want to add more controls but don't know where to start? Well, answers is your local :)

Siebel has packaged all the Jquery UI examples into the client installation directory, all these examples comes with sample Jquery code, they gets copied along with Open UI installation. These codes are not Siebel formated code however can be directly placed into custom PM PR layers with minimum changes. Open UI is utilizes many of these controls thus you find that many of the js and css already initialised.

Example includes HTML5 Animations, Custom controls like sliders, Dialogs and draggable controls as well as JQuery based validations.

I highly recommend to have a look at all the examples before starting with any new design.




Some of my favourites are Dialog boxes with field level validations for email id and password:




Hope it helps. Feel free to share your experience in implementing these controls in Siebel.

Fixing title of Siebel Open UI

It is one of the well known problems of Siebel Open UI. Browser title of Open UI application is not static and is not set by AOM's "ApplicationTitle" parameter.  

There are numerous other problems with it other than being static, like:

1.Title shows "-the end-"  if the application is refreshed by browser refresh button.

Title showing as -the end- in home screen

2. Dynamic title for every view, which does not contains application name.  

Home page is showing Contact Home Title on navigating back.

3. Home Page View does not show the title correctly if user navigates back from any other screen tab.

Activity home screen show Account Home Title

4. Home Page of screen tabs shows first record information. 

Contact Home shows record details.

Solutions: 

1. Update Title property for all the views in application with correct title or a static title. 

This solution requires changing lot of objects in repository and does not fixes issues with home page views.
read more on bookshelf

2. Update the document title using Open UI Postload event. 

Although this will cause title to title to flicker from the original title to a static title, but it is the only solution which is as close as to the HI application title. 

Change you postload.js or create new custom js and add following script to the application. 

 If(typeof (SiebelAppFacade.ChangeTitle) == "undefined") {
Namespace('SiebelAppFacade.ChangeTitle');

(function(){
SiebelApp.EventManager.addListner( "postload", OnPostload, this );
function OnPostload( ){
try{
document.title="Siebel Call Center";
}
catch(error)
{
SiebelJS.Log("Error caught in postload: "+error);
}
}
}());}

However this solution does not help in case of record navigation. Choose wisely. Hope it helps.