Display template for aggregating and editing tasks inline

The SharePoint 2013 My Site has a neat new feature of aggregating all of your tasks and allowing you to complete a task with a single click, no matter where the task resides. This eliminates the need for the assignee to go to all of his/her team sites and update their tasks. However, in certain scenarios, the my site and OneDrive experience has not been fully adopted. So, I decided to write a display template that could utilize CBS (Content By Search) web part to rollup all tasks. The display template also allows you to mark the task completed, launch in a modal, and asynchronously update. Let’s get started.

Summary

Here is what the web part will look like when we finish.

Note: Overdue tasks are shown in Red

When we click on see more, the container expands to show us the due date. You could easily add in additional fields and customize to your liking.

When we click the checkbox next to a task, a CSOM call will retrieve your task and mark is as completed. SharePoint will also notify you that it was successful:)

Note: The item is adjusted to be line-through to show that the task is completed. If you want, you could limit completed tasks from your search by using one of the search queries below.

Tasks also open in the SharePoint modal window.

 

Now is where the fun begins!!

Ok, at this point you can see how this display template works/looks. But we have one major hurdle to jump in regards to search and crawl freshness. For example, right now search is showing me 3 tasks that it ‘thinks’ are incomplete because that is what is being read from the index. So, if we mark a task complete and refresh the page, it appears to be Incomplete…..(Below)

For most people this will probably be unacceptable because it may confuse the user into thinking that the template is not working.

The Fix

Inside the template, on line 78, we have a variable named enableAsyncTaskUpdate. By changing this to true, we are telling the template that each time an item is rendered, we want to check the actual status by doing a quick REST call to the target list. If the data that search has doesn’t match, the item will be updated. See below.

change to >

Now our task shows as completed even though the search index hasn’t updated yet:)

Note: A single AJAX call will take place for every item rendered to the screen. Be aware of this when playing around to ensure your page load times are acceptable. These calls are happening Asynchronously so you should not notice a large delay. You may notice item styles and check boxes being written during page load.*

 

Implementation

This display template requires some supporting JavaScript and CSS. You can place these files wherever you would like. You just need to update the template. Also, I am calling jQuery from jQuery.com. To help with performance I recommend pulling a local copy and pointing it to that location.

Lines 26-31 define the external assets that are needed

There are two ways to deploy this template; Manually and via Solution (Sandbox/User). Of course, manual install requires you to import all the files yourself and the solution will deploy them automatically in the structure defined in the image above.

Option #1 – Manual Install

Download the assets off of GitHub

To begin, navigate to the root site collection where you would like to use the template.

1. Click the Gear (Cog) > Site Settings
2. Click on Master Pages and Page Layouts
3. Navigate to Display Templates > Content Web Parts
4. Upload the Item_Tasks_Inline.html file into this folder.
   1. Note: A linked JS file will be created automatically. (Do not attempt to edit as it is not possible)
5. Next, create two folders inside the Content Web Parts folder.
   1. CSS
   2. JS
6. Place the Inlinetasks.css in the CSS folder and Inlinetasks.js into the JS folder.
7. Next, to publish your display template go to Gear (Cog) > Site Settings > Master Pages and Page Layouts > Content Web Parts and find Item_Tasks_Inline.html template. Ensure the file has a published version. Also, make sure your /CSS and /JS files are checked in.
8. Now, we need to add our web part and configure our search query.
9. Add the CBS web part from the Rollup category in the web part gallery. (You can add this anywhere in the site collection)
10. Edit the web part settings and adjust the item template to Tasks with inline edit.
11. Adjust any other settings such as item limit to your liking:)
12. Choose Change Query
    1. Note: This template is made for the OOTB Task Content type or any content type that derives from it.
    2. Your query can include any scope of items that you wish. Below are some examples
       1. All Tasks in the farm – ContentType:Task
       2. All Tasks below a specific URL – path:<site url> ContentType:Task
       3. Filter out completed Tasks by appending: PercentCompleteOWSNMBR<>1
       4. Show only tasks that are assigned to the user viewing the page by appending: AssignedToOWSUSER:{User.Name}
       5. If you only want to show overdue tasks, you could append [ManagedProperty]<={Today} where [ManagedProperty] is a custom MP that you create as a Date/Time property. The OOTB property is not a Date/Time so you cannot evaluate via KQL operators.
          1. Note: In Office 365 you would need to use the predefined RefinableDate0x… properties. To make it easier to remember just add an alias to that property. e.g TaskDueDate
13. After you have configured the above settings your web part should now be working.

Option #2 – Solution Deploy

Download the WSP Here

Attached you will find a TaskCompletionDisplayTemplate.wsp solution. This is a sandbox solution that you can use to deploy the necessary files automatically. This can be a very valuable tool if you would like deploy this solution to multiple site collections. On premise users can use the PowerShell cmdlet to deploy: Add-SPUserSolution –literalPath [PathToWSP] –site [SiteCollectionUrl]. Office 365 users can use the Add-SPOSolution –path [PathToWSP] –site [SiteCollectionUrl] to deploy across multiple sites.

 

Want it across all site collections on premise? Get-SPSite | %{Add-SPUserSolution –literalPath [PathToWSP] –site $_.Url}

…and Office 365? Get-SPOSite |%{ Add-SPOSolution –path [PathToWSP] –site $_.Url}

 

You can also deploy and activate this solution via Site Settings > Solutions at the Site Collection level.

Issues

If you are having issues getting your display template to work, check the following settings to ensure there are no errors.

• Ensure the script and CSS locations in the <Script> block of Item_Tasks_Inline.html are pointing to valid locations.
• Ensure all assets (1 display template and 1 JS and 1 CSS file) are checked in with published versions.
• This template is using all OOTB properties that should already exist as managed property mappings in your Search Service Application. If for some reason one of these were deleted it will not work. Verify that the following properties exist within the Search Schema as Managed Properties. (Site Settings[Top Level] > Schema)
  • DueDateOWSDate
  • ListItemId
  • ListId
  • SPWebUrl
  • PercentCompleteOWSNMBR
  • AssignedToOWSUSER

Another great way to catch errors is to press F12 to bring up developer tools and switch to console view. Next, refresh the page where the web part exists. Any missing files should be written to the console as an error.

If you have any additional issues feel free to leave a comment below!!

{Kam}