CSOM tip for making your code flexible

We all know that in CSOM, for any given object, we can specify certain properties to be brought back from the server. Something like this:

	var web = clientContext.Web;
	clientContext.Load(web, w => w.Title);
	clientContext.ExecuteQuery();

view raw basiccsom.cs hosted with ❤ by GitHub

This will only bring back the Title property of the web thus reducing data traveling over the wire.

Now in this case, the second parameter of the clientContext.Load method is an object of type Expression<Func<Web, object>>[]

This is an array of Linq expressions which can be utilized to our benefit. We can convert that array into a parameter which can be passed to a "Utility" function. This function will only get the properties specified in that array. Like this:

	private static Web GetWebDetails(ClientContext clientContext, Expression<Func<Web, object>>[] retrievals)
	{
	var web = clientContext.Web;
	clientContext.Load(web, retrievals);
	clientContext.ExecuteQuery();
	return web;
	}

view raw webdetails.cs hosted with ❤ by GitHub

Then, that function can be called with different parameters depending on the properties we want to fetch from the server for that particular instance. For example:

Only get the Title and Id of the Web:

	//Only get essential web info
	var infoRetrievals = new Expression<Func<Web, object>>[]
	{
	w => w.Title,
	w => w.Id,
	};
	var webInfo = GetWebDetails(clientContext, infoRetrievals);
	Console.WriteLine(webInfo.Title);
	Console.WriteLine(webInfo.Id);
	//Console.WriteLine(webInfo.Description); //This will throw an error because we are not fetching that property.

view raw webInfo.cs hosted with ❤ by GitHub

Only get the MasterUrl and the CustomMasterUrl of the web:

	//Only get Styling Related Details
	var styleRetrievals = new Expression<Func<Web, object>>[]
	{
	w => w.MasterUrl,
	w => w.CustomMasterUrl
	};
	var webStyle = GetWebDetails(clientContext, styleRetrievals);
	Console.WriteLine(webStyle.MasterUrl);
	Console.WriteLine(webStyle.CustomMasterUrl);
	//Console.WriteLine(webStyle.AlternateCssUrl); //This will throw an error because we are not fetching that property.

view raw styledetails.cs hosted with ❤ by GitHub

For both the above calls, we are not changing the GetWebDetails function. It will always return a Web object with the specified properties filled in. It will also reduce data travelling over the wire, as only the specified properties will be fetched. Thus, making your code more flexible and performance friendly.

You can also have other utility functions for Lists, Users etc. Here is a similar function for Lists:

	private static List GetListDetails(ClientContext clientContext, string listTitle, Expression<Func<List, object>>[] retrievals)
	{
	var list = clientContext.Web.Lists.GetByTitle(listTitle);
	clientContext.Load(list, retrievals);
	clientContext.ExecuteQuery();
	return list;
	}

view raw listsutility.cs hosted with ❤ by GitHub

Hope you find this useful!

Custom Taxonomy Picker for Provider Hosted Apps

When working with SharePoint Online or developing cloud friendly solutions, it can be tricky to replicate some functionality which is easily available on-premises. We had a scenario recently where the user should be able to set values for a Managed Metadata user profile property. Now if this was a farm solution, we could have used a variety of methods like User Controls, Taxonomy Pickers etc. But since this was a Provider Hosted App, all those options were not available to us.

I knew that the Office Dev Patterns and Practices project has a cloud friendly taxonomy picker but that did not fit our requirements. It requires the creation of an App web in which sense it is not a "pure" provider hosted app. Also, there were some specific requirements around styling and business logic which meant that a custom Taxonomy Picker was the only way forward.

GitHub link for this project:
https://github.com/vman/CustomTaxonomyPicker

So without much further ado, here is how the custom User Profile property taxonomy picker looks:

1) When loaded first on a page, it gets the values from the "Skills" user profile property and displays them as tags:

2) When you start typing into the input box, the auto-complete suggestions are based on the "Keywords" termset. (You can change this to get terms from another termset)

3) When you are happy with the values, click on update and your Skills user profile property will be updated with the selected values:

