jQuery and UCM – Client Side Ajax UCM Interaction

The web is evolving, and users are wanting better interaction with their apps within the web browser.  This means faster site loads and action feedback to the user and not a browser loading a page.

Bex recently posted about his jQuery plugin to UCM to make service calls, and I thought I’d share something that I whipped up a few months back that has been an internal project of mine.  I think it’s about time it saw the light of day and help give more options to the web developers of the world.

My prototype is a javascript service wrapper javascript object, called fb.js, creates several util functions to help aid the execution of service calls with a max of 1 line of IdocScript on your site.

The first thing to do is to set the url for the ajax call.  The preferred method is to override the variable in fb.js that holds all of this.  Do this by defining this line in your javascript file.

[sourcecode language="javascript"]
fb.vars.cgiRoot = "<$HttpCgiRoot$>";
[/sourcecode]

Now we can build out our function.  Each function takes 2 parameters objects, a callbacks object and a parameters object.  The callbacks object has the hooks into the 5 events jQuery ajax method gives you.  These are, beforeSend, success, failure, complete, and error.  By defining functions in the callback object, you can hook into any event and change you page very easily.

For example:

[sourcecode language="javascript"]
var callbacks = new Object();
callsbacks.beforeSendFunction = function(){alert("about to ping server")};
callbacks.successFunction = function(responseText){
alert(responseText.LocalData.StatusMessage);
};
[/sourcecode]

The second object is the parameters object.  This one is as easy as passing in parameters as you would for service calls.  For example :

[sourcecode language="javascript"]
var parameters = new Object();
parameters.IdcService = "MY_CUSTOM_SERVICE";
parameters.MyCustomParameter = "VariableValueHere";
parameters.IsJson = "1";
[/sourcecode]

Now we can execute the service.

[sourcecode language="javascript"]
fb.util.executeService(callsbacks, parameters);
[/sourcecode]

Now the real power comes when you want to start interpreting result sets.  you can use a method I created to get back a 2D array object that contains the row and then the item.  An example of this would be.

[sourcecode language="javascript"]
var callbacks = new Object();
callbacks.successFunction = function(responseText){
var contentItem = fb.util.returnResultSetObject(responseText, "DOC_INFO");
alert(contentItem[0]["dDocTitle"]);
alert(contentItem[0]["xComments"]);
};
var parameters = new Object();
parameters.dDocName = "ID_10000";
fb.util.getDocInfoByName(callbacks, parameters);
[/sourcecode]

This can also be applied to search results to loop and create your table.

[sourcecode language="javascript"]
var callbacks = new Object();
callbacks = fb.defaultCallbacks(callbacks);
callbacks.successFunction() = function(responseText){
var searchObj = fb.util.returnResultSetObject(responseText, "SearchResults");
for (var i = 0; i < searchObj.length; i++){
var htmlString = "tr td" + searchObj[i]['dDocName'] + "/td td" + searchObj[i]['dDocTitle'] + "/td td" + searchObj[i]['dDocAuthor'] + "/td /tr";
$("#resultsTable > tbody:last").append(htmlString);
}
};
var parameters = new Object();
parameters.pageCount = "4";
parameters.resultCount = "50";
parameters.QueryText = "Press Release";
parameters = fb.defaultParameters(parameters);
fb.util.getSearchResults(callbacks, parameters);
[/sourcecode]

Now, you may be saying at this point that this is a lot to define to execute the method.  That is why I have started some functions in the main js file called “fb.defaultParameters(parameters)” and “fb.defaultCallbacks(callbacks)”.  By passing in your objects to these methods before you run your service, it will fill in the blanks, so to speak, with default parameters needed to execute the function.

Because I have defined the GET_SEARCH_RESULTS service call within my default parameters, I know there are certain required parameters that need to passed before I execute the service.  These are, QueryText, startRow, endRow, resultCount and others.  I also decided that, I don’t really want to deal with start and end row, so I decided that when I pass in the pageNumber parameter, I calculate the start and end row based off of either the default resultCount parameter set in fb.vars or the one passed into the function.  This can be seen in the above method where I create the table rows.

I currently have 3 predefined for you to use with the ability to add execute any service you want.

[sourcecode language="javascript"]

fb.util.pingServer(callbacks);

fb.util.getSearchResults(callbacks, parameters);

fb.util.docInfoByName(callbacks, parameters);

[/sourcecode]

with the master execute service function being

[sourcecode language="javascript"]

fb.util.executeService(callbacks, parameters);

[/sourcecode]

What I have done is allow you to hook into as many events that you want with the ajax functions, but also incorporate a “defaultFunctions” and “defaultParameters” functions that will assume and fill in parameters that may have been missed or not necessary to keep defining.

For your viewing pleasure, I have set up a prototype site that is Mobile device friendly using 100% javascript hosted on a 10gR3 content server.  Keep in mind that this has not be polished, but a POC of what you can do with the proper execute service javascript wrapper calling the shots.

Please visit http://www.fishbowlsolutions.com/mobile for the example.

9 thoughts on “jQuery and UCM – Client Side Ajax UCM Interaction

  1. I need to write Generic Component for Exporting Search Results to Excel Document.. can anyone help me with this…

  2. Pingback: Tile Bathroom

    • Hi Greg,
      If you take the above example about search results, you can expand it from there. One common implementation is to have an input field, lets call it “x”, and plug in that parameter into your query text. I would write something like this:
      parameters.QueryText = “dDocName "+x+" dDocTitle "+x+"“;
      Where “x” is the value of the input box on your page.

      • Hrm, the query text didn’t come through quite right, let me try it again:
        parameters.QueryText = “dDocName <substring> "+x+" <and> dDocTitle <substring> "+x+"“;

  3. Wonderful blog you have here but I was curious if
    you knew of any user discussion forums that
    cover the same topics discussed in this article? I’d really like to be a part of online community where I can get opinions from other experienced individuals that share the same interest. If you have any recommendations, please let me know. Many thanks!

  4. I leave a comment when I appreciate a article on a site or I have something to add to the discussion.
    Usually it is triggered by the fire communicated in the post I browsed.
    And after this post jQuery and UCM – Client Side Ajax UCM Interaction « C4 Blog by Fishbowl Solutions. I was actually excited enough to drop a thought :) I do have a couple of questions for you if it’s allright. Could it be only me or do a few of the comments look as if they are coming from brain dead people? :-P And, if you are posting at other online social sites, I would like to keep up with everything new you have to post. Could you list every one of your public pages like your Facebook page, twitter feed, or linkedin profile?

Leave a Reply