Tuesday 8 July 2014

Open UI Customization - Part 2 - understanding Manifest

If you are new to Open UI and haven’t read my previous previous blog:Open UI Customization - Part 1 – Intro, please do so. In that I have discussed, how Open UI differs from Siebel High Interactivity framework and introduction to PM and PR – which will be discussed at length here.

With Open UI framework, you can control the business logic and UI at the client browser side for below objects:

  • Views
  • Applets
  • Screen Tabs
  • Tool bar
  • Application Menu

PM-PR

Siebel Open UI uses the presentation model (PM) and the physical renderer (PR) to separate the logical user interface from the rendering. This configuration allows you to modify the user interface without having to modify the logical structure and behaviour of the client.

For example, you can modify a PM to add a list column in a list applet so that it iterates through list columns and renders them without modifying the PM. This column can reside on the client even if the Siebel Server contains no representation of it. Similarly, you can modify the PR to use a third-party, grid-to-carousel control to display a list applet as a carousel without modifying a PM.

Manifest Administration

Before we start building our own PM and PR js files to customize the look and feel of an applet/view etc, let’s first understand how Open UI identifies the required js files to render a specific UI element – applet, view, screen.

A manifest is a set of instructions that Siebel Open UI uses to identify the JavaScript files that it must download from the Siebel Server to the client so that it can render screens, views, and applets.

In order to administrator Manifest, from 8.1.1.11 onwards, Oracle has provided dedicated admin screens. The model is completely different in prior 8.1.1.9-8.1.1.10 releases – which I won’t be covering here.

image

Step 1: register custom js files

Navigate to Sitemap –> Administration – Application –> Manifest Files

Click New to create a new record and provide the path of your custom .js file as shown below.

image

Step 2: Associate custom js to PM and PR of your applet/view/application etc

Navigate to Sitemap –> Administration – Application –> Manifest Administration. While you are here at Manifest Administration, observe how the vanilla configuration looks like.

Search for Type: Application. You should find two entries as shown below.

Name PLATFORM INDEPENDENT: The js files listed here are downloaded the device irrespective of the device and platform (windows, unix, IOS, android) etc

Name PLATFORM DEPENDENT: The js files listed here are downloaded depending on the device and platform.

image

Object Expression applet: Here you define Expressions to determine the type of device/platform accessing Open UI and depending on this, all the js files listed under Files Applet will be sent to client browser.

image A group expression is a type of expression that Siebel Open UI uses to arrange sub-expressions into a group in the Object Expression list.

For example, “Siebel ePharma Mobile Offline Phone” group uses the AND operator to group three expressions into the following group expression: ”Siebel ePharma Mobile” AND Phone AND Offline

imageimage Siebel Open UI uses the Level field to determine the order it uses to evaluate expressions. In the screenshot attached, it uses the following sequence:

Evaluates the “Siebel Service Portal” group first.
Evaluates the “Siebel ePharma Mobile Offline Phone” group next.
Evaluates the “Siebel ePharma Mobile Offline Tablet” group last.

It uses the Level field within a group to determine the order it uses to evaluate each
subexpression

imageSiebel Open UI uses the Files list to identify the files it must download.

If above seemed complicated – let’s take a simple example. Let’s say we have customized Contact Form Applet and we have below js files.

  • For PM - siebel/custom/ContactPModel.js
  • For PR - siebel/custom/ContactRenderer.js

Follow step 1 to register above js files. Now, let’s see how we register above js files to Contact Form Applet.

To register your custom PM - ContactPModel.js file.

  • Create a new record under UI Objects and pick below fields.
    • Type: Applet
    • Usage Type: Presentation Model
    • Name: Contact Form Applet <your applet name here>
  • Now, add Object Expression. Since, this customization is for Desktop applications only. Create a new record and add below fields.
    • Expression: Pick Desktop
    • Level: 1
  • Now, associate your ContactPModel.js to above Object Expression. When all done, it should look like below.

image

  • For above steps to register your ContactRenderer.js. Only different is the Usage Type in this case will be “Physical Renderer”. It should look something like below,

image

Now let’s see the end-to-end journey as to how Siebel Open UI Renders a View or Applet: Imagine, you have customized PM and PR for a Contact Form Applet and you have those js files registered under Manifest administration as explained above. Now, user attempts to navigates to the Contact Form applet and below actions would happen.

  1. Siebel Open UI creates the view that displays this applet. This creation is similar to how Siebel CRM creates a view in high-interactivity mode.
  2. Siebel Open UI references the manifest to identify the files it must download to the client
  3. Siebel Open UI downloads the JavaScript files it identified in Step 3 to the client.
  4. PM formats the data and applies application logic.
  5. PR registers itself with a corresponding object. A presentation model also does this registration.
  6. Siebel Open UI loads the cascading style sheets according to entries that the theme.js file contains.
  7. Siebel Open UI uses PM, PR, and CSS files to render the Form Applet.

Above are the baby steps towards understanding the end to end flow. In the next blog, I will be explaining another baby step to change the logo on your application.

Till then, happy reading!

Shiv

No comments:

Post a Comment