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.

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

  1. I tried using the above method but when i try to get the output after invoking the business service it gives error that the property is undefined, but if i dont use blockui it works fine. Please tell me how to overcome this issue.

  2. Hi Anand,

    I assume you are invoking BS in asynch, In this case just invoke your BS and the output of the BS will be passed to the callback function. See below example, enter 3 arguments in your callback function. First argument will be the name of methodName you are calling, second argument will have input you passed and third argument will have the output of that method if any.

    e.g ai.cb = function (methodName, input, output) {
    // This function is invoked in case of success
    }

    • Hi Harpinder,
      I’m facing an issue while trying to use the async option to invoke a workflow when user clicks a button. When the user clicks this button (which is on the form applet), while the user is on the list view (List applet first, form applet second in the view) the ‘ResultSet’ part of the output comes for one record but not for the others. so when i’m on record A in the list view and click this button, I get the ResultSet from the WF and can read the process properties, but when i change the selected record to Record B and click the button, The ResultSet part is not there in the response. We are currently on IP 2014. Any Ideas ?

      Thanks,
      Nimanshu Parekh

  3. Hello,

    I am a little confused about how your view is configured. It appears in the video that you have controls listed horizontally across the top and then based on that input the code is reading those values and then searching? I am not seeing in your code where the values are being captured and then queried against the database? The psIn property set appears to be empty.

    Is this view/applet you are using part of an OOB template or is this a completely custom view?

Leave a Reply

Contribute