SharePoint 2010 Compare Selected List Items Using Object Model JavaScript jQuery

SharePoint 2010 Compare Selected List Items Using Object Model JavaScript jQuery

So this an interesting solution I’ve created recently, the request was to enable a way of selecting random items from a long SharePoint list and comparing them in a separate temporary view\popup-window, shown on a press of a button after those items check boxes are selected.


So I used client object model JavaScript code to get the selected items and then the code builds an html table with the fields of the selected items, shown using a JQuery dialog function.

My main complication was building the CAML query ‘OR’ syntax for getting all the items, so what I did was I used different conditions for selecting only one item, two items and more than two items.

Finally I should’ve styled the popping dialog box some more but since this was more of a POC solution I didn’t get the chance yet.

So here is my code:

{code type=html}

<link href=”http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css” rel=”stylesheet”/>
<script src=”http://code.jquery.com/jquery-1.8.3.js”></script>
<script src=”http://code.jquery.com/ui/1.9.2/jquery-ui.js”></script>

<!– Button for getting select items, used a simple link but can be designed –>
<a href=”javascript:GetSelected();”>get selected items </a><script type=”text/javascript”>

//Function using Jquery and Jquery-UI showing div with Items in a type of Popup
function ShowItems(){
$(function() {
$( “#dialog” ).dialog();
});

};

//Var isfirst used to built Table titles row only on the first loop run
var isFirst=0;

//The main function
function GetSelected()
{

isFirst = 0;

//The next 2 lines clear the table in case the function already ran before
var $table= $(‘#myUL’);
$table.contents().remove();

//Using the Client Object Model
var ctx = SP.ClientContext.get_current();
var web = ctx.get_web();
var items = SP.ListOperation.Selection.getSelectedItems(ctx);

var i;

var param = ”;

//The folowiing condition are a bit branced in order to build a correct CAML query using OR:

//If only 1 item was selected
if (items.length == 1)
{
param = ‘<Eq><FieldRef Name=\’ID\’/><Value Type=\’Number\’>’+items[0].id+'</Value></Eq>’;
ViewItem(param);
ShowItems();
}

//If 2 items were selected
else if (items.length == 2)
{
param += ‘<Or>’;
for (i in items)
{
var ItemID = items[i].id;
param += ‘<Eq><FieldRef Name=\’ID\’/><Value Type=\’Number\’>’+ItemID+'</Value></Eq>’;
}
if(param != ”)
{
param += ‘</Or>’;
ViewItem(param);
ShowItems();
}
}

//More than 2 items were selected
else
{
for (i in items)
{
if (i != 1)
{
param = ‘<Or>’+param+”;
}
var ItemID = items[i].id;
param += ‘<Eq><FieldRef Name=\’ID\’/><Value Type=\’Number\’>’+ItemID+'</Value></Eq>’;
//alert(i);
if (i != 0)
{
param += ‘</Or>’;
}

}
if(param != ”)
{
ViewItem(param);
ShowItems();
}
}

}

function ViewItem(param)
{
var myQueryString = ‘<View><Query><Where>’+param+'</Where></Query><RowLimit>10</RowLimit></View>’;
var context = new SP.ClientContext.get_current();
var web = context.get_web();

//Specify your list name here –
var list = web.get_lists().getByTitle(‘YOUR_LIST_NAME’);
var myquery = new SP.CamlQuery();
myquery.set_viewXml(myQueryString);
myItems = list.getItems(myquery);

//specify the columns you need here –
context.load(myItems, ‘Include(Title,ID,TechnologyFamilyGroup)’);
context.executeQueryAsync(Function.createDelegate(this, this.success),Function.createDelegate(this, this.failed));
}

function success()
{
var itemsString=””;
var Title = “”;
var ID = 0;
var TechnologyFamilyGroup = “”;
var ListEnumerator = this.myItems.getEnumerator();
while(ListEnumerator.moveNext())
{
var currentItem = ListEnumerator.get_current();
Title = currentItem.get_item(‘Title’) ;
ID = currentItem.get_item(‘ID’) ;
TechnologyFamilyGroup = currentItem.get_item(‘TechnologyFamilyGroup’).get_lookupValue() ;

if(isFirst==0)
{
//Creating header row for table
itemsString=”<tr><th class=’MyTD1′>ID</th><th class=’MyTD1′>Title</th><th class=’MyTD1′> Technology Family Group</th> </tr>”;
$(itemsString).appendTo(“#myUL”);
isFirst=1;
}

itemsString=”<tr><td>”+ID+”</td><td class=’MyTD2′>”+Title+”</td><td class=’MyTD3′>”+TechnologyFamilyGroup+”</td></tr>”;

$(itemsString).appendTo(“#myUL”);

}
}
function failed(sender, args)
{
alert(“failed. Message:” + args.get_message());
}

</script>
<!–End Of Script, HTML Div and table to append items to –>

<div title=”Compare Items” id=”dialog”><table id=”myUL”></table></div>

{/code}

To use this code all you need to do is copy and paste it into a hidden content editor web part on the page that contains a data view of your list, just remember to change the list name and the column names.

The final result should look like this (sorry for the lack of style…)  –

SharePoint 2010 Compare Selected List Items Using Object Model JavaScript jQuery

SharePoint 2010 Compare Selected List Items Using Object Model JavaScript jQuery

I hope you find this useful.

InfoPath 2010 Best Practice Querying User Profile Web Service

InfoPath 2010 Best Practice Querying User Profile Web Service

So there are many articles explaining how to query user info from SharePoint User Profile using the “GetUserProfileByName” web service such as this great one by Itay Shakury.


But what is the best approach when you have multiple fields you want to get from the user profile, and you want them populated automatically with the current user details when the form is initially opened, but you do not want these fields to repopulate when a form that had been submitted is later reopened by a different user then the initiator who submitted the form.

So one solution could be to set all of our field values using set field value actions on the “Form Load”, and adding a condition to run our set field value actions only when initially opening the form, but I prefer this approach which is a bit more elegant:

1. Make sure that in your data connection of the “GetUserProfileByName” web service you unchecked the check box that states “Automatically retrieve data when the form is opened”

InfoPath 2010 Best Practice Querying User Profile Web Service

unchecked the check box that states “Automatically retrieve data when the form is opened”

2. Insert the formulas to get the different values from the “GetUserProfileByName” web service into your different user details fields (name, department, Manager etc.) as described in Itay’s Blog.

values from the "GetUserProfileByName" web service

values from the “GetUserProfileByName” web service

3. In the form load rules add a condition that’s true only when the initial form load occurs (for example: if you have a help field called “Form Status” check that it is equal to “New”), and if your condition is met add this 2 actions:

a. Set the “GetUserProfileByName” Query field called “AccountName” with the function “UserName()”.
Set "AccountName" with "UserName()".

Set the “GetUserProfileByName” “AccountName” with “UserName()”.

b. Add a “Query For Data” action and query the “GetUserProfileByName” web service.

add these 2 actions

add these 2 actions

4. That’s all, this way when adding a new form the initiator details will be saved for future reference.

5. Hope you find this useful.