And that's basically how it works from an end user perspective.

Advantages:

1)  Pure provider hosted app. No App web required.  If you are on-prem and in a big enterprise, this means that you don't have to wait for a wild card DNS entry to be setup. We all know how long that can take. This can be implemented as a pure provider hosted app because all calls to SharePoint are made by using CSOM in an MVC controller.

2) Complete control. Can be customized anyway you want. If you have specific business logic which needs to manipulate data before sending it to SharePoint, then you are easily able to do so.

3) Customisable UI: The jQuery Tag-It plugin is used in this taxonomy picker. It supports jQuery ui themes and a whole lot of other styling options. More about this in the Technical details section below.

Limitations:

1) As is, this control only works with SharePoint Online/Office 365. This is because the API for writing user profile properties is not yet available for SharePoint On-Premises. But if you are up for it, you can use the UserProfileService.asmx for accomplishing the same functionality. Check out this sample to see how to do it:
https://github.com/OfficeDev/PnP/tree/master/Samples/Core.UserProfilePropertyUpdater

2) At this time, it can only be used with user profile properties. If this has to work with Taxonomy fields in a list, you will have to modify the code but the principles behind the approach would stay the same.

But hey, the source is on GitHub so you don't get to complain! Submit a pull request and I will be happy to merge it :)

Technical Details:

1) Permissions:

Since the app interacts with the Managed Metadata Service and writes to the User Profile Service, the following permissions are needed:

2) jQuery Tag-It plugin:

The completely awesome jQuery Tag-It plugin is used to present the terms as tags in the UI. It provides a wide variety of options for selecting tags. It accepts a JavaScript array of values to show auto-complete suggestions.  Check out the plugin home page for more details.

3) Get current user's skills:

When the page loads, we need to get the skills for the current user to show them by default in the control, this can be done by making a simple call to the UserProfile Service.

	PeopleManager peopleManager = new PeopleManager(clientContext);
	var properties = peopleManager.GetMyProperties();
	clientContext.Load(properties, props => props.UserProfileProperties);
	clientContext.ExecuteQuery();

view raw GetUserProfileProperties.cs hosted with ❤ by GitHub

4) Get terms from the Keywords termset:

To show the auto-complete suggestions, the Tag-It plugin requires a JavaScript array of values. We will use a MVC controller to get the keywords from the Managed Metadata Service and pass the values as a JavaScript array to the plugin. You can use any other termset to get your values. It would also be a good idea to cache these values in the browser localStorage so you don't have to make a call to the Managed Metadata service every time the control loads.

	var taxonomySession = TaxonomySession.GetTaxonomySession(clientContext);
	var termStore = taxonomySession.GetDefaultKeywordsTermStore();
	var termSet = termStore.KeywordsTermSet;
	var termCollection = termSet.GetAllTerms();
	clientContext.Load(termCollection, terms => terms.Include(t => t.Name));
	clientContext.ExecuteQuery();

view raw GetKeywords.cs hosted with ❤ by GitHub

5) Update current user's skills:

When the Update button is clicked, another call is made to the Skills MVC controller which uses the recently released user profile write methods from CSOM. More about them on Vesa Juvonen's blog:
http://blogs.msdn.com/b/vesku/archive/2014/11/07/sharepoint-user-profile-properties-now-writable-with-csom.aspx

	PeopleManager peopleManager = new PeopleManager(clientContext);
	var properties = peopleManager.GetMyProperties();
	clientContext.Load(properties, props => props.AccountName);
	clientContext.ExecuteQuery();
	peopleManager.SetMultiValuedProfileProperty(properties.AccountName, "SPS-Skills", skills);
	clientContext.ExecuteQuery();

view raw SetUserProfileProperties.cs hosted with ❤ by GitHub

If you are on-premises, you can still use the UserProfileService.asmx for that. See this Office Dev PnP sample:
https://github.com/OfficeDev/PnP/tree/master/Samples/Core.UserProfilePropertyUpdater

Thanks for reading! Hope you found this useful.