C4

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.

fb.vars.cgiRoot = "<$HttpCgiRoot$>";

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:

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

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

var parameters = new Object();
parameters.IdcService = "MY_CUSTOM_SERVICE";
parameters.MyCustomParameter = "VariableValueHere";
parameters.IsJson = "1";

Now we can execute the service.

fb.util.executeService(callsbacks, parameters);

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.

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);

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

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);

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.

fb.util.pingServer(callbacks);

fb.util.getSearchResults(callbacks, parameters);

fb.util.docInfoByName(callbacks, parameters);

with the master execute service function being

fb.util.executeService(callbacks, parameters);

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.