In the fourth module of Siebel Open UI training series, we will discuss about Physical Renderer Customization. If you didn’t read our previous article on Presentation Model Customization, we would suggest you to read that first. It will help you to understand this article better as Presentation Model and Physical Renderer are interrelated.

After you complete this module, you will know

– What is Physical Renderer

– It’s role in Siebel Open UI

– Physical Renderer Customization steps

So, lets start our discussion with Physical Renderer definition.

What is Physical Render in Siebel Open UI?

– Like Presentation Model, Physical Renderer is also a client side JavaScript file. It binds HTML elements with Presentation Model.

– It is responsible to build user interfaces. It takes logical data and does physical rendering of it in HTML using CSS files.

– Physical Renderer can use third-party controls like JQuery library

– It can display same set of records in different ways on different views

• List Applet
• Form Applet
• Carousel
• Calendar
• Table format
• Tree

– It allows records to be displayed in different ways on different platforms like Desktop, Mobile

Few business scenarios where you can use Physical Renderer Customization:

– Display or hide a field based on the property value of Presentation Model

– Display records in different ways like carousel, table, grid

– When your application needs platform specific look-and-feel like Desktop or Mobile

We will take the same example that we have used in Presentation Model customization, to discuss Physical Renderer Customization steps also. Our example was – on Contact Form Applet, if Status field has any value, show the field ‘WorkPhoneNum#’ else hide it. In our previous module, we have built a Presentation Model JS file to capture the Status field value. Here we will write a Physical Render JS file to build the user interface.

Steps for Physical Renderer Customization:

1) Verify the object class does not exist

2) Add the class to the Siebel namespace

3) Define the Physical Renderer file location and other dependencies if any

4) Add a constructor function within the class

4.1) Declare the class constructor as function

4.2) Inherit the super class constructor

4.3) Declare the class as an extension of default Physical Renderer

4.4) Declare bindings to the Presentation Model

4.5) Add script for custom method/s

Step 1: Verify the object class does not exist

– Like Presentation Model, first check whether the class has already been implemented or not. This should be the first statement to avoid any possible conflict.

– Syntax:

if( typeof( SiebelAppFacade.custom_class_name ) === “undefined” ) {

– Script for our example:

// Verify same class is not defined yet
if( typeof( SiebelAppFacade.ShowHideFieldsPR ) === “undefined” ){

Step 2: Add the class to the Siebel namespace

– Every class must be added to the ‘SiebelAppFacade’ namespace

– Use NameSpace() function of SiebelJS class to do this

– Syntax:

SiebelJS.Namespace( “SiebelAppFacade.custom_class_name” );

– Script for our example:

// Add the class to the SiebelAppFacade namespace
SiebelJS.Namespace( “SiebelAppFacade.ShowHideFieldsPR” );

Step 3: Define the Physical Renderer file location and other dependencies if any

– ‘Define’ method identifies the modules that Siebel Open UI uses to locate the Physical Renderer file and other dependent JS files

– It must have a return statement like return “SiebelAppFacade.custom_class_name”;

– Syntax:

define (Module_name,List_of_dependencies,Function);

Module_name is nothing but the Physical Renderer file name with file path but without file extension.

List_of_dependencies is an array of all dependent modules that are required to run Physical Renderer properly. If there is no dependency, keep it blank.

Function identifies the function name that must return an object.

– Script for our example:

// Define the Physical Renderer file location and other dependencies if any
define(“siebel/custom/ShowHideFieldsPR”, [“order!3rdParty/jquery.signaturepad.min”,
“order!siebel/phyrenderer”], function () {

Step 4: Add a constructor function within the class

4.1) Declare the class constructor as function

4.2) Invoke the super class constructor

4.3) Declare the class as an extension of default Physical Renderer

4.4) Declare bindings to the Presentation Model

4.5) Add custom method/s

Step 4.1. Declare the class constructor as function

– Declare the class constructor as a child object of SiebelAppFacade

– It must have a return statement

– Syntax:

SiebelAppFacade. custom_class_name = ( function(){
— Writ the code here—
return custom_class_name; } ());

– Script for our example:

// Declare the ShowHideFieldsPR class as a function
SiebelAppFacade.ShowHideFieldsPR = ( function(){
— Write the code here—
return ShowHideFieldsPM; } ());

4.2) Invoke the super class constructor

– When Open UI calls the custom constructor in Physical Renderer JS file, it passes Presentation Model objects. Custom constructor uses these objects to instantiate all required methods and attributes.

– Syntax:

function custom_class_name ( pm ){
SiebelAppFacade. custom_class_name.superclass.constructor.call( this, pm );
}

– Script for our example:

// Call the super class constructor
function ShowHideFieldsPR( pm ){
SiebelAppFacade.ShowHideFieldsPR.superclass.constructor.call( this, pm ); }

4.3) Declare the class as an extension of default Physical Renderer

– Use SiebelJS.extend() to declare the class as an extension of Physical Renderer

– Syntax:

SiebelJS.Extend(custom_class_name, SiebelAppFacade.PhysicalRenderer);

– Script for our example:

//Extend the class so that it can access all pre built functions
SiebelJS.Extend( ShowHideFieldsPR, SiebelAppFacade.PhysicalRenderer );

4.4) Declare bindings to the Presentation Model

– Bind the Presentation Model properties with custom class/methods

– Syntax:

This.GetPM().AttachPMBinding ( “<Presentation Model Property Name>”, <Physical renderer method>, {scope:this});

– Script for our example:

// Attach PM Binding
SiebelAppFacade.ShowHideFieldsPR.superclass.Init.call(this);
this.AttachPMBinding( “ShowHideFieldsPM”, ModifyLayout );

4.5) Add scripts for custom method/s

– Write the script for all custom methods, specified in INIT function

– Syntax:

function CustomMethod(){
— Write the code here —
}

– Script for our example:

function ModifyLayout( ){
var controls = this.GetPM().Get( “GetControls” );
var canShow = this.GetPM().Get( “ShowHideStatus” );
var WorkPhoneNum = controls[ “WorkPhoneNum” ];
if( canShow ){

$( “div#WorkPhoneNum_Label” ).show();
$( “[name='” + WorkPhoneNum.GetInputName() + “‘]” ).show();
}

else{

$( “div#WorkPhoneNum_Label” ).hide();
$( “[name='” + WorkPhoneNum.GetInputName() + “‘]” ).hide();
}

}

Here is the complete script used in the example:

/*————————— Physical Renderer Customization to Show/Hide a field ————————*/

// Verify same Physical Renderer Class is not defined yet

if( typeof( SiebelAppFacade.ShowHideFieldsPR ) === “undefined” ){

// Add the class to the SiebelAppFacade namespace

SiebelJS.Namespace( “SiebelAppFacade.ShowHideFieldsPR” );

// Define the Physical Renderer file location and other dependencies if any

define(“siebel/custom/ShowHideFieldsPR”, [“order!3rdParty/jquery.signaturepad.min”, “order!siebel/phyrenderer”], function () {

// Declare the ShowHideFieldsPR class as function

SiebelAppFacade.ShowHideFieldsPR = ( function(){

// Call the super class constructor

function ShowHideFieldsPR( pm ){
SiebelAppFacade.ShowHideFieldsPR.superclass.constructor.call( this, pm );
}

//Extend the class so that it can access all pre built functions

SiebelJS.Extend( ShowHideFieldsPR, SiebelAppFacade.PhysicalRenderer );

// Attach PM Binding

SiebelAppFacade.ShowHideFieldsPR.superclass.Init.call(this);

this.AttachPMBinding( “ShowHideFieldsPM”, ModifyLayout );

};

// Add script for custom methods

function ModifyLayout( ){

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

var canShow = this.GetPM().Get( “ShowHideStatus” );

var WorkPhoneNum = controls[ “WorkPhoneNum” ];

if( canShow ){

$( “div#WorkPhoneNum_Label” ).show();

$( “[name='” + WorkPhoneNum.GetInputName() + “‘]” ).show();

}

else{

$( “div#WorkPhoneNum_Label” ).hide();

$( “[name='” + WorkPhoneNum.GetInputName() + “‘]” ).hide();

}

}

return ShowHideFieldsPR;

} ());

return “SiebelAppFacade.ShowHideFieldsPR”;

});

}

Like Presentation Model Methods, there are few frequently used Physical Renderer Methods also. To know more, read our article on Physical Renderer Methods.

This ends our Physical Renderer Customization module.

If you have any question about Physical Renderer Customization, Please feel free to comment below.

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

<< Module 3: Presentation Model Customization       Module 5: Manifest File Customization >>

Watch our YouTube Video on Physical Renderer Customization:

In the third module of Siebel Open UI training series, we will discuss about Presentation Model Customization.

After you complete this module, you will know

– What is Presentation Model
– It’s role in Siebel Open UI
– Presentation Model Customization steps

We hope that you have a fair knowledge about Siebel Open UI Architecture. If not, we would suggest you to read our previous article on Siebel Open UI Architecture first. It will help you to understand this module better.

Well, lets start our discussion with Presentation Model definition.

What is Presentation Model in Siebel Open UI?

– It is a JavaScript file that determines how to apply business logic on metadata and run-time data given by client proxy.

– It is client side scripting, collection of properties and methods.

• Property: It contains information about current state of each user interaction.
• Method: It defines the characteristics that modify the state of the object. For example – if user chooses value A for the field X, then apply method to hide field Y.

– Presentation Model is completely Siebel repository independent object. Addition or deletion of business logic from Presentation Model file does not need SRF compilation.

– It does not do rendering of any physical HTML or CSS file.

– It captures client interactions, like did the user leave a control or did the user click on a link?

– It supports different logic for different platforms like desktop, mobile.

– It can call server side business service also whenever required.

Few business scenarios where you can use Presentation Model Customization:

– Add additional control or list column that is not provided by client proxy

Example: Add an additional column to delete multiple records at a time

– Capture field values and set properties

Example: If an user chooses the pick list value ‘A’ for the field X, then hide the field Y

– Interact with Siebel Server

Example: Call server side business service

Before we discuss Presentation Model Customization steps, let us tell you few terminologies. We will use these through out our Siebel Open UI training series.

Terminology:

JavaScript API:

– JavaScript API gives a set of JavaScript functions to access and manipulate client side objects.

– In Siebel Open UI, JavaScript API replaces the browser scripting.

– Example : control.GetName() – GetName function returns the control name.

FieldChange(control, field value) modifies the field value of the control.

NameSpace:

– It is the place to maintain all Siebel objects instantiated in client cache.

Class:

– It instances Siebel object with unique name.

– In Javascript, there can be only one instance of a class at a particular time.

Good to know: JavaScript is a class-less language though functions can be used to simulate Class concept. Everything in JavaScript is treated as object.

Constructor:

– It instantiates and defines methods for the class.

Renderer Key Registration:

– It determines what all JavaScript files need to download on the browser.

Now we will discuss Presentation Model Customization step by step with an example.

Example: On Contact Form Applet, if Status field has any value, show the field ‘WorkPhoneNum#’ else hide it.

This is two step customization – first we will build a Presentation Model file to capture the Status field value (in this module) and then pass the value to Physical Render to hide or show the field ‘WorkPhoneNum#’ (in next module).

Steps for Presentation Model Customization:

1) Verify the object class does not exist

2) Add the class to Siebel namespace

3) Define the Presentation Model File location and other dependencies if any

4) Add constructor function within the class

4.1) Declare the class constructor as function

4.2) Inherit the super class constructor

4.3) Declare the class as an extension of default Presentation Model

4.4) Initialize INIT method to add properties and methods to the class

4.5) Add script for the custom method/s

Step 1: Verify the object class does not exist

– First you check whether the class has already been implemented or not. This should be the first statement to avoid any possible conflict.

– Syntax:

if( typeof( SiebelAppFacade.custom_class_name ) === “undefined” ) {

– Script for our example:

// Verify same Presentation Model class is not defined yet

if( typeof( SiebelAppFacade.ShowHideFieldsPM ) === “undefined” ){

Step 2: Add the class to Siebel namespace

– Every class must be added to the ‘SiebelAppFacade’ namespace.

– Use ‘NameSpace()’ function to do this

– Syntax:

SiebelJS.Namespace( “SiebelAppFacade.custom_class_name” );

– Script for our example:

// Add the class to the SiebelAppFacade namespace

SiebelJS.Namespace( “SiebelAppFacade.ShowHideFieldsPM”);

Step 3: Define the Presentation Model file location and other dependencies if any

– ‘Define’ method identifies the modules that Siebel Open UI uses to locate the Presentation Model file and other dependent JS files

– It must have a return statement like return “SiebelAppFacade.custom_class_name”;

– 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 Presentation Model JS file. If there is no dependency, keep it blank.
• Function identifies the function name and returns an object.

– Script for our example:

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

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

Step 4: Add constructor function within the class

4.1) Declare the class constructor as function

4.2) Invoke the super class constructor

4.3) Declare the class as an extension of default Presentation Model

4.4) Initialize INIT method to add properties and methods to the class

4.5) Add script for the custom method/s

Step 4.1: Declare the class constructor as function

– Declare the class constructor as a child of SiebelAppFacade

– It must have a return statement

– Syntax

SiebelAppFacade. custom_class_name = ( function(){
— Writ the code here—
return custom_class_name; } ());

– Script for our example:

// Declare the ShowHideFieldsPM class as function

SiebelAppFacade.ShowHideFieldsPM = ( function(){
— Write the code here—
return ShowHideFieldsPM; } ());

Step 4.2: Invoke the super class constructor

– When Open UI calls a custom constructor, it passes a proxy object. Custom constructor uses this proxy object to instantiate as-delivered objects.

– Syntax

function custom_class_name ( proxy ){
SiebelAppFacade. custom_class_name.superclass.constructor.call( this, proxy ); }

– Script for our example:

// Call the superclass constructor

function ShowHideFieldsPM( proxy ){
SiebelAppFacade.ShowHideFieldsPM.superclass.constructor.call( this, proxy ); }

Step 4.3: Declare the class as an extension of default Presentation Model

– Use SiebelJS.extend() to declare the class as an extension of Presentation Model

– Extended class can access all pre built functions of default PM

– Syntax

SiebelJS.Extend(custom_class_name, SiebelAppFacade.PresentationModel );

– Script for our example:

//Extend the class so that it can access all pre built functions

SiebelJS.Extend( ShowHideFieldsPM, SiebelAppFacade.PresentationModel );

Step 4.4: Initialize INIT method to add properties and methods to the class

– Declare the INIT function of the custom class

Syntax: Custom_Class_name.prototype.Init = function(){

– Call Super class INIT function to initialize as-delivered functionalities

Syntax: SiebelAppFacade.Custom_Class_name.superclass.Init.call( this );

– You can create properties for the class if required

Syntax: this.AddProperty( “Property Name”, “” );

– You can also override super calss methods

Syntax: this.AddMethod( “Name of the method to override”, custom method name, { sequence : false, scope : this } );

– Script for our example:

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

Step 4.5 Add script for the custom method/s

– Write the script for all custom methods, specified in INIT function

– Syntax:

function CustomMethod(){
— Write the code here — }

– Script for our example:

// Custom method to execute when next record is selected

function SelectionChange(){
var controls = this.Get( “GetControls” );
var control = controls[ “Status” ];
var value = this.ExecuteMethod( “GetFieldValue”, control );
this.SetProperty( “ShowHideStatus”, ( value ? true: false ) );
}

//Custom method to execute when field value changes

function OnFieldChange( control, value ){
if( control.GetName() === “Status” ){
this.SetProperty( “ShowHideStatus”, ( value ? true: false ) );
}

Here is the complete script used in the example:

There are few frequently used Presentation Model Methods that every developer should know. We have discussed such methods in an another article – Presentation Model Methods.

This ends our Presentation Model Customization module.

If you have any question about Presentation Model Customization, Please feel free to comment below.

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

<< Module 2: Siebel Open UI Architecture           Module 4: Physical Renderer Customization >>

Watch our YouTube Video on Presentation Model Customization:

In our previous article, we have discussed about what is Siebel Open UI and its benefits. Here we will talk about Siebel Open UI Architecture and its various building blocks. Also we will discuss architectural difference between Siebel HI and Open UI client.

Siebel Open UI Architecture key components:

It includes all components of traditional Siebel client, plus Open UI specific components.

1. Application Object Manager(AOM)
2. Siebel Web Template(SWT) file
3. JavaScript(JS) file
4. Cascading Style Sheet (CSS) file
5. Open UI client
   – Proxy
   – Presentation Model
   – Physical Renderer
6. Manifest file

We will discuss all these one by one.

1. Application Object Manager (AOM)

– This is the most important server component. In Open UI, it behaves exactly the same way like our traditional Siebel client. AOM processes user requests with the help of other components like Data Manager, Siebel Web Engine.

– In our previous module, we have already discussed that below two parameters must be set to TRUE for Open UI Object Manager component.

EnableOpenUI = TRUE
HighInteractivity = TRUE

Our Recommendation: Instead of updating the existing object manager directly, copy it and add above two parameters to enable Open UI mode . Also you create a new virtual directory in Siebel Web Server to support Open UI Object Manager.

2. Siebel Web Template(SWT) file

– Siebel Web Template file defines the layout and format of the elements to display on UI. It provides the placeholders for Siebel objects like views, applets, controls but does not contain any data. These SWT files are nothing but HTML files with Siebel tags. Siebel Open UI uses newer version of SWT files that no longer contain any explicit layout information.

Original SWT file has explicit tags like tables, boundaries where Open UI SWT file has ‘div’ tag. It allows CSS files to control the layout.

– SWT files are located under \siebsrvr\WEBTEMPL

• WEBTEMPL folder contains original SWT files
• OUIWEBTEMPL folder, inside WEBTEMPL contains Open UI related SWT files
• CUSTOM folder, inside OUIWEBTEMPL contains all custom SWT files

To know more about Siebel Web Template, read this: Overview of Siebel Web Templates

3) Cascading Style Sheet (CSS) file

– CSS is a style language that defines the layout of web pages, such as font, color, height, width

– Benefits of CSS:

• Reusable, one CSS file could be used for multiple web pages
• Modify style definition in one place and change will be reflected in all web pages
• Different layout for different media types like mobile, desktop
• Easy to build, notepad is sufficient to write css file

– Open UI uses CSS to build the layout of HTML files dynamically.

– CSS files are located in the web server under \webmaster\files\<lang> and \eappweb\PUBLIC\<lang>\FILES.

– For Siebel developer client, path is \client\PUBLIC\<lang>\files.

4) Java Script (JS) file

