You know:

Siebel Open UI is browser and device independent Siebel client. It has better user friendly and flexible interface than traditional Siebel application.

Even you can modify existing Open UI theme/s or add custom theme/s as per business need.

But…

Is it developer friendly CRM application too?

Thanks to John for asking this question on our Facebook page ‘TechOneStop‘.

It’s quite interesting question. Isn’t it!!

We always talk about user friendliness of an application – be it Siebel Open UI or any other application. But hardly we discuss about developer friendliness of an application.

In this article, we will discuss about developer friendliness features of Siebel Open UI.

First, let me tell you what I want to see in a developer friendly application.

There are lots of criteria to measure developer friendliness of an application.

But here, I will consider only three characteristics

• Easy to learn
• Easy to customize
• Easy to debug

Let’s see how Siebel Open UI meets above three criteria.

Easy to learn:

This can be controversy…

But, I believe, Siebel is fairly easy to learn but not Siebel Open UI.

Why so?

Siebel is huge but Siebel Tools is a great help for application configuration.

Besides Oracle’s training materials, you will find lots of Siebel configuration related articles on web. There are many forums as well where you can post your problems and Siebel experts share their experiences.

Overall, if you spend some time, you can achieve mastery skill in various aspects of Siebel.

But…

To do Siebel Open UI related changes, Oracle does not give you any tool like Siebel Tools. Plus you will not find enough materials on web about Siebel Open UI as it is relatively new.

However, learning HTML or CSS or JavaScript is not difficult. Also training materials are easily available.

Best place I could suggest to learn HTML or CSS or JS is W3schools.

Though Open UI specific script is bit different from normal JavaScript but it is quite easy to learn.

You can go through our Siebel Open UI training articles as well. Oracle also conducts training on Siebel Open UI at a regular interval.

No doubt, it is tough for any Siebel developer to learn web design on Open UI platform. But over the time, it can be learnt.

Next…

Easy to customize:

Is it an easy task to do all Siebel Open UI related changes?

Answer is definitely NO but why?

Very first reason is that there is no tool like Siebel tools to do Open UI related changes. You have to use notepad or similar kind of application to write script for Open UI. So chances of doing syntax or logical error are quite high.

If there is any error in script, there is no way to catch it without registering the file in the application. You have to remember all web design related syntaxes and Siebel Open UI methods without any help of tool. Also once script is ready and file is registered, you have to test it in all browsers one by one manually.

But, here is the best part…

You can use our PM/PR generator tool to build Presentation Model or Physical Render for applets or views. This will definitely help you to minimize syntax and logical errors.

You know,

From Siebel Open UI 8.1.1.11 onward, we do not modify manifest file any more. Instead we register all files under Manifest Administration within application.

No doubt, it has minimized scripting.

But still you have two files to maintain – Presentation Model and Physical Renderer.

Presentation Model is for building logic and Physical Renderer is for rendering user interface. To know more, read our article on Presentation Model customization and Physical Renderer customization.

But if Oracle can make it a single file, it will definitely reduce scripting as well as maintenance overhead.

Recently Oracle has released web based Siebel tools – Siebel Composer. Though it is not ready for production environment right now. But when it will be available, application configuration will be faster and easier.

Last…

Easy to debug:

Do you think debugging Siebel Open UI script is easy?

Can Siebel developers understand and modify Open UI script easily?

Well,

I think, debugging is not difficult task because of browser developer tool.

Almost all modern browsers have built in browser developer tool. It gives an inspector to verify JS or CSS files have been downloaded properly or not. It allows inline modification of HTML / CSS to verify look and feel of webpage elements. Also it has debugger to set breakpoints in JavaScript and verify variables values.

To open developer tool, you just need to right click on browser and then choose ‘Inspect Element’.

To know more about debugging, you could read our article on Siebel Open UI Debugging.

If the script is well structured and as per best practices, it is not difficult for Siebel developers to understand and debug.

Finally,

After analyzing all 3 criteria, I could say, though Siebel Open UI is not highly developer friendly CRM application for a Siebel developer but not difficult to learn.

However, Oracle should plan to build Siebel Open UI customization tool like Siebel Tools.

For the time being, use our PM/PR generator tool to build PM and PR files 🙂

Now it’s your turn…

What do you think – Siebel Open UI is developer friendly application? Is it easy to learn or customize or debug Siebel Open UI?

Please leave your comment below!

Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Google+.

You know how to configure Physical Renderer in Siebel Open UI. In this module we will discuss few frequently used Physical Renderer Methods that every Open UI developer should know.

Frequently used Physical Renderer methods in Siebel Open UI:

1. Define
2. AttachPMBinding
3. GetPM
4. BindData
5. BindEvents
6. ShowUI
7. FieldChange
8. EnableControl
9. SetControlValue
10. EndLife

