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

14 comments

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 4th 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. 



14 comments :


  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

    ReplyDelete
  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.

    ReplyDelete
  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

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

    ReplyDelete
  5. Hello! I just now would choose to supply a massive thumbs up for that great info you have here with this post. We are returning to your blog site to get more detailed soon. web design la

    ReplyDelete
  6. Thanks, foг ones marvelous posting! I genuinely enjoyed reading it, you miggһt Ƅe a great author. I wiⅼl made certain to booҝmark your blog and ѡill often come back sometime soon. I want to encoᥙrage yourself to continue your great job, have a nice evening!
    Web Development Course
    best web development courses
    web development classes
    web development course near me
    Web Development Training
    training on web development
    web development training program
    web development training course
    web development summer training

    ReplyDelete
  7. "
    I was just examining through the web looking for certain information and ran over your blog.It shows how well you understand this subject. Bookmarked this page, will return for extra."
    hrdf contribution

    ReplyDelete

  8. This post is incredibly simple to examine and recognize without disregarding any nuances. Inconceivable work! PMP

    ReplyDelete
  9. I think I have never watched such online diaries ever that has absolute things with all nuances which I need. So thoughtfully update this ever for us.
    360DigiTMG data analytics training

    ReplyDelete

  10. Hello there to everyone, here everybody is sharing such information, so it's fussy to see this webpage, and I used to visit this blog day by day
    hrdf claimable training

    ReplyDelete