In this last module of Open UI training series, we will discuss about Siebel Open UI best practices. There are few thumb rules that you must follow during Siebel Open UI customization.

All best practices that you have followed for Siebel HI, are applicable for Open UI also. Additionally there are few best practices for Siebel Open UI application.

Siebel Open UI Best Practices:

1. Add Presentation Model (PM) or Physical Render (PR) when there is no other way of customization to meet the requirement. You first try to meet the requirement by configuring Siebel tools or modifying Siebel web template file.

2. Make sure all PM variables are treated as properties. You must use ‘AddProperty’ method only to create property in Presentation Model. Never use ordinary JavaScript variable to create any property in Siebel Open UI.

3. Like ‘AddProperty’, use ‘AddMethod’ only to create methods in Presentation Model (Read more about Presentation Model Methods).

4. Use ‘BindEvents’ to bind the PM methods with appropriate PR events and ‘BindData’ to access properties from PM (Read more about Physical Renderer Methods).

5. Typically a Presentation Model is followed by a corresponding Physical Renderer. You write business logic in PM file and rendering logic of Siebel objects in PR file.

6. It is strongly recommended that do not use PR to add any presentation attributes like position, color, font to the Document Object Model (DOM). All presentation related attributes must be declared in CSS file only. You could read our article on Siebel Open UI theme to know more about CSS.

7. Use JavaScript code quality checking tools like JSHint, JSLint to verify PM or PR JS files before deployment.

8. Remove debugger and SiebelJS.log() from the script before moving custom files into production.

10. Try to avoid alert() to print variable values. If you forget to delete it from JS file before deployment, it will show alert message to end users.

11. Test your customization with all browser and device combinations before moving it to production.

This ends our all 10 modules on Siebel Open UI Training. We hope it has helped you to get a fair understanding of Siebel Open UI application.

To read our Siebel Open UI configuration related articles, click here – Siebel Open UI Configuration. Also test your Siebel Open UI knowledge with our quiz – Siebel Open UI Quiz.

To know about Siebel Open UI interview question, read our article: Siebel Open UI Interview Questions

If you have any question about Siebel Open UI best practices, please feel free to comment below.

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

<< Module 9: Physical Renderer Methods

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: