Siebel Open UI: Collapsible Applets - Another Revisit

By Jan Peterson

During a presentation to the technical team of a customer who is in the progress of updating to Open UI, I showed how easy it is to make all applets collapsible by just adding some code to a postload event handler.

We have looked at the general concepts in an earlier post:

postload.js

I quickly received a follow up question if it is possible to collapse applets automatically in case the applet doesn't have any records. As often in the new world of Open UI, the solution is very easy.

Replacing

oAppletPModel.SetProperty("defaultAppletDisplayMode", collapsed");

with

oAppletPModel.SetProperty("defaultAppletDisplayMode",
oAppletPModel.Get("GetNumRows") > 0) ? "expanded" : "collapsed");

does the job :-).

A few notes:

• In the example I updated postload.js. For a production environment it is recommended to have a custom file that subscribes to the postload event..
•  The postload event is only triggered if a user navigates to a new view or reloads the current view. If a child applet has no records and the user selects a different parent record which has some records in the child applet, the applet doesn't get automatically expanded. This can be achieved as well but requires some additional logic.
• Not all applets support the "Default Applet Display Mode" user property. An example are most applets on the vanilla home views.

In summary, IP2013 makes it easy to make all applets collapsible and allows to add some additional logic around it.

Siebel Open UI: View PRs - a Toolbar to quickly access Applets

by Jan Peterson

In a previous post we already looked at physical renderers for views. Today we look at an example that was in a similar form part of the first pre-beta demos of Open UI (yes - the version that was shown during OOW 2011 :-) ) - a toolbar of buttons where each button represents an applet.

In our example, clicking the button will collapse all other applets (which is slightly different to the OOW 2011 demo where the corresponding applet was floating to the top):

Click to enlarge

The code structure of the PM is essentially the same as in the previous example:

Click to enlarge

Most of the logic resides in SetRenderer:

Click to enlarge

First, we create two buttons - one for collapsing all applets and one for expanding all applets.
Afterwards, we iterate through all applets and make sure that they are collapsible - a trick we looked at in a previous post.

Afterwards we create a button for each applet. The button-text is the label of the applet. As a small gimmick we add the number of records in the applet to the button-text. Pressing the button calls the method CollapseApplets which will collapse all applets but the applet linked to the button.

Finally, we inject the different buttons into the view.

In summary, View PRs allow to easily add additional UI features to views. In the example we create a toolbar which simplify access to applets in complex views.

have a nice day

Jan

Siebel Open UI: View PRs - Sort 'em out

Thanks to Jan again for this guest article

***

In prior releases of Open UI most configurations were limited to a single applet. Presentation Models (PMs) and Physical Renderers (PRs) could be reused for different applets but - apart from CSS changes - there was no documented way to provide changes outside of applets or enable configuration that spawned more than a single applet. Most of the time such changes ended up in the (undocumented) postload.js.

A feature that didn't make it into the first release of IP2013 but ended up in the first patchset are PMs and PRs for views  (I am pretty sure that I saw this documented in the release notes of patchset 1 - unfortunately I am unable to find the note - please drop me a note with the link if you have the URL at hand).

In case you are unfamiliar with the new concepts of patchsets have a look at Latest recommended maintenance pack for Siebel Open UI on Siebel Version 8.1.1.x and Version 8.2.2.x [Document 1535281.1]  which states:

 "For Siebel CRM version 8.1.1.11 and 8.2.2.4 (Innovation Pack 2013, also known as IP2013), Siebel Open UI fixes will no longer be shipped in monthly quick fix (QF) format but be part of the monthly IP2013 patchsets. For IP2013, regular fixes (including Siebel Open UI fixes) will be shipped as part of monthly bundles called Siebel IP2013 patchsets. These fixes also, are cumulative, meaning the fixes included in IP2013 Patchset 1 will be included in IP2013 Patchset 2".

View PM and PRs significantly mitigate the need to add code to postload.js. In the following we look at an example that enable two things in the vanilla view Contact Summary View:

1. Making all applets in a view resizable
2. Allowing to drag&drop applets without loosing a grid layout.

Creating a View PR follows the same steps as creating an Applet PR:

First, we create the PR code proper and save it in the custom folder. Kudos to Duncan Ford who wrote the first version of this View PR. 

Click to enlarge

As bookshelf doesn't contain any reference to View PRs (yet?) I spent a bit of time looking at the different events. So far I found four methods that are called:

1. Init: the first method that is called. In the example, we use a complex looking CSS selector to identify the bottom four applets in our view. Afterwards we flag them with a class and and unique id and apply the JQuery-method sortable to the applets. This allows to drag and drop the four bottom applets in the view.
2. Setup
3. SetRenderer: In the example we iterate through all applets in the current view and apply the JQuery-method resizable to them which allows to dynamically resize all applets. SetRenderer is the first method in the chain in which GetAppletMap returns a list of applets. In Init and Setup the method returns an empty array.
4. EndLife - called when a user navigates to a different view. It seems that it gets called twice.
None of the methods seem to provide any predefined behavior but are just empty hooks. As an interesting matter of fact, ShowUI, BindData and BindEvents -as used by Applet PRs - are not called for View PRs. In case you are intested in the details have a look at the proxy file pmodel.js which defines the root class for View PMs.

Using the new manifest view we need to register the custom .js file and link it against a view. Apart from selecting a type View instead of Applet in the UI Objects applet there is no difference to the process described in Siebel Open UI Manifest Administration Changes in IP 2013.

Click to enlarge

Playing around with the example it is obvious that the code is not production ready:

1. It is possible to resize applets in a way that make them unusable.
2. Changes are not persistent - refreshing the view makes all changes void. However, it should be simple to store the information in cookies as explained in Siebel Open UI Tab Layout: Sort 'em out - Part 2

In summary, View PRs and PMs open up a new range of configuration options and significantly reduce the need to add code to postload.js. Documentation is essentially non-existent at the moment but using the knowledge from applet PMs and PRs it is easy to create PMs and PRs for views.

have a nice day

Jan

Siebel Open UI: Collapsible Applets Revisited

by fellow author Jan:

In a previous post we looked at how applets can be made collapsible by using the Default Applet Display Mode applet user property in Siebel Tools. In the following we look how we can use the same feature in a custom physical renderer (PR) without the need to change the repository (or SRF).

How ClientPMUserProp works

Let's investigate what happens when we add a value to the ClientPMUserProp applet user property:

First, Siebel passes all values that are in the list of the values of ClientPMUserProp to the client.

Next, the values are encapsulated in a property set of type apm which is read in the the Setup method of the Open UI proxy file pmodel.js and put into properties of the PM. As we can see the value of the user property Default Applet Display Mode is stored in the PM property defaultAppletDisplayMode.

Click to enlarge

The PM property defaultAppletDisplayMode is read in the method ShowCollapseExpand of the Open UI proxy file phyrenderer.js which is called from ShowUI. ShowCollapseExpand injects the code that enables the collapsing:

Click to enlarge

Make applets collapsible in the PR

With the knowledge gathered from the proxy code, we only have to set the PM property defaultAppletDisplayMode in our custom PM/PR to make an applet collapsible "on the fly". In my example I set it in the PR - one might argue that it should be set in the PM:

Click to enlarge

As we set the property before  the call of ShowUI no other change is required.  If we set it after the call of ShowUI we can call this.GetPM().GetRenderer().ShowCollapseExpand() to inject it. Just be aware that you shouldn't call the method more than once as every call of ShowCollapseExpand adds a collapsing icon to the applet.

Please note that the above is undocumented.

Summary

By setting the defaultAppletDisplayMode PM property we can make an applet collapsible without the need to perform any change in Siebel Tools.

***

Thanks to Jan for this article

have a nice day

@lex