Thursday, August 15, 2013

Nintex Forms with SPServices library

I have recently started playing with Nintex Forms 2010. The product from Nintex is really nice and provides us with lot of capabilities. However If we compare Nintex Forms with InfoPath forms the Nintex form still needs lot of improvements.

For example to call WebService or to retrieve data from a different system using web services the InfoPath form allows us to call webservice with filters by default. But in Nintex it is not provided by default so what do we do?


Well Nintex forms comes with a powerful script library "jQuery" which solves our problem.If we look at the future of SharePoint product the preferred way of developing any module is "SharePoint hosted" app making use of client side scripting so in my opinion the future of SharePoint customization relies on scripts only.


So considering the support of "jQuery" I started with "SPServices" library to call "UserProfile" Webservice but i keep on getting error "Object does not support this property or method". After looking at the jQuery implementation in Nintex Forms I found out that Nintex implements below line of code.

NWF$=jQuery.noConflict(true);

So what does the above line of code does? It actually flushes out all the previous instances of jQuery and stores it in NWF$ that means in Nintex forms we have to use "NWF$(document).ready(handler)" instead of "$(document).ready(handler)" to use the capabilities of jQuery.
So how do we use "SPServices" library with Nintex form?

If you look at the "SPServices" library you will see that it is encapsulated in "jQuery" anonymous function as

(function($) {  /*more code here*/  })(jQuery);

Which allows it to use $ inside all of the defined functions.

If you see the anonymous function above it needs a jQuery as a parameter.

So what can we do to make "SPServices" work with "jQuery" ? Well we can update the parameter of jQuery anonymous function with NWF$ as shown below to pass the current jQuery variable.

(function ($) {


})(NWF$);


Update the "SPServices" library and provide its reference in Nintex Forms. To Call "UserProfile" service using jQuery you can write a below method to get the data.

function getUserProfile(adLogin) {
    if (adLogin == '' || adLogin == null) {
        alert('empty value')
    }
    var profile = {};
    NWF$().SPServices({
        operation: "GetUserProfileByName",
        async: false,
        AccountName: adLogin,
        completefunc: function (data, status) {
            NWF$(data.responseText).find("PropertyData").each(function (idx, val) {
                var $val = NWF$(val);
                var name = $val.find("Name").text();
                var value = $val.find("Value").text();
                profile[name] = value;
            });
        }
    });
    return profile;
}

Once everything is done you can see the results in Nintex Forms as below.