Category: Siebel Open UI Training

Siebel IP 2015 : Siebel Composer Overview

What would you say if you see your traditional Siebel Tools has turned into Web based Siebel Tools (Siebel Composer) ?

Well, that made me crazy!

But it’s true! With Siebel IP 2015, Oracle has released web based Siebel tools  – Siebel Composer.

After Siebel Open UI, this is another major feature introduced by Oracle to compete with other could based CRM applications.

But…

Remember,

Oracle recommends to use Siebel CRM Composer only in isolated developer mode as current release is not ready for production environment.

But, nevertheless this is a big step to make Siebel more popular and interesting among developers and business users.

In this article, we will discuss Siebel CRM Composer in details.

That’s enough intro…

Let’s start our discussion with Siebel Composer definition.

Siebel Composer is the web version of Siebel Tools that runs on server. You can access it in any browser using Siebel Open UI client.

Currently it includes some of the functionalities of Siebel Tools. For example, using Siebel CRM Composer, you can make a field read-only or change field label without Siebel Tools.

We will discuss these functionalities in the later part of this article.

Siebel CRM Composer interface:

To give users an inconsistent look, Oracle has built Siebel Composer interface same as Siebel Business Application user interface.

Siebel IP 2015 - Siebel CRM Composer

The items in the first level object explorer (ex: Applet, Business Component) in Siebel Tools are available as screens. You can select any object from side menu icon in the top left corner of the screen.

Lower level objects of the object explorer appears as views and sub views under the screens in Siebel Web Tools.

All attributes of Siebel objects come as fields in Siebel composer.

For example: Name property of Applet object appears as Name field under Applet screen.

In Siebel CRM Composer, you navigate between screens and views in the same way that you do in Siebel application. You can add, update or delete records in the same way you do in any Siebel Open UI business application.

Now,

You might be wondering:

Siebel Composer looks like any other Siebel application.

So, does that mean, lock or unlock object/s is not required anymore before doing any changes?

How to compile changes in repository?

Well…

Same as Siebel Tools, developers must lock an object before modifying it and unlock once modification is completed.

Steps to lock/unlock an object in Siebel Composer:

  • Select the object
  • Click on ‘Lock Object’ from applet menu
  • Modify the object
  • Click on ‘Unlock Object’ to unlock the object.

That simple!

But unlike Siebel Tools, you do not compile any object in repository file. Once objects are modified in Siebel Composer, navigate to Administration – Runtime Configuration > Publish view and publish all changes.

You can publish objects in two ways –

Siebel Composer - Publish

1. Click on ‘Publish All’ to publish all modified objects at a time

2. To publish individual object, select the record and click on ‘Publish’

Now all your changes will be available in repository metadata table.

To verify your changes –

Siebel composer

1. Either you can navigate to Administration – Runtime Configuration > ‘Published Version’ view and check the object record. Object with latest version must be available under ‘Published Version’ view.

2. Or log in to Siebel application and verify all changes. If you were already logged in to application before object modification, then log off and log in again to see changes.

You know about AOM (Application Object Manager), right?

Remember this:

Siebel Web Tools Object Manager (ENU) is the AOM component for Siebel CRM Composer. Currently this component is available only in U.S. English language.

Now,

You have fair idea about Siebel Web Tools.

But you must know other advantages of Siebel Composer as well.

Benefits of Siebel CRM Composer over Siebel Tools:

1. No compilation, no downtime

Really?

If you add or modify any object in Siebel Tools, you have to compile it into repository file. Then you down the server, replace .srf file and restart the server again to see changes in Siebel Application.

Well,

There are some exceptions where you do not need to compile objects ( like workflow) in Siebel Tools. But except few, almost all objects need compilation.

But in Siebel Composer, there is no need of object compilation. You just login into Siebel Web Tools, do required changes and publish it.

All changes will be available in server without any compilation and downtime.

Like Siebel Tools, you can lock/unlock objects in Siebel composer also to stop simultaneous update.

It expedites the overall Siebel configuration process as well.

2. Improved user interface with easy navigation

Like other Siebel applications, Siebel Web Tools has screens, views, applets and fields. It has a separate object manager that helps you to open it as a web client. Due to its enhanced user interface, navigation among objects is easier than Siebel Tools.

3. More efficient web page rendering

How?

For Siebel Tools, Siebel web templates have deeper hierarchy structure in Siebel Business Application. It makes Siebel application difficult to render on different devices like desktop, mobile devices.