– JavaScript is a client side programming language used in web applications. It enhances the users experience of the web pages.

– In Siebel Open UI, JS files are used to add client side businessand validation and render the application in the web browser

– Oracle provided JS files deliver out of box functionalities. Developers can build custom JS files to leverage the functionalities.

– Beside Javascript, developers can use JQuery also.

– JS files are located in Siebel Server under \siebsrvr\public\<lang>\<build>\SCRIPTS

• SCRIPTS folder contains original (High Interactivity) JS files
• siebel folder, under SCRIPTS contains Open UI related vanilla JS files
• custom folder, under \SCRIPTS\siebel contains all custom js files
• 3rdparty folder, under SCRIPTS contains all 3rd party provided js files

– For Siebel developer client, JS files are located in \client\<lang>\<build>\SCRIPTS

Note: Traditional browser script is different from Open UI related JavaScript. Developers can use both in Siebel Open UI. But Oracle recommends to use JavaScript only for client side validation.

5) Siebel Open UI client:

– Open UI client is a Siebel engine that runs within the browser to enhance user experience and data validation

• Binds data to the presentation layout
• Caches data locally
• Applies client side business logic

– It consists of 3 elements

• Client Proxy
• Presentation Model (PM)
• Physical Renderer (PR)

5.1) Client Proxy

– It works as an interface to the Siebel Server.

– It gets run-time data and metadata from Siebel server and passes it to Presentation Model.

• Run-time data is the actual data from Siebel database that users see in views/applets
• Metadata specifies the column name and other details like required, readonly

– It is Oracle provided and must not be modified by users.

5.2) Presentation Model

– It is a JavaScript file that determines what business logic to be applied on metadata and run-time data coming from Siebel server.

– It captures client interactions such as

• Did the user leave a control?
• Did the user click on the link?

– It is collection of Properties and Method

• Properties: It contains information about current state of each user interaction.
• Method: It defines the characteristics that modify the state of the object. For example – if user chooses value A for the field X, then apply method to hide field Y.

– It supports different logic for different platforms

5.3) Physical Renderer

– It is a JavaScript file that Open UI uses to render application on the browser
– It can display the same set of records in different ways

• List Applet
• Carousal
• Calendar
• Mind Map

