Siebel IP14: Double-Click for Pick and Shuttle Applets

Update Feb 27th – Double-click issue on MVG resolved 🙂 Added the new physical renderer to the bottom of the post.

I’m sure that most among us have been double-clicking on Pick Applets in Open UI trying to select a record and close the applet. Well, like it used to work in the old days. In these new days this (still) isn’t a boxed feature unfortunately. But who knows what future Innovation Packs will bring to the table… That said: it was so annoying to me, I decided to spent some time finding a solution.

Approach – Extending the Default List Renderer

For Pick Applets I was done within half an hour or so. I found that Popup Applets like Pick Applets and Shuttle Applets are based on the same JQ Grid Renderer class, as regular List Applets. I started by extending the out-of-the-box Physical Renderer for List Applets. You might not know, but within Manifest Administration you will find a number of record if you query for Type=Applet and Name=DEFAULT*

Extending the Default List Renderer means a global change to the application. That said, solutions like these come with a warning: be careful. A simple typo could have wide-spread effects. Plus, since all of the code would be executed pretty much anywhere in the application where List Applets are used, it also means to consider very well if such a global impact would be wise.

Given the warning, this is how I went about. First step as always is to create a piece of boiler plate code to start with. Really, this should always be your starting point. I named it “DefaultPopupListDblClickRenderer”, could have been shorter, but it explains more or less what it’s about.

Since I like the option to enable/disable functionality through Manifest Administration, I tend more and more to use simple Manifest Expressions such as:

Next I added the boiler plate code and tested if it got successfully downloaded. The boiler plate code does include some basic logging for the different events, which is useful to test whether the code actually gets executed or not.

Well, the boiler plate code was working just fine. So I added just added in some basics. First getting the FullId of the Applet and additionally a debugger statement. Adding the debugger statement is a feature I often use, because it enables one to use the console to test any JQuery selectors for example. Very, very useful.

var pm = this.GetPM();
var placeHolder = "s_" + pm.Get("GetFullId") + "_div";
console.log("placeHolder: " + placeHolder);
var that = this;
debugger; 

So next step was to identify using Inspect Element what the DOM looks like when a Pick Applet gets displayed. If we would know how to identify an element to which we could bind a double-click event, we would be one step further. This went down pretty smooth ending up with the following code snippet:

$("#" + placeHolder).find(".ui-jqgrid-view").dblclick(function() {
     if ($("#" + placeHolder).find(".AppletStylePopup").find(".siebui-icon-pickrecord").length > 0) 
        that.GetPM().ExecuteMethod("InvokeMethod", "PickRecord");
});

To isolate the double click event once it fires from regular list applets, I found that every Popup would carry a “.AppletStylePopup” class a bit down in the DOM, so I added the conditional statement to isolate the event. Final step was simple, just invoke the “PickRecord” event against the applet. Job done!

Guess what? Works flawlessly.

I got in a good mood, and though about extending the functionality towards Shuttle Applets too. These are also Popup Applets, but a special kind. It took a bit more effort plus collaboration with Duncan Ford.

As we know a Shuttle Applet consists out of two applets. The left side is an Association List, the right side is a MVG. Idea would be that a double click on the left side would “add” the record to the MVG and vice versa. Simple enough.

It appears that the Association List is carrying a specific Id of “#sieb-ui-popup-mvg-available”. Great. So traversing a bit further down the DOM you would find the actual list carrying the class “.ui-jqgrid-view” to which we should bind our double-click event.

Next it appeared that solely using GetPM().InvokeMethod(“AddRecord”) did not work flawlessly. Yes, it would add the record to the MVG. But the state of the Association List got inconsistent. Having the AddRecord invocation being directly followed by an ExecuteQuery does the job just fine.

$("#" + placeHolder).find("#sieb-ui-popup-mvg-available").find(".ui-jqgrid-view").dblclick(function() {
    that.GetPM().ExecuteMethod("InvokeMethod", "AddRecord");
    that.GetPM().ExecuteMethod("InvokeMethod", "ExecuteQuery");
});

Finally removing a record from the MVG! It works very well using the same approach taken for the “AddRecord”. The Element to look for is the #sieb-ui-popup-mvg-selected and then again the .ui-jqgrid-view class, as such:

$("#" + placeHolder).find("#sieb-ui-popup-mvg-selected").find(".ui-jqgrid-view").dblclick(function() {
    that.GetPM().ExecuteMethod("InvokeMethod", "DeleteRecords");
    that.GetPM().ExecuteMethod("InvokeMethod", "ExecuteQuery");
});

Given the few lines of code, I feel the benefit is there 🙂

You can grab the code here.

– Jeroen