Thursday, 12 February 2015

Siebel Open UI: Setup Method in Applet PM

In this post, I am going to discuss about Setup method in Applet Presentation Model. The Applet PM has two methods defined; Init and Setup.

Setup method as explained in bookshelf with an example, can be modified to add or modify applet objects. Every time a request is received for Applet to show in UI, the data from server is sent as a Property Set to Applet PM which is processed by Setup method. Before the actual set up happens, we can however, modify the property to suit our requirements. Remember that this method only runs once when the applet loads in UI. (like Applet_Load scripting event) It does not run on events like change record, invoke method etc.

But you might ask why do I need this. I can write a PR to include HTML to add the extra list column in PR methods. Well, you certainly can try do this but the scripting is very complicated. For each record in List, you have to add one extra table column (). Also, if I want to have a checkbox column, I have to add the HTML property (input type="checkbox") to all the list columns. After doing all this, the list column does not get added to the data property set. We can not use it to identify a record. 

With Setup method, you can use predefined formats to render checkbox (SWE_CTRL_CHECKBOX) and if you add a control, it will be added to all the records in List. You can check the siebelconstants.js file for the list of control types.

Below is the code to add a Select checkbox and remove some list columns using delete keyword below. You can add a condition here and conditionally remove the list columns. For example, we can have same list applet but show different set of list columns in different views. Here  I removed Name and Status fields from Applet.

OpenURLPM.prototype.Setup = function(propSet){
                var mycontrol = SiebelApp.S_App.GetAppletControlInstance (
                    "Client_Select",
                    consts.get("SWE_CTRL_CHECKBOX"),
                    "Select",
                    "150" );
                this.Get("GetListOfColumns")["Client_Select"] = mycontrol;
                delete this.Get("GetListOfColumns")["Account Status"];
                delete this.Get("GetListOfColumns")["Name"];
                SiebelAppFacade.OpenURLPM.superclass.Setup.call( this, propSet );
};

Below is the code to remove a control (Query button) in Form applet.

FormPopupPM.prototype.Setup = function(propSet){
                delete this.Get("GetControls")["NewQuery"];
                SiebelAppFacade.FormPopupPM.superclass.Setup.call( this, propSet );
 };



If you observe the propSet that is being passed as input to Setup method, it contains the data of all the controls in the applet.

So, consider using this method to modify the Applet controls and List columns. You can explore the options to modify the property sets to suit your requirement. Happy experimenting!!

Monday, 2 February 2015

Siebel Open UI: What you can Get from Applet PM

Have you ever wondered what are all the objects, functions, arrays, constants and values we can Get and make use in an Applet PM or PR file. Well, I tried to find out all the functions and variables we can use for rendering and business logic in Open UI. 

I am talking about Get function in PM which can be accessed from PR also (using this.GetPM() function). There are many variables which can be retrieved from an Applet PM. By digging down to the JavaScript files, I finally found the list of variables that can be obtained from Applet. Below is the list of all the variables. This is not the complete list. Based on type of applets (List, Tree, Calendar etc), the list grows. But these are common list of variables.


"GetName","GetId","GetVarName","GetFullId","GetTitle","GetControls","GetActiveControl","GetSelection","GetRecordSet","GetDefaultFocusOnNew","GetAppletSummary","GetAppletLabel","IsInQueryMode","GetQueryModePrompt","GetDefaultFocusOnQuery","GetMapFields","GetPrsrvControl","GetUIEventMap","IsPure","GetScrollDir","GetScrollAmount","GetMode","GetBusComp","GetRowListRowCount","GetWSEndRowNum","GetNumRows","IsNumRowsKnown","GetObjectType","GetRepstrName","GetUIName","GetRawRecordSet","GetParentApplet","IsActive","IsEditable","HasPickError"

Now I tried to get all the variables in a debug window and see what these variables hold. Here is the screenshot.




Well, most of the names are self explanatory. I have explained few functions below. 

GetName : gets the applet name. 
GetId : gets the applet order in the view (1 from top)
GetFullId : gets the applet's html id
GetTitle: gets the applet title defined in Tools
GetControls: gets the controls objects in the applet (I will discuss about the control objects in another post)

GetActiveControl : gets the active control object

GetSelection: gets the index of selected record starting from 0 for first record
GetRecordSet: Array of records in the applet

GetRawRecordSet : Array of records in the applet including the hidden columns

GetMode: gets applet mode like Base, Edit, Edit List
GetBusComp: gets the buscomp object. This is very useful for doing business layer logic

GetRowListRowCount: gets the max number of records that can be shown in applet. This is applet's HTML no of rows property. If we click on show more, this value changes in list applet
GetNumRows: Get the number of rows showing in the applet. This is not the record count of all the records in the applet.
IsActive : if the applet is selected applet in the view, it returns true
IsInQueryMode: true if applet is in query mode

You can test this in browser console. Refer below.





I am still trying to find out about other variables and functions. I will keep posting about this. 

I have created a code snippet to get all the properties for an Applet. Check this out Post on Get Properties

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.ExtendCustomPM , 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.