It’s a common requirement to create a “My Tasks” dashboard on the Intranet, where every user can see his/her own open tasks with status, due date and other information.

In SharePoint 2013, there are several enhanced capabilities that make to aggregate content much easier. We have Search-Driven Web Parts, for example. They provide content based on the Search index, therefore having the tasks crawled and indexed is obviously required. (In case of SharePoint content sources, Continuous Crawl might be a big help here.)

Once we have the tasks in the index, the next step is to place the Search Query Web Part or Search Result Web Part on the dashboard page. Both can be used without any query box on the page, and by editing the Web Part’s properties, we can edit its query. This query is responsible for getting the proper items, in this case: tasks. Our query consists of the following parts:

  • Filtering for Task content types (depends on your internal and external content types):(ContentType:Task OR ContentType:RequestTaskContentType OR ContentType:DelegacyAccountingContentType)
  • Filtering for tasks assigned to the current user:AssignedTo:{User.Name}
  • Filtering out statuses that are not relevant or outdated:-Status:Completed AND -Status:Closed AND Status:”Not Applicable”

The complete query will be something like this:

(ContentType:Task OR ContentType:RequestTaskContentType OR ContentType:DelegacyAccountingContentType) AND
AssignedTo:{User.Name} AND
-Status:Completed AND -Status:Closed AND Status:”Not Applicable”

This way, we get the tasks we need in the Search web part, but the formatting is still not user frienly.

This is where we need to apply a custom Display Template.

To be able to do so, let’s create a new Display Template called Item_Task_Table. The easiest way to create it is to duplicate the default Item_Result Display Template, but we’ll change its body.

In the ManagedPropertyMapping part of the Display Template, we have to add the properties we need. In my case it looks like this:

<mso:ManagedPropertyMapping msdt:dt=”string”>’Title‘:’Title’,’Path‘:’Path’,’AssignedTo‘:’AssignedTo’,’Status‘:’StatusOWSCHCS’,’SiteTitle‘:’SiteTitle’,’TaskDueDate‘:’DueDateOWSDATE'</mso:ManagedPropertyMapping>

I cannot emphasize enough: these Managed Properties have to be available in the Search Schema, and filled in with values.

Then, let’s clear everything between <BODY> and </BODY>, we’ll replace it with our own code.

From this point, it’s pure JavaScript and HTML, but there are a few tricks. If a Task has empty DueDate, it’ll be displayed as 01/01/1900. Of course, this is not the desired behavior, therefore we need to check this value first. Every task, where the DueDate is empty we’ll display a “-“.

        var dueDate = $getItemValue(ctx, ‘TaskDueDate‘);

var displayDate = “-“;
if (!$isNull(dueDate.value)) {
dueDate.value.setHours(0,0,0,0);
displayDate = dueDate.value.format(‘yyyy-MMM-dd’);
}

JumpStart Search course

The next step is to define the display color of the DisplayDate. By default, it’s set to green. When the task is in late, it’s set to red. If the task is due in less than three days, it’s set to orange (I chose orange because yellow text was hard to read on the screen). If the dute date is later, it stays green.

        var currentDate = new Date();
currentDate.setHours(0,0,0,0);

var tmpDate = new Date();
tmpDate.setDate(currentDate.getDate() + 3);

var dueFlag = “green“;
var fontColor = “green“;

if (dueDate.value < currentDate) {
dueFlag = “red“;
fontColor = “red“;
} else if (dueDate.value < tmpDate) {
dueFlag = “yellow“;
fontColor = “orange“;
}

var iconUrl = _spPageContextInfo.siteAbsoluteUrl + “/_catalogs/masterpage/tasks/” + dueFlag + “.png”;

The HTML part of the Display Template is very simple, it displays a table with the proper Managed Properties and valiables defined above:

        <table width=”450px” style=”border-bottom: 1px solid #ccc;margin-bottom:20px”>
<tr align=”left” valign=”top”>
<td align=”left” width=”50px”>
<img height=”48″ src=”_#= iconUrl =#_” />
</td>
<td align=”left”>
<a href=”_#= path =#_”>_#= title =#_</a>

<br/>

<table width=”100%”>
<tr>
<td>
<b>_#= siteTitle =#_</b>
</td>
<td align=”right”>
<strong>Due: </strong><font color=”_#= fontColor =#_”>_#= displayDate =#_</font>
</td>
</tr>
<tr>
<td>_#= assignedTo =#_</td>
<td align=”right”>_#= status =#_</td>
</tr>
</table>
<br/>
</td>
</tr>
</table>

The Diplay Template and the “traffic light” icons are available to download HERE.

Thanks to Elio Struyf for the help in optimizing the Display Template!