But web templates for Siebel Composer have flatter hierarchy structure. It makes web templates flexible to render across wide range of devices.

Flatter hierarchy also helps to reduce server roundtrip to render web pages.

Unlike Siebel Tools, you do not modify .swt files to configure web template files here.

Now you just add or update records/fields in the Web Template Item view of Web Template screen. Also it is not necessary to use table tag to position fields in web template files.

4. More elements for building user interface

Siebel CRM composer includes all objects/properties of Siebel Tools as screens/views/fields. Plus it has few extra fields that are not available in Siebel Tools.

For example:

Template Item Holder Name field is available in Applet Web Template Item view, View Web Template Item view and Web Page Item view. This field captures the name of Item Identifier and helps to identify it easily.

To know the list of new fields available in Siebel Composer, click here.

5. Required less network traffic

Let me tell you how…

You know, Siebel composer has flatter hierarchy of web templates. Also it renders only the necessary elements in user interface. This needs less network bandwidth to deliver web pages in UI.

And last but not least…

6. Enhanced file loading

Besides existing presentation model and physical renderer for views or applets, PM and PR are available for web pages as well. In Siebel Composer, files for PM, PR or framework (required to start the Siebel application) are loaded from manifest.

Now you know what all extra benefits you can get from Siebel Composer (IP15).

Next let me explain:

Siebel Tools objects that are included in Siebel Composer Developer Preview (IP 15):

Applet
DLL
Screen
Application
Integration Object
Symbolic String
Business Component
Link
View
Business Object
Menu
Web Page
Business Service
Message Category
Web Template
Class
Pick List
Table
Command
Project
Type

And:

Siebel Tools objects that are not included in Siebel Composer Developer Preview (IP 15):

 Assignment Attribute  Icon Map  Server Component Type
 Assignment Criteria  Import Object  System Activity Object
 Bitmap Category  Pager Object  Task
 Content Object  Repository  Task Group
 Dock Object  Schema Maintenance Phase  Toolbar
 EIM Interface Table  Schema Maintenance Process  Workflow Policy Column
 Entity Relationship Diagram  Schema Maintenance Step  Workflow Policy Object
 Find  Search Category  Workflow Policy Program
 Help Id  Search Engine  Workflow Process
 HTML Hierarchy Bitmap  Search Index  

You know what?

Once you upgrade your Siebel application to IP15, all file based contents for Siebel web templates turn into table based contents. Due to this web template migration, Incremental Repository Merge for IP15 takes longer time than earlier version.

Also make sure that the ‘EnableResponsive‘ parameter is set to ‘TRUE‘ for all Siebel applications that use responsive web design feature. By default, value of this parameter is set to ‘FALSE‘. This parameter enables Siebel CRM Composer for that Siebel application.

And…

How to modify this parameter value?

To change the parameter value, navigate to Administration – Server Configuration screen and search for the component of the Siebel application. Then you go to component parameter list and update the parameter value.

Now we are at the end of the discussion…

But wait a minute:

Before closing this article, let us tell you few features that would come in future releases.

As per Siebel Composer Bookself published by Oracle, below features will be included in future releases

  • WYSIWYG (What You See Is What You Get) display and drag-and-drop functionality in the user interface.
  • Drop-down lists of values for some fields to replace free form text fields in which you enter data.
    • Access to Siebel CRM Composer from within the Siebel application.
  • Management of a multi-user development environment for Siebel CRM Composer.
  • Publication of repository changes in a development, test, and production environment, where the changes are implemented without having to restart the server.

Just to summarize:

Siebel Composer is a good initiative to move Siebel application on the cloud. It also makes configuration process faster and easier.

To know more, please refer Siebel composer bookself.

You know, Siebel IP 2016 has been released recently. In out next article, we will discuss all new features of Siebel Composer – IP16.

What do you think? It is good for Siebel future or not?

Please leave your comment below!

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

Watch YouTube Video on Siebel CRM Composer (IP 15):

Is Siebel Open UI developer friendly CRM application?

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+.

Siebel Open UI Best Practices (Training – Part 10)

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

Physical Renderer Methods in Siebel Open UI (Training – Part 9)

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:

Presentation Model Methods in Siebel Open UI (Training – Part 8)

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:

Debugging in Siebel Open UI (Siebel Open UI Training – Part 7)

Debugging in Siebel Open UI is the most important and difficult task for any Open UI developer, isn’t it!!

But don’t worry, after reading this article, it will be easier for you to debug script in Siebel Open UI. In Open UI, we write script mainly for Presentation Model, Physical Renderer and Theme. Here we will discuss step by step approach of debugging Siebel Open UI script.

We will use browser developer tool extensively to debug Open UI script. In our previous module on Siebel Open UI theme, you have seen how to use browser developer tool for development purpose. Here you will use the same tool for debugging.

So what is Browser Developer Tool ?

Browser developer tool is a vanilla tool provided by almost all modern browsers like Google Chrome, Mozilla Firefox, IE 8+. It gives an inspector to verify JS or CSS files are downloaded properly on the browser or not. It allows inline modification of HTML and CSS rules to see how changes affect look and feel of the webpage. You can also see variables values, set breakpoints in JavaScript code from developer tool.

To open browser developer tool, right click on any web page and then click on ‘Inspect Element’. You could use shortcut keys also like F12 for Google Chrome, Shift+Ctrl+Q for Mozilla Firefox.

Steps for debugging in Siebel Open UI:

  1. Verify JavaScript and CSS files are downloaded properly in the browser
  2. Verify Javascript Class is properly loaded
  3. Use SiebelJS.Log() function to log messages
  4. Use debugger statement to add breakpoints inside script

1. Verify JavaScript and CSS files are downloaded properly in the browser

If your code does not work, first step is to verify all files are downloaded properly in the browser. Best tool to do so is browser developer tool (Inspect Element). You first open Siebel Open UI application Debugging in Siebe Open UIand right click to choose ‘Inspect Element’ to open developer tool. If your browser is Google Chrome, then go to ‘Source’ tab and search for files.If there is any error or warning in downloading file, you will see a small red or yellow icon on the top right hand corner. You click on those icons and down the ‘Inspect Element’ window, another window will show all errors.

There may be several reasons behind download failure.

– JS file is not properly defined in Manifest Administration. To know more about Manifest Administration, read our article ‘Manifest File Customization

– Error in JS file itself

2. Verify JavaScript Class is properly loaded

To verify JavaScript Class is properly downloaded to the client, go to Inspector tab and type SiebelAppFacede.<First few letters of class name>JavaScript debugging in Siebel Open UI

– If class is properly loaded, auto complete feature of the console will recognize the class

– If browser does not suggest the class, then verify the class is properly registered in the namespace of JS file or not

3. Use SiebelJS.Log() function to log messages

Use SiebelJS.Log() to print variable values or any other log messages on inspector tab

– Use GetFieldValue() to get values of controls in the Presentation Model

Presentation Model Debugging

– Use val() to get values of elements in the Physical Renderer

Physical Renderer Debugging

– To see the output of log messages, open browser tool and go to Inspector tab

  • All log messages appear in execution order
  • If you have used log statement in multiple places, then add file name or any separator among log messages. It will help you to understand which log message is coming from which file.

4. Use debugger statement to add breakpoints inside script

– Almost all modern browsers have built-in breakpoints feature with developer tool. You could add expression on breakpoints also.

Siebel Open UI debugging

– If the developer tool does not give breakpoints functionality or you want to set breakpoints explicitly, then use ‘debugger’ statement in your script.

Debugging techniques in Siebel Open UI

– ‘debugger’ behaves the same way as breakpoints, code execution will stop at that point.

Few Recommendations :

– Use JavaScript code quality checking tools like JSHint, JSLint to verify JS file before deployment

– Remove debugger and SiebelJS.log() from script before moving to production

– Try to avoid alert() to print variable values

              ♦ While debugger and SiebelJS.log() are invisible to end users, alert() throws alert message to end users

– Test with all browser and device combinations before moving the script to production

Session Highlights – Debugging in Siebel Open UI:

1) Use browser developer tool to verify that the JS or CSS files have been downloaded properly

2) Use SiebelJS.Log() to print variable values or to decide that the code execution has reached certain point

3) Use debugger to add breakpoints

This ends our seventh Open UI training module – Debugging in Siebel Open UI.

To check your Siebel Open UI skill, click here – Siebel Open UI Quiz 

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

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

<< Module 6: Siebel Open UI Theme                             Module 8: Presentation Model Methods >>

Watch our YouTube Video on Debugging in Siebel Open UI: