Il est bien plus beau de savoir quelque chose de tout que de savoir tout d'une chose. [Blaise Pascal]

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;");
As this code is using jQuery, you must add the jQuery library into one of your site document library.
(7n + 4) is the 4th tile of your web part (in my case, the Report one). You can check the documentation of the nth-child selector here:
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: I used this in the past to update a List View web part to add alternate row colour.
<style type="text/css" unselectable="on"> + 1).ms-tileview-tile-content {
background-color: #A995C1; /* Purple */
} + 2).ms-tileview-tile-content {
background-color: #FFDE7B; /* Yellow */
} + 3).ms-tileview-tile-content {
background-color: #64D9E9; /* Light Blue */
} + 4).ms-tileview-tile-content {
background-color: #D467A3; /* Pink */
Same tip for the nth-child selector, (7n + 1) being your first tile.

And you are done. 


  1. Nice blog..! I really loved reading through this article. Thanks for sharing such a
    amazing post with us and keep blogging... iot training in chennai | iot training in chennai quora | iot training and placement in chennai | iot training center in chennai | best iot training centre in chennai

  2. IEEE Project Domain management in software engineering is distinct from traditional project deveopment in that software projects have a unique lifecycle process that requires multiple rounds of testing, updating, and faculty feedback. A IEEE Domain project Final Year Projects for CSE system development life cycle is essentially a phased project model that defines the organizational constraints of a large-scale systems project. The methods used in a IEEE DOmain Project systems development life cycle strategy Project Centers in Chennai For CSE provide clearly defined phases of work to plan, design, test, deploy, and maintain information systems.

    This is enough for me. I want to write software that anyone can use, and virtually everyone who has an internet connected device with a screen can use apps written in JavaScript. JavaScript Training in Chennai JavaScript was used for little more than mouse hover animations and little calculations to make static websites feel more interactive. Let’s assume 90% of all websites using JavaScript use it in a trivial way. That still leaves 150 million substantial JavaScript Training in Chennai JavaScript applications.

  3. Great ¡V I should certainly pronounce, impressed with your site. I had no trouble navigating through all tabs as well as related info ended up being truly easy to do to access. I recently found what I hoped for before you know it at all. Quite unusual. Is likely to appreciate it for those who add forums or anything, website theme . a tones way for your client to communicate. Excellent task.. website designers san francisco

  4. I am not really excellent with English but I line up this really easygoing to understand . web design san francisco