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’);
}
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>
Thanks to Elio Struyf for the help in optimizing the Display Template!
I am trying to implement this using Elio’s table display template for seach. I am having two issues 1. The date is displaying with the time and I dont want the time 2. I need the color of the due date to be red if past due. I cant get the piece to work at all. I am hoping you might be able to help me. I have reached out to all the help blogs and no one seems to be able to help and I really could use some help.
You can re-format the dates by using JavaScript in your display template. See examples here: https://codehandbook.org/javascript-date-format/
I hope this helps.