Open UI Video Series - Example for View PM and PR

In this video, I have a use case to fix a vanilla issue. In Home page view, the Edit Layout functionality is not working. If we edit the order of applets, the applets does not get reordered. For this, I have used a custom view PM and PR and a custom user preference to save the order of Applets.

  

Open UI Video Series - Using Applet Custom User Preferences

In this video, I have discussed about using custom user preferences for applets. I have explained example in bookshelf to expand or collapse applet and save the state of applet in user preferences and reuse the same on applet load. The preferences get saved even after the user logs out of application.

Open UI Video Series - Debugging Application level JS files

In this video, we will discuss about how to debug Application level JS files like Postload.js file, Plugin Wrapper files etc. These files get downloaded as XHR requests and will not be available in Sources tab in F12 window. 

Open UI Video Series - Available functions in Init Method in PM

In this video, we will walk through the list of available functions in Presentation Model's Init method. We will look at AddMethod, AddProperty,AttachEventHandler, AttachPreProxyExecuteBinding,AttachPostProxyExecuteBinding functions.

Open UI Video Series - Using Browser Console

In this video, we will understand how to use browser console to debug scripts, observe objects, properties, functions, call functions and see output. 

Open UI Video Series - Structure of Custom PM/PR file

In this video, we will walk through how a custom PM/PR file looks like. What does each line of code mean. We will understand how to extend a class.

Open UI Video Series - Some Basic Selectors

In these videos, we will learn some basic selectors for writing CSS and JQuery code. We will learn how to select an element by using its id, class, attributes, combination of selectors, child selectors, siblings selectors.

Open UI Video Series - Conditionally Hide or Show fields (Bookshelf example explained)

In this video, we will walk through the bookshelf example where we conditionally show or hide fields based on another field value in a form applet. Here we will use PM Init method and PR ShowUI methods.

RESTful Web Services in Siebel IP16

Since reading the data sheet for Siebel IP16, a lot of us are curious about what is RESTful services. Well, till now Siebel did not provide support to REST web services. But what is REST and how different it is from SOAP?

SOAP is a protocol. It actually exposes logic as a service. It uses XML only to communicate data. SOAP is more secure than REST.

REST stands for Representational State Transfer. It exposes data as a service.

You can directly perform CRUD (Create, read, update, delete) operations directly on objects. It can use XML, JSON or other mime types. 

Consider this example. If you want to show Contacts in an external portal, you create a SOAP Web Service. In the web service, we call a Siebel Business Service or Workflow and query contact information. You are actually exposing a business service (logic) to external system. 

Using, REST, you call the Data object directly. While reading through Siebel Application Integration for Oracle Fusion Middleware Guide, I found a sample URI for REST. This uses Oracle Web Logic Server to communicate to Siebel App Server. 

http://myserver.mycompany.com:port/oracle-crm/api/rest/siebel/siebel.JNDI_ra_name/

Account_EMR/searchexpr=[IntCompName.IntCompFieldName] LIKE 'A*'

If you look at the above URI, you are requesting the URI with the search spec and the object (Account_EMR) to search directly. 

You are not calling a service, but data directly. This makes REST lightweight. Ideally, if you are exposing your data in a mobile app, REST will fit this perfectly than SOAP. If you look at Salesforce application, it uses REST services. Even the URL contains the object name and Id in the similar format. 

Coming back to Siebel, if you are wondering how to call REST services, REST services are called using HTTP requests. A request can be GET,PUT,POST,DELETE. A HTTP request can be called from Java, Javascript etc. You can find a lot of examples on internet about how to call HTTP request. 

Siebel RESTful API promises a lot. 

• It is going to support Business Component CRUD operations without the need to create IO at all. 
• It is going to support Business Service calls. 
• It also supports repository metadata CRUD operations. (That means you can edit a applet layout from another application)

This means Siebel is going to get more AWESOME. You can reflect whatever data you have in Siebel in a JAVA app, Android, iOS or Micorsoft app. 

I am eagerly waiting for REST API guide to come out. First use case would be asynchronous loading of an applet in a view using REST!! Will that be possible, lets see.

Understanding Siebel Open UI OOPS

Siebel Proxy Objects, PM and PR

Siebel SRF has all the information about the UI objects like current view, applets, applet controls, toolbars, menus etc. In Siebel Open UI framework, a mirror of these UI objects are created as JavaScript objects using JS files. Siebel has built these objects to store object data and behavior.

Everytime a view loads, the vanilla scripts run a command to create current view object and create child applet objects etc.

Let us take this analogy. Consider we are building a shooting video game. We want to build a game where some shooters are shown in UI, they do actions like shoot, run etc., each shooter has life points, bullets count etc. In object oriented approach, we create an object called shooter. This would be our prototype. Whenever we need a shooter, we create a new shooter like this

Shooter test = new Shooter();

We assign some logic to our scripts so that the objects behave in certain order and remember some data.

Similar to this, Siebel Open UI framework is object oriented. We have scripts like applet.js, view.js, appletcontrol.js etc. These files are our prototypes. Along with our objects, we have a Presentation Model and Physical Renderer files like viewpm.js, viewpr.js, pmodel.js, phyrenderer.js etc. Presentation model is the brain of the object. It stores the objects data and logical actions. Physical render is the body. How the object should look in UI and what action in UI should trigger which logical action in PM. PM and PR are linked.

For an applet, PM knows what controls are available in an applet. PM sends this information to PR. PR is the file that draws the controls in UI. If a user clicks on a button, PR listens to the click event and it invokes a logical event in PM. For example, it communicates a physical click on button to PM to make a logical event like NewRecord.

Now, we understand that each object has PM and PR. If we want to extend or override a functionality or behavior, we need to extend the vanilla PM/PR files and build our logic.

We use OOPS concepts like Inheritance (we write a custom PM/PR that inherits vanilla PM/PR thus acquiring all the Properties and functions), Polymorphism (we have the same method in different applets but each behave differently, we override behavior), encapsulation (capsulate the data and code together in one unit, we have one PM object that has Properties and Methods)

Snippet to Get 'All' PM properties for an Applet

If you have been working Open UI, you must have come across 'Get' method in PM. Now, the Get method will have different properties for different types of applet. The list varies for Form Applet to List applet. Also, you can add more properties in your custom code. If you want to see what properties are available, you can use my code snippet below.

1. Click on the applet you want to see the properties. (this sets the applet as active applet)
2. Go to F12 window, click on Sources tab. Go to Snippets sub tab. Create a snippet by right clicking and select New.

3. In the window, add below code.

var pModel = SiebelApp.S_App.GetActiveView().GetActiveApplet().GetPModel();

var PArray = SiebelApp.S_App.GetActiveView().GetActiveApplet().GetPropArray();

var tablecol1 = new Array();

var tablecol2 = new Array();

for (var i=0;i< PArray.length;i++){

    tablecol1.push(PArray[i]);

    tablecol2.push(pModel.Get(PArray[i]));

}

var tableArr = new Array();

for (var i=0;i < PArray.length;i++){

    tableArr.push([tablecol1[i],tablecol2[i]]);

}

console.table(tableArr);

4. Right click on the snippet source and select Run. Check your Console Tab and see all the properties available.

If you see values like Array[5], Object or an , they are actually Javascript objects or Arrays that you can inspect further. In the console, you can expand the Array at the end and check the properties.

Alternatively, you can check each property by typing in tableArr[index] where index is the number in first column.

Example is given below.

You just need to add this code once. It will be available in all other windows. All you need to do is set your applet as active applet (click anywhere on applet) and run the snippet!!

Let me know if you find this useful ;)