OpenUI Rendering Performance: Dummy Toggle Applets to the Rescue

This the the teaser…

 

This post actually can be considered a workaround. On the other hand it provides end-user functionality. As most of you will know IP13 comes with the configurable option for “Collapsible Applets“. Just adding two Applet User Properties does the work to make an applet to appear either expanded (default) or collapsed. Though this is very nice, collapsing the applet will only happen once most of the OpenUI code has completed execution. In that sense if you would collapse all your applets in any view, it would take almost the same amount of time to render the view.

Now, I wanted to figure out an option which would reduce rendering time by showing collapsed applets. Why? Because large views in Siebel Open UI tend to require linear more time to render (see my previous post). And we do have many existing customers which have build such legacy views in the past which would render just fine in High Interactivity, but are less acceptable in Open UI.

What I came up with is the option to use traditional toggle applets. For my noticeable expensive view from my previous post I created a whole bunch of “dummy” applets. Just empty shell form applet with no controls exposed. The nice behavior here is that rendering the dummy toggle applets obviously would come at considerable less execution time.

One “dummy” applet for any applet I want to expose. Why one for each? Because the hard-coded configuration of the “Toggle” attribute on the applet. But since it pertains here just a bare-essential applet that is not such a big deal.

dummyapplets dummapplettoggle

So far so good. But traditional toggle applets require the clumsy use of a combobox to toggle between applets. Perfectly fine if you have a whole list of potential toggles. But in this case I want to present the user with a more user-friendly “double-click” to toggle from the dummy applet to the actual applet.

After inspecting (or say: reverse-engineering) a bit the OOTB code concepts, I found a way to actually invoke the Toggle method within a physical renderer.  It took some time to get this particular part of the solution to work 😉

TogglePR1

I put the code within tine BindEvents funcion of my custom “togglepr.js”. After reverse-engineering other OOTB code – I found that using the “OnControlEvent” method on the Presentation Model would be best suited. The nice thing here is that BindEvents will pass the PM context along, which you can access using the data.ctx object. The ctx object will get you the presentation model.

Next invoking the Toggle should be best-practice done using the constant defined by Siebel for this method “PHYEVENT_INVOKE_TOGGLE”. Finally we need to pass the sequence of the applet we would like to toggle to. In our case “1”.

I decided only to implement uni-directionally toggling (from dummy -> actual applet, but not back to the dummy applet). That keeps things easy.

Next I wanted to have clean and crisp dummy applets. So no “Toggle” combobox, no “Menu” and now Row Counter.

TogglePR2

Removing the toggle combobox and the menu was easy.

Removing the row-counter caused more troubles. It appears the row-counter is inserted at a very late stage. After the ShowUI of my custom physical renderer completed execution.

Using setTimeout brought the solution. This function can be found on several location in the Open UI standard code, and is standard JScript function. You pass it two arguments, a function and a sleep time. Functionally, if you provide a sleep time of “0”, it will execute after all other JScript code has completed.

Because I also did not want the Toggle combobox on the actual applets, I needed to add some further logic using ClientPMUserProperties. I created two:

TogglePR3

The “BareEssentials” property will remove the complete div for all applet content. The “HideToggle” property will remove the Toggle combobox.

Just for sake of the POC I added these two to the OOTB pmodel.js. This is obviously not a recommended practice for production. But it saved me time creating a custom presentation model extension.

TogglePR4

The end result is that the initial view looks as such:

dummyview

By double-clicking on any of the headers, the applet will toggle. Double-clicking on e.g. “ToggleCAC” will render the view as such. And this will execute very fast too, as it only partially refreshes the view instead of rendering the complete view.

dummyview2

You can grab the complete physical renderer here.

Advertisements

4 thoughts on “OpenUI Rendering Performance: Dummy Toggle Applets to the Rescue

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s