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.
Great post! Can you share the JS you used on the Nintex form to call the web service & update the field values?
ReplyDeleteThanks!
Tim
@Tim
ReplyDeleteI used SPServices as a base library and used the function "getUserProfile" specified in a blog to call the webservice. However you need to write some function to select and update the people picker value.Do you need this function?
Yes, please
DeleteHere you go..To use the below function you need to assign client id to people picker from Nintex forms. In my case I have assigned "Requestor" as client id to people picker. I am setting the people picker with the current user.
ReplyDeleteNWF$.fn.SPFindPeoplePickerExtended = function (options) {
var opt = NWF$.extend({}, {
peoplePickerClientId: "", // The client id of the people picker control
valueToSet: "", // The value to set the People Picker to. Should be a string containing each username or groupname separated by semi-colons.
checkNames: true // If set to true, the Check Names image will be clicked to resolve the names
}, options);
var thisRow = NWF$("textarea[id=" + "'" + opt.peoplePickerClientId + "'" + "]").closest("table.ms-usereditor");
var thisContents = thisRow.find("div[name='upLevelDiv']");
var thisCheckNames = thisRow.find("img[Title='Check Names']:first");
if (opt.valueToSet.length > 0) {
thisContents.html(opt.valueToSet);
}
// If checkName is true, click the check names icon
if (opt.checkNames) {
thisCheckNames.click();
}
var thisCurrentValue = NWF$.trim(thisContents.text());
// Parse the entity data
var dictionaryEntries = [];
// IE
thisContents.children("span").each(function () {
// Grab the entity data
var thisData = NWF$(this).find("div[data]").attr("data");
var dictionaryEntry = {};
// Entity data is only available in IE
if (thisData != undefined) {
var arrayOfDictionaryEntry = NWF$.parseXML(thisData);
$xml = NWF$(arrayOfDictionaryEntry);
$xml.find("DictionaryEntry").each(function () {
var key = NWF$(this).find("Key").text();
var value = NWF$(this).find("Value").text();
dictionaryEntry[key] = value;
});
dictionaryEntries.push(dictionaryEntry);
// For other browsers, we'll call GetUserInfo to get the data
} else {
NWF$().SPServices({
operation: "GetUserInfo",
async: false,
cacheXML: true,
userLoginName: NWF$(this).attr("title"),
completefunc: function (xData, Status) {
NWF$(xData.responseXML).find("User").each(function () {
NWF$.each(this.attributes, function (i, attrib) {
var key = attrib.name;
var value = attrib.value;
dictionaryEntry[key] = value;
});
dictionaryEntries.push(dictionaryEntry);
});
}
});
}
});
return { row: thisRow, contents: thisContents, currentValue: thisCurrentValue, checkNames: thisCheckNames, dictionaryEntries: dictionaryEntries };
};
function SetPeoplePickerValue(options) {
var pp = NWF$().SPFindPeoplePickerExtended({
peoplePickerClientId: options.peoplePickerClientId,
valueToSet: options.valueToSet,
checkNames: options.checkNames
});
}
function setRequestorValue() {
NWF$(document).ready(function () {
var opt = {
peoplePickerClientId: Requestor,
valueToSet: NWF$().SPServices.SPGetCurrentUser(),
checkNames: true
};
SetPeoplePickerValue(opt);
});
}
Thanks Sanjay. Could you please also share the code for putting the returned data from the getUserProfile(adLogin) function to those input controls? At the moment, when I try to console.log(getUserProfile('domain\username')) I get nothing.
ReplyDelete@Shashuma,
ReplyDeleteTo test your function put an alert in getUserProfile function as alert(name);
alert(value);
You should be able to find if your function works or not.
var userProfile = getUserProfile(loginName);
setInputFieldValue(FirstName, userProfile.FirstName);
function setInputFieldValue(fieldIdVariable, value) {
NWF$("input[type='text'][id=" + "'" + fieldIdVariable + "'" + "]").val(value);
}
Is it possible post the solution Step by step. Screen shots will help everyone.
ReplyDeleteHi Sanjay I failed this example we relizar Might help you more with this if possible step by step, just purchased Nintex form and I'm traumatized with this.
ReplyDeleteHi Roderick,
DeleteI am sorry i am little late.Do you still need help on this?
Thanks
Sanjay
Yes :) is possible?
Delete