Siebel Open UI – How to use BlockUI jQuery plug-in?

This is the second post in the series explaining feature in Open UI to trigger a business component method asynchronously in a PM or PR with help of a use case. This post deals with requirement where we want to block the UI during the search operation and then unblock once the operation is completed.

To block the UI we are going to use a jQuery Plugin named BlockUI. As the name suggests this plug-in is capable of blocking complete page, a part of page (DIV) or a particular element (button, dropdown or an input box). Now you may ask Why do I need to use this plug-in?

The reason is that If you execute any custom Applet/BC method, BS or workflow from a PM or a PR in synchronous mode then the new wait animation doesn’t appear on the UI all you get is plain old busy mouse icon. In case you execute it in async mode as discussed in previous post then you don’t even get that and this behavior doesn’t translate into good user experience. One more reason to use this plug-in is that it has lot’s of features such as having modal dialog, custom styling, custom positioning that can come in handy to provide a really good user experience. You can visit the BlockUI site to look at the various examples that you can use with this plug-in.

Follow the steps below to get this plugin working.

1. Include jQuery Block Plug-in JS

1. Download the plug-in file and place in the 3rd Party Folder
2. Register the File using Manifest Files.  Name: 3rdParty/jquery.blockui.js
3. Now create a new entry in Manifest Administration view with following detail
   1. UI Objects Applet
      1. Type: Application
      2. Usage Type: Common
      3. Name : PLATFORM INDEPENDENT
   2. Object Expression Applet
      1. Level: 1
   3. Files Applet
      1. Name : 3rdParty/jquery.blockui.js

That’s it you plug-in is now registered and ready to be used. PLATFORM INDEPENDENT entry is used by Siebel to load JS files on at the time of application but the vanilla entry is read only therefore you need to create a new entry with same details to include your custom files when Siebel Application is starting.

2. Use the jQuery Block Plug-in in a PM or PR file.

Using the jQuery Block Plug-in is really easy once you have included the plug-in JS file.  You can do it with following code

$.blockUI({ message: “Please Wait” });

To Unblock you can use following code

$.unblockUI();

So taking example mentioned in the previous post the final code would look something like this

var psIn = SiebelApp.S_App.NewPropertySet();

var conf = {};
conf.async = true;
conf.scope = this;
conf.cb = function(){
$.unblockUI();
}

$.blockUI({ message: “Please Wait” });

pm.ExecuteMethod("InvokeMethod","ExecuteSearch",psIn, conf);

I am not going to go in details of things that you can do with this Plug-in that is something that you can explore on your own. In the next and last post of this example we will see how to bind the click event on that image and execute this code.

Here is video of Siebel Open UI Async Search functionality in complete action

Stay Tuned!! Have Questions ??? Find comments section down below.