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 ;)

Open UI Video Series - What and Where to Customize in PM & PR

In this video, I have discussed about what functions to customize for certain requirements. I walk through a list applets functions and show you which function does what. 

Open UI Video Series - PM & PR Order of functions and what they do!!

In this video, I have discussed about the Order of execution of functions and what these functions do.

Open UI Video Series - Overview of how a view is rendered

In this video I have discussed about how a view is rendering in the UI.

Open UI Video Series - How to use F12 tools

In this video, I am going to discuss about the overview of how to use F12 developer tools for chrome.

Open UI Video Series - some basics on Javascript

Below is a video I made on some Javascript basics in Open UI

Open UI Video Series - What Open UI uses to build its UI

Below is a video I made on Open UI basics

Open UI Video series - Some background on Open UI

Below is a video I made on Siebel Open UI background

SIEBEL 15: Web Tools Composer!!

Ever imagined Siebel without SRF compilation?? Well, it will be a reality too soon. Yes, Web Tools is here. With Siebel IP 2015, Oracle has introduced a new application called Siebel Web Tools (CFG file is swtools.cfg). It is a web application we can use to configure our application. 

You can actually do your configuration in this application, publish your changes and lo, you have the modifications ready to use. 

After I installed Siebel 15, I modified the swtools.cfg to open the application. This is how it looked. 

You can select any entity to modify from top left corner and select the object. 

Edit the entity as you do in Tools. Then just go to Administration - Runtime Configuration and publish your changes. No compilation!!

Now, Siebel has this only for developer preview in IP 2015. I am not able to do Publish in Sample DB. This is not enabled in Sample DB. Check out above video for a demo.

What Siebel actual did is, create repository object based views just like the ones in tools (In tools, go to Help menu --> About View) to an application. Interesting part is the Runtime Configuration where the data is written to runtime tables. 

It will be interesting to see how this is going to change the way we develop Siebel apps in the future. 

Siebel Open UI Vertical Scrollbar: Create Scrollbar virtually!!

I have already written posts on how to rotate the horizontal scrollbar to look like a vertical scroll bar. But still this does not look and feel like a scrollbar. So I tried making to have a complete scrollbar. Here are my findings. 

I tried modifying the jqgridrenderer.js file to have jqgrid to have virtual scrolling. But the siebel applets are designed to hold only the html number of rows records at a time. Each time we click on next recordset button, it fetches the next 10 records. If I comment the line $("#pager_" + placeHolder + "_right div").hide(); in jqgridrenderer.js, I see view 1-10 of 10 records not the full record count in the applet. This means that the applet has 10 records in the grid. I also commented $("#sp_1_pager_" + placeHolder).parent().css("display", "none"); in the same file and observed that it says  Page 1 of 0 . This means that there are no more pages to have virtual scrolling. 

This concludes that virtual scrolling is not possible. One way we can have it is define the HTML number of rows in applet to say 500 and keep the height of applet to 10 rows only (appx 240px). You can see a scroll bar upto 500 records then you need to click on the horizontal next record set button. This is ofcourse impacting performance. 

I tried to do something different. Why can't I build a scrollbar itself. It just needs to buttons and a slider bar, functioning just like a scrollbar. I have a try and finally able to crack something out. The scrollbar looks like this. 

And it did work, but only just.

The idea is in PR showUI and BindEvents method, add the html to show three images (up arrow, down arrow and slider bar). On click of the up and down arrows, move the slider up and down. The problem is that how much distance should the slider move. As of now, I moved the slider to middle of the scrollbar and left it there if there are any more records in previous set or next set. If there are none, I moved the slider to either end if the scrollbar. 

Here is the PR file. Note that the images are also need for this. Check the video of how this looks here.

Update: PR file for IP 2014 and above is here. Thanks to Sri for sharing the updated PR file. 

Cheers!!