Enhance the “Track your work” web part

For once, a short article with a quick tip on how to enhance the Track your work web part, on your Project Online home page, by updating some links and changing the colour of the tiles.

The challenge (or as Simon Sinek says “Start with why”)

I had to create a brand new custom Report Centre, which contains some videos, help documents, images and our reports. I am a big fan of the Track your work web part, on my home page. It does not only contain links to the most important features, but it is also security trimmed and provides some additional information, such as the numbers of pending approvals, tasks assigned to you, risks or issues, timesheets or status reports...

The solution would be either to create a new Promoted Link web part (but I’m not sure how to deal with the numbers), or just for the Reports link, override the original link (/PWAReports/Forms/AllItems.aspx) with the URL of my new Report Centre (which I did).

The solution

This is easily doable using some JavaScript and jQuery. Here is the process:

Edit your home page, go to the wheel menu and select Edit page.

Add a Content Editor Web part to your page.

Edit the Source of the web part to add some JavaScript code.

Here is the code:

<script src="/sites/myPWA/Shared%20Documents/jquery-3.1.1.min.js" type="text/javascript"></script><script>
$( document ).ready(function() {
$('.ms-tileview-tile-root:nth-child(7n + 4)').find('a').attr("clickaction", "PreventDefaultNavigation(); STSNavigate('ReportCentre.aspx'); return false;");
});
</script>

As this code is using jQuery, you must add the jQuery library into one of your site document library.

(7n + 4) is the 4^th tile of your web part (in my case, the Report one). You can check the documentation of the nth-child selector here: https://api.jquery.com/nth-child-selector/.

Update the URL of destination.

And that’s it J

Going further (not to say “useless stuff”)

I tried also to play with the other properties and made some test on CSS classes, my idea was to try to change the colour of the tiles.

In the same Content Editor Web Part (or in another one), add the following code that override the background colour. You can search for SharePoint CSS reference charts, e.g., this one is for SharePoint 2013: https://blog.sharepointexperience.com/2013/05/31/sharepoint-2013-css-classes-that-suck-and-save-the-day/. I used this in the past to update a List View web part to add alternate row colour.

<style type="text/css" unselectable="on">
div.ms-tileview-tile-root:nth-of-type(7n + 1).ms-tileview-tile-content {
background-color: #A995C1; /* Purple */
}
div.ms-tileview-tile-root:nth-of-type(7n + 2).ms-tileview-tile-content {
background-color: #FFDE7B; /* Yellow */
}
div.ms-tileview-tile-root:nth-of-type(7n + 3).ms-tileview-tile-content {
background-color: #64D9E9; /* Light Blue */
}
div.ms-tileview-tile-root:nth-of-type(7n + 4).ms-tileview-tile-content {
background-color: #D467A3; /* Pink */
}
</style>

Same tip for the nth-child selector, (7n + 1) being your first tile.

And you are done.