One of the clients I worked with had some struggles with people search. The story has to do with people skills. Out of the box SharePoint provides a great people search feature. However, it is not extremely convenient to search and refine people results according theirs skills. If you try to utilize few terms (which was actual requirement of the client), you need a few clicks and page reloading to adjust standard filtering or search refinements.
To make people search more friendly and easy to use, we decided to go with some improvements.
Client’s case
Client’s business was all about consulting. To came up with a proposal, to find best persons, to pull together the project team, the SharePoint people search is intensively used. Usually project manager tried to search people by their skills, refine them by office location, market area, division and other properties later. It required several page reloading just to get all refinements done. Also, some page scrolling provided additional discomfort while you was trying to scroll down to find the right refinement value. So, as potential solutions, following UI was introduced:
Basically, we created tree rows filled out with cities (‘London’, ‘Paris’, ‘Sydney’ and the rest, skills (‘SharePoint’, ‘CRM’, etc.) and areas of expertise such as ‘Marketing’, ‘Sales’ and so on. This is surely just a demo which put up the whole idea – have a few clicks to get and find the right person via SharePoint people search. After selecting values you need, clicking ‘apply filter’ button gets you redirected to a new page with refined search result. So, it is not about typing text, but all about clicking. Here are some samples:
3 clicks to get people from London who have expertise in ‘adoption’:
4 clicks to get skilled finance people from Canberra who have experience in CRM:
Crafting the prototype with KnockoutJS
To get this prototype done, SharePoint designer and Content Editor Web Part could be used. Java script application with KnockoutJS doesn’t look complicated. Just observable array for the tags and a few methods to allow user interactions (selecting particular skill/city/area):
window.skillSearchApp = {};
(function (app) {
app.tagSearch = function () {
var self = this;
self.skillTags = ko.observableArray([]);
self.selectTag = function (selectedTag) {
var currentTag = ko.utils.arrayFirst(self.skillTags(), function (tag) {
return tag.id == selectedTag.id;
});
if (currentTag != null) {
currentTag.isSelected(-currentTag.isSelected());
}
}
self.selectTagByTitle = function (title) {
var currentTag = ko.utils.arrayFirst(self.skillTags(), function (tag) {
return tag.title.toUpperCase() == title.toUpperCase();
});
if (currentTag != null) {
currentTag.isSelected(1);
}
}
self.addTags = function (titles) {
ko.utils.arrayForEach(titles, function (tag) {
self.addTag(tag);
});
}
self.addTag = function (title) {
var index = self.skillTags().length;
self.skillTags.push({ title: title, id: index, isSelected: ko.observable(-1) });
}
self.initFromQueryString = function () {
JSRequest.EnsureSetup();
var searchQuery = JSRequest.QueryString["k"];
var tags = searchQuery.split('%20');
ko.utils.arrayForEach(tags, function (tag) {
var unescapeTag = unescapeProperly(tag);
self.selectTagByTitle(unescapeTag);
});
}
self.search = function () {
var tagSearchString = "";
ko.utils.arrayForEach(self.skillTags(), function (tag) {
if (tag.isSelected() > 0) {
if (tagSearchString != "")
tagSearchString += "%20";
tagSearchString += tag.title.replace(' ', '+');
}
});
window.location.href = "?k=" + tagSearchString;
}
self.run = function () {
var tags = [
"London",
"Paris",
"Dubai",
"Tokio",
"Sydney",
"Canberra",
"Melbourne",
"asp.net",
"Sharepoint",
"CRM",
"cloud",
"html5",
"UX",
"Adoption",
"Marketing",
"Sales",
"Advertising",
"Consulting",
"Legal",
"Finance"
];
self.addTags(tags);
self.initFromQueryString();
ko.applyBindings(self);
};
};
} (window.skillSearchApp))
Next, html markup. Few div containers, tags template and knockout bindings:
<script type="text/javascript" src="/sites/dev/Style Library/XSL Style Sheets/js/knockout-2.2.1.js"></script><script type="text/javascript" src="/sites/dev/Style Library/XSL%20Style%20Sheets/js/skills-search-app.js"></script>
<script id="skill-tag-template" type="text/html">// <![CDATA[
<div class="skill-tag" data-bind="text: title, click: $parent.selectTag, css: { 'skill-tag-active' : isSelected() > 0 }"></div>
// ]]></script></pre>
<div class="skill-tags-cnt" data-bind="template: { name: 'skill-tag-template', foreach: skillTags }"></div>
<div class="act-left act-cnt"><input type="button" value="apply filter" data-bind="click: search" /></div>
<pre>
<script type="text/javascript">// <![CDATA[
var tagSearchExtension = new skillSearchApp.tagSearch();
tagSearchExtension.run();
// ]]></script>
Finally, adding Content Editor Web Part on the people search page and pointing the content link property to our html page would finalize the solution:
That’s is! A ‘few lines’ of js code (is that a big deal to craft such an app with Knockout?) and html mockup could make a difference from the user perspective. Literally.
What’s next?
Well, this post descries very raw mockup which we implemented for the customer in something like 30 minutes. One more time I learnt that making up a ‘live’ demo, showing up and discussing the user experience with end users is one of the keys of any successful projects. Lately, we enhanced this solution with Managed Metadata Store integration to get data from the terms, wrapped UI in custom web part to allow set up categories/term sets and, finally, added wsp package to deliver the final solution. KnockoutJS, SharePoint designer and other client side development could easily boost your performance allowing make prototyping smooth and fast.
Links to get started with KnockoutJS:
- KnockoutJS official site
- Utility functions in KnockoutJS – Knock Me Out
- KnockoutJS Starter eBook by Eric M. Barnard
Solution files:
- http://seanlandry.com/2010/02/04/fake-usernames/ was used to generate test users.
- http://dummy-image-generator.com was used for user profile picture provision.
Conclusion
People search is one of the powerful SharePoint features. However, it has a very basic user experience for the search routines. Crafting a better solution to help end users accomplish their goals could be an easy task. SharePoint designer, out of the box web part and 3rd part java script libraries such as KnockoutJS could boost your performance allowing producing either mock ups or production ready solutions with smooth and enjoyable way.