– Like Presentation Model, it also supports different behaviors for different devices like Desktop, Mobile

6) Manifest file

– It uses an unique key to determine which JavaScript file/s to download to the client

– Earlier version of Siebel Open UI Innovation Pack 2013 (8.1.1.11) has three manifest files under \seibsrvr\OBJECTS directory

• Core_manifest.xml: As delivered listing of JS files and should not be modified by developers
• Custom_manifest.xml: It specifies the key name and JavaScript file mapping
• Manifest_extensions.map: It is the place to register Applet/key combination

– From Open UI Innovation Pack 2013, you do not need to modify manifest file anymore. Rather you configure it from Open UI client itself – Administration-Application||Manifest Administration.

We will discuss more about Presentation Model, Physical Renderer and Manifest File in subsequent modules.

Graphical presentation of Siebel High Interactivity Architecture Vs Siebel Open UI Architecture (Source: Oracle)

Major changes in Siebel Open UI Architecture:

1. Open UI supports all modern browsers, not just Internet Explorer
2. ActiveX controls are replaced by JavaScript controls
3. ActiveX proxy is replaced by JavaScript proxy
4. In Siebel Open UI Architecture, layout is not part of Siebel Web Templates any more

So far we have discussed various building blocks of Siebel Open UI Architecture and how it differs from Siebel HI client. If you have any doubt, please fell free to comment below.

Next we will discuss the architectural flow with an example – Navigating to My Opportunities view. Suppose you have clicked on ‘My Opportunities’ to open My Opportunities View. Now Siebel Open UI performs below steps to render ‘My Opportunities View’ on the browser.

Step 1: Presentation Model passes the request to the client proxy

Step 2: Proxy sends the request to Siebel Server

Step 3: Siebel Server processes the request and sends the result back to proxy

Step 4: Proxy reads the manifest file and downloads all required JS files

Step 5: Presentation Model applies the business logic on the result set and sends it to Physical Renderer

Step 6: Physical Renderer prepares the final HTML file with the reference of CSS files

Step 7: Result is displayed on the browser

Step 1: Presentation Model passes the request to the client proxy

– Presentation Model captures the event ‘on mouse click’ and sends the request to client proxy

Step 2: Proxy sends the request to Siebel Server

– First proxy checks the client cache memory for the necessary data to fulfill client request

– If required data is available in the cache memory, it directly goes to Step 4. Otherwise proxy sends the request to Application Object Manager on Siebel Server to get the record set.

Step 3: Siebel Server processes the request and sends the result back to proxy

– Application Object Manager processes the request and sends back the record set to proxy

– Record set contains metadata and runtime data

• Metadata: Object definitions like Columns, Applets, Views
• Runtime data: Actual user data from Siebel database

Step 4: Proxy reads the manifest file and downloads all required JS files

– Proxy reads the manifest file and downloads all JS and corresponding CSS files to display opportunity records.

Step 5: Presentation Model applies the business logic on the result set and sends it to Physical Renderer

– Once data is received and files are downloaded, Proxy sends the notification to Presentation Model

– Presentation Model executes JS files to apply business logic on received data

Step 6: Physical Renderer prepares the final HTML file with the reference of CSS files

– Presentation model sends the notification to Physical Renderer to generate HTML files with the reference of CSS files.

Step 7: Result is displayed on the browser

– The final HTML page ‘My Opportunities View’, embedded with JavaScript, CSS and Data, is displayed on the browser.

This ends our module 2 on Siebel Open UI Architecture. Hope you have got a fair understanding!

If you have any question regarding Siebel Open UI Architecture, Please feel free to comment below.

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

<< Module 1: Siebel Open UI and its benefits   Module 3: Presentation Model Customization >>

Watch our YouTube Video on Siebel Open UI Architecture:

Drag and Drop data migration in Siebel Open UI list applet –  sounds interesting?

Well,

You know, data migration is an integral part in any project. Most of the cases, data migration is performed by developers.

But what would you say if end users can do data migration instead of developers?

Let me explain:

With every innovation pack, Oracle releases new and exciting Siebel Open UI features.

One of such features is – Drag and Drop data migration in list applet.

This Siebel Open UI feature was first introduced with Innovation Pack 2013.

Bear with me, because I’m going to show you it works…

You know,

To import data from a spreadsheet into Siebel application, you can use EIM Import or COM object or Business Service.

However, EIM is the most preferable and reliable process for data migration in Siebel.

But,

Main drawback of all three approaches is that none of them can handle adhoc data request.

What does that mean?

Let’s assume a business scenario:

Suppose a company runs campaign on adhoc basis and captures prospects’ details.

Now to process further, company needs to bring those prospects into Siebel system.

So, either employees of that company have to do manual entry or give the data file to Siebel experts.

Bottom line is that to start work on prospects, company has to wait some time.

That’s not good!!

I know,

You can write batch job or business service to automate the process but that has also a limit. You can not build EIM job for every future data file.

Now imagine another scenario:

A company has a preformatted spread sheet for all employees to capture prospect details. Employees enter details in that spread sheet and just drag and drop it in Siebel application to import data.

Less dependency and no waiting time!!

Isn’t that great?

Let’s see how we can drag and drop records in Siebel Open UI.

A word of caution:

This drag and drop feature works only in list applet, not in form or tree applet.

To discuss all steps, we have built a sample spreadsheet that we will try to import here.

Steps to drag and drop data migration in Siebel Open UI:

Step 1: Verify List Applet

Very first step is to get the list applet name where you want to activate this functionality.

You know how to get the applet name, right?

Just navigate to that applet and click on Help –> About View.

As we are trying to import account records here, our applet name is ‘SIS Account List Applet‘.

Step 2: Add applet user properties

To enable this feature for a particular applet, you must add two new applet user properties.

So, you login into Siebel tools and query for the applet in Object Explorer.

Now, add above two applet user properties and compile it.

Remember:

User property ‘ClientPMUserProp‘ can have more than one value. You use comma as separator to add new value.

Now, the list applet is ready for drag and drop data migration.

Step 3: Identify mandatory columns and compare with spreadsheet

You know, almost every object like Account, Contact, Opportunity has few mandatory fields. Such fields are marked with a red asterisk ∗.

During data import, you have to take care all these required fields, otherwise it will fail.

So, before dragging records, make sure that all mandatory columns are present in the spreadsheet as well as record set.

In our example, Account Name is the mandatory field that we have to take care.

Important notes:

• Data rows should start immediately below column header row in the spreadsheet.
• Sequence of column headers in the spreadsheet does not matter. You can include column header in any order but name should be same as list applet column name.

Step 4: Verify Drag and Drop data migration functionality

To test Drag and Drop functionality, you select the cells that include header and data rows in the spreadsheet and drop it in the list applet.

Siebel can take some time to complete the job if the record set is large.

Once the process is completed, verify records have been created or not.

You can see in the below image. We have two accounts in data file as well as application.

If you are using Microsoft Excel, then follow below steps to drag and drop records

• Position the cursor over a corner of the selection area until MS Excel displays the cursor as a four-way arrow
• Right click and hold down the right mouse button
• Drag and release the selection area in the list applet

Wait!!

It’s not over…

You must read below important points –

1. Using drag and drop functionality, you can not import data in MVG field. If the selected record set has any column to populate MVG field, import process will fail.

So before importing data, make sure that there is no column for MVG field in your spreadsheet.

2. You must take care static picklist values also. If the spreadsheet contains values for any static picklist field and it does not match with any of LOVs, Siebel will throw error – ‘Wrong field values or value types detected in field XXX‘.

So before importing values for picklist field, make sure that same value is already present in LOVs.

3. Though the column header sequence in the spreadsheet does not matter but header name matters a lot. It should match with applet column name.

4. If a column is not displayed in list applet, data for that column will not be imported. However, data for other fields will be imported without any error.

5. Siebel will throw user key error if you try to import more than one record with same set of user key values. But all other records will be imported without any error.

Now it’s over…

Though it is not frequently used Siebel Open UI feature, but quite interesting.. isn’t it?

It can save time, also increase productivity.

Frankly speaking,

We have never activated this drag and drop data migration method in production environment for any customer.

If the end users do not take care data migration properly, it may cause data integrity issue also.

What about you?

Do you think, this drag and drop Siebel open UI feature can help customers to speed up process? Will it create more data related issues?

Please leave your feedback in the comment section below.

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

<< Customize Server Busy error in Siebel              Highlight required fields in Siebel Open UI >>