1. Define Method:

Siebel Open UI uses ‘Define’ method to locate the Presentation Model (PM) or Physical Renderer (PR) JS file and other dependent files. It must have a return statement like return “SiebelAppFacade.customclassname”;

Syntax: define (Module_name,List_of_dependencies,Function);

• Module_name is the Physical Renderer file name with file path but without file extension.
• List_of_dependencies is an array of all dependent modules required to execute PR JS file. If there is no dependency, keep it blank.
• Function identifies the function name and returns an object.

Example:

// Define method to make sure Siebel Open UI can identify PR JS file and other dependent files

define(“siebel/custom/ShowHideFieldsPR”, [“order!3rdParty/jquery.signaturepad.min”, “order!siebel/phyrenderer”], function () {
                  — Write the code here—
return “SiebelAppFacade.ShowHideFieldsPM”;

2. AttachPMBinding:

AttachPMBinding is used to bind a method with another method. If there is no conditional expression, Open UI calls ‘Method_to_call’ method after ‘Method_name’ execution.

Syntax:

this.AttachPMBinding(“Method_name”,”Method_to_call”,{when: function(Conditional_function){return false;}});

• Method_name is the existing method name, typically Presentation Model method name.
• Method_To_Call is Physical Renderer custom method name. Siebel Open UI calls this method after execution of Method_name.
• Conditional_function: Siebel Open UI calls ‘Method_to_call’ method based upon return value of Conditional_function. 
  • True: Open UI calls the AttachPMBinding method.
  • False. Open UI does not call the AttachPMBinding method.

Example: this.AttachPMBinding( “ShowHideFieldsPM”, ModifyLayout );

3. GetPM:

GetPM method is used to get Presentation Model instance in Physical Render JS file. It does not include any argument.

Syntax: GetPM()

Example: var controls = this.GetPM().Get( “GetControls” );

4. BindData:

BindData method downloads metadata and data from Siebel server to client proxy and then binds data to user interface. It can access all properties from PM and passes it to PR to build user interface.

Syntax: BindData(SearchData, options);

Example:

custom.prototype.BindData = function(){
SiebelAppFacade. custom.superclass.BindData.apply(this, arguments); };

5. BindEvents:

BindEvents method binds the Presentation Model method to Physical Renderer events.

Syntax: BindEvents(this.GetProxy().GetControls());

Example:

Suppose requirement is when user clicks on plus sign (+) of a collapsible applet, call PM to restore applet as well as data. So you can set an event on restore button action and bind that event with PR JS file.

SiebelAppFacade.RecycleBinRenderer.superclass.BindEvents.call(this);

6. ShowUI:

ShowUI renders the metadata, data and PR events. It shows the physical control corresponding to an applet control.

Syntax: ShowUI()

Example:

If you want to display a list applet in grid layout, use ShowUI to render the third-party grid control.

CustomPR.prototype.ShowUI = function(){

7. FieldChange:

Siebel Open UI uses FieldChange method in Physical Renderer to modify field value. Mostly FieldChange method is followed by SetControlValue method to set the value of the control.

Syntax: 

this.GetPM().AttachPMBinding(“FieldChange”, this.SetControlValue, {scope: this}

8. EnableControl:

EnableControl method is used to enable a control in Physical Render JS file.

Syntax: EnableControl(control_name)

9. SetControlValue: 

SetControlValue method is used to set the value of a control. Generally we call SetControlValue method after FieldChange method.

Syntax: 

this.GetPM().AttachPMBinding(“FieldChange”, this.SetControlValue, {scope: this}

10. EndLife:

EndLife method ends the life of an event. It is recommended  to use the EndLife method to release custom events, delete unused variables and so on.

Syntax: EndLife()

Example:

CustomPR.prototype.EndLife = function(){
$(Object_name).unbind (“Event_name.CustomPR”); };
           – Object_name is the name of the object where the event runs
           – Event_name  is the name of an event

This ends our module on Physical Renderer methods in Siebel Open UI.

If you have any question about Physical Renderer Methods, please feel free to comment below.

Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Google+.

<< Module 8: Presentation Model Methods               Module 10: Siebel Open UI Best Practices >>

Watch our YouTube Video on Physical Renderer Configuration:

You already know how to configure Presentation Model in Siebel Open UI. In this module we will discuss few frequently used Presentation Model Methods in Siebel Open UI that every Open UI developer should know.

Frequently used Presentation Model methods in Siebel Open UI:

1. Define
2. Init
3. AddProperty
4. SetProperty
5. Get
6. ExecuteMethod
7. AddMethod

1. Define Method:

Siebel Open UI uses ‘Define’ method to locate the Presentation Model (PM) or Physical Renderer (PR) JS file and other dependent files. It must have a return statement like return “SiebelAppFacade.customclassname”;

Syntax: 

define (Module_name,List_of_dependencies,Function);

• Module_name is the Presentation Model file name with file path but without file extension. 
• List_of_dependencies is an array of all dependent modules required to execute PM JS file. If there is no dependency, keep it blank. 
• Function identifies the function name and returns an object. 

Example:

// Define the presentation model file location and other dependencies if any

define(“siebel/custom/ShowHideFieldsPM”, [], function () {
— Write the code here—
return “SiebelAppFacade.ShowHideFieldsPM”;
});

2. Init Method:

Init stands for Initialization. It is used to initialize other methods or objects like AddProperty, AddMethod.

Syntax: Init()

Example:

ShowHideFieldsPM.prototype.Init = function(){
SiebelAppFacade.ShowHideFieldsPM.superclass.Init.call( this );
this.AddProperty(“ShowHideStatus”, “” );
this.AddMethod( “ShowSelection”, SelectionChange, { sequence : false, scope : this } );
};

3. AddProperty Method:

AddProperty method is used to add a property in Presentation Model. You can use ‘Get’ method to fetch the value from the property. AddProperty method returns ‘True’ if the property is created successfully otherwise ‘False’. A subsequent call to this method with the same property name will overwrite the previous value.

Syntax:

this.AddProperty(“propertyName”, propertyValue);

Example:

this.AddProperty(“ShowHideflag”, False);
SiebelJS.Log(this.Get(“ShowHideflag”));

4. SetProperty Method:

SetProperty is used to set the property value, created by AddProperty method. It returns ‘True’ if the property value is set successfully otherwise ‘False’.

Syntax:

SetProperty(property_name, property_value);

Example: 

this.SetProperty( “ShowHideflag “, true);

5. Get Method:

Get method returns the property value.

Syntax: Get()

Example:

this.AddProperty(“ShowHideflag”, False);
SiebelJS.Log(this.Get(“ShowHideflag”));

6. AddMethod Method:

AddMethod adds vanilla or custom methods to the Presentation Model. You can use ExecuteMethod to run the method that AddMethod adds. It returns ‘True’ if the method is added successfully, otherwise ‘False’.

Syntax:

AddMethod(“MethodName”, MethodDef(argument1, argunemtn2,… argument n), {MethodConfig : value});

   MethodName is the name of the method that Siebel Open UI adds to the Presentation Model

   MethodDef is an argument that helps to call another method

   Argument1/2..N are the arguments that AddMethod passes to the method defined in MethodDef

   MethodConfig can have below values

      ♦ Sequence:

               – Set it to ‘True’ if you want Siebel Open UI to call MethodName before the method that already exists in PM.

               – False if you want Siebel Open UI to call MethodName after it calls the method that already exists in PM.

               – Default value is False.

      ♦ Override:

               – If ‘True’, Siebel Open UI does not call the method that already exists in PM.

               – If ‘False’, Siebel Open UI calls the method that already exist in PM.

      ♦ Scope:

               – It defines the scope of the MethodDef.

Example:

this.AddMethod( “FieldChange”,  OnFieldChange, { sequence : false, scope: this } );

** You can not override any method that already exists in vanilla application by using Override as True.

7. ExecuteMethod Method:

ExecuteMethod is used to execute vanilla and custom methods in PM. ExecuteMethod returns a value from the method if it exists otherwise it returns ‘Undefined’.

Syntax:

this.GetPM().ExecuteMethod(“vanilla/custom method name”, arguments);

Sometimes it is written as this.ExecuteMethod(“vanilla/custom method_name”, arguments);

Example:

var controls = this.Get( “GetControls” );
var control = controls[ “Status” ];
var value = this.ExecuteMethod( “GetFieldValue”, control );

** If the method, specified in ExecuteMethod, is a custom method, then make sure AddMethod is used to add the method before calling ExecuteMethod.

Few less frequently used Presentation Model Methods:

1. AttachEventHandler Method
2. AttachNotificationHandler Method
3. AddComponentCommunication Method
4. AttachPostProxyExecuteBinding Method
5. AttachPreProxyExecuteBinding Method
6. OnControlEvent Method
7. Setup Method

These are not highly used Presentation Model methods. If you want to know any of these methods, please let us know.

This ends our module on Presentation Model Methods in Siebel Open UI.

If you have any question, please feel free to comment below.

Keep in touch, follow TechOneStop on Facebook / Twitter / LinkedIn / Goolge+.

<< Module 7: Debugging in Siebel Open UI                     Module 9: Physical Renderer Methods >>

Watch our YouTube Video on Presentation Model Configuration: