Understanding Siebel Open UI Javascript

JavaScript is a programming language understood by almost all the web browsers. JavaScript is an Object Oriented programming language. In Open UI, we use JavaScript objects to render and perform actions in the User Interface. This actually needs understanding of OOPS concepts and a little bit of JavaScript. 

But what is an object? Well, everything that we define as an entity that can be individually identified is an object. For example, in a Siebel view, applet is an object. Each object has properties and methods. For example, applet has a name (property) and it can do an action like invoke method (method).

Its features include

    1.   Inheritance: We can create a hierarchy of objects and the child objects inherit the parent features. If you are creating a custom Presentation Model or Physical Renderer, we are using Extend statement which defines the inheritance.

    2.   Polymorphism: The same task can be done separately by separate objects. Different types of applets perform same action in different ways.

    3.   Encapsulation: Binding code and data together and making them into one unit. We can use the encapsulated code to create multiple objects of same type.

In Open UI client, everything you see in UI is an object, created by the JavaScript files that Siebel loads. The view is an object, the applets in the view are child objects and the controls in the applets are child objects to applets.

For example, if you are in a view, each applet is an object. The object is created during run-time by accessing JavaScript files. Let us say we are navigating to Account List View, once the view is clicked, the definition of applets in the view is fetched from SRF. It contains two applets SIS Account List Applet and SIS account Form Applet. Now, the application will check if there is a manifest entry for the applets in Manifest administration screen. If not found, it will load default Presentation model and Physical Renderer files for these applets. If found, it will download the files on top or default files (because we use extend in our script). These files will render and contain the behaviour of Applet objects.

An example script can be explained as below.

if( typeof( SiebelAppFacade.CustomPM ) === "undefined" ){
    SiebelJS.Namespace( "SiebelAppFacade.CustomPM" );
   
// check if CustomPM is already present. If not, name our present code as CustomPM . Namespace is nothing but giving name to our object.

    define("siebel/custom/CustomPM", [], function () {
        SiebelAppFacade.CustomPM = ( function(){
            function CustomPM ( proxy ){
                SiebelAppFacade.CustomPM.superclass.constructor.call( this, proxy );
            }
            SiebelJS.Extend( CustomPM , SiebelAppFacade.PresentationModel );
// CustomPM is an extension or child or PresentationModel 
            CustomPM.prototype.Init = function(){
                SiebelAppFacade.CustomPM.superclass.Init.call( this ); 
// call super class functions. This calls SiebelAppFacade.PresentationModel functions. 

//.........write your custom code here..................//
            };
            return CustomPM;
        } ());
        return "SiebelAppFacade.CustomPM";
    });

}

So, any PM or PR we write, we extend existing functionality and on top of that we add our custom functionality.