Create interactive dashboards with InterWindow Communication (IWC)

In a previous post I mentioned a new feature of PeopleTools 8.52: Dashboard. With this feature you can create custom dashboards with pagletes that provide information about a certain business area. Oracle didn't stop here and also added Interwindow Communication (IWC).

Interwindow communication is a frame-to-frame messaging mechanism that enables browser window objects—such as pages or pagelets—to be aware of and react to field-level data changes that occur in other window objects that share the same browser window. Interwindow communication enables you to publish field-level changes as they occur so that any subscribing page or pagelet becomes instantly aware of the change and then, can act on it in real-time. Administrators, subject matter experts or application developers configure page fields to respond to either changes in value or a mouse click. When the triggering event occurs, the application posts a string-formatted message. Because of partial pagelet refresh functionality, subscribing pagelets can then respond within the context of the data contained in the message. Interwindow communication supports component-based pagelets and noncomponent-based pagelets (iScript-based or other Pagelet Wizard pagelets).

How does it work?

1. Triggering event occurs on Pagelet A.
   User clicks a button or link or changes the value of a field that is configured to publish.


2. IWC generates message.
   Simple string formatted message temporarily stored to IWC-related table.


3. Pagelet B reads message.
   Listener checks to see if loaded pagelets subscribe to the message.


4. Determine whether update action is necessary.
   Check the document object model of the pagelet and run a field change event if necessary.


5. Determine whether refresh is necessary.
   If configured to refresh, page refreshes partially or with new parameters.

I will elaborate IWC with the following example.

Create 2 components, that will be published as pagelets. Pagelet A will have two prompt fields, SETID and DEPTID.  IWC will be configured to publish these fields when field DEPTID is changed.

Pagelet B will have fields SETID and DEPTID on level zero and on level one an grid with Employees on that department. IWC will be configured to subscribe to the publishing event of Pagelet A. Fieldchange on field DEPTID on pagelet B will flush and reselect the employees on the grid every time the field DEPTID is changed in pagelet A.

Create pagelet A

Start off by creating a page and setting the field that trigger the IWC publish to interactive  mode. Also add a Page Field Name. The Page Field Name will force the HTML name of this field to be the same as the Page Field Name, otherwise PeopleSoft will change the HTML field name to something like [PAGENAME]_[FIELD]. IWC will be configured on HTML field names, so this will help us to have the correct HTML field name.

Add the page to a component and add the component to a menu, but do not run the Register Component Wizard. We will create a content reference of type Pagelet manually. Go to Main Menu - PeopleTools - Portal - Structure and Content and add a new content reference in (sub)folder Root - Portal Objects - Pagelets.

Set Usage Type to Pagelet and set URL Type to PeopleSoft Component and enter the Menu Name and Component Name of the publishing component/pagelet.

Create pagelet B

Same a pagelet A, create a page with SETID and DEPTID on level zero and add a grid with employees. Set the field style of SETID and DEPTID to PTTRANSPARENT, this will make the fields non-visible to the end-user , but still visible to HTML.

As with the publishing pagelet, add this component to a menu and create a content reference to this component of type Pagelet.

Dashboard

Now you can add the pagelets to a custom dashboard. Go to Main Menu - PeopleTools - Portal - Dashboards - Manage Dashboard Pages and create a new dashboard and add the pagelets to the dashboard.

Configure IWC

To configure IWC publishing and subscription on the pagelets, we first need to know the HTML field names. We already had set the Page Field Name in Application Designer, but to be sure, we will verify the HTML field names. Best way to do this, is to have Firefox installed with Firebug extention or to have Google Chrome installed. IE doesn't show the HTML field names using View Source.

In the screen above I used Chrome and rightclicked on the field DEPTID of the publishing Pagelet and selected Inspect Element. This will bring up the HTML source code and the HTML field name of the field. Do this for all the fields, that will be used in the IWC publishing and subscribtion.

Now that we have retrieved the HTML field names, we can configure IWC.

Go to  Main Menu - PeopleTools - Portal - Inter Window Communication and add a new entry for the Portal Object Name of the publishing pagelet.

Suppy an Event Name and Message Type Pub. Set Event to Change or Click (both seem to work) and set HTML Field Name to the field with will be publising the message. Set message data to all the fields you want to publish separated by a comma.

Now create another entry  for the Portal Object Name of the subscribing pagelet.

Set Event Name to the same event name as the publishing event. Set Message Event Type to Sub and set Event Type to Partial refresh. This wil refresh only the fields that are changed, instead of refreshing the entire pagelet and will trigger the FieldChange PeopleCode event.

See it in Action

See following sneak preview of a dashboard with IWC, which I will be demoing on Oracle Open World 2012