SharePoint (and Project Server) Shenanigans

I am a Project Server and SharePoint consultant but my main focus currently is around Project Server. I have been working with Project Server for nearly five years since 2007 for a Microsoft Gold Certified Partner in the UK, I have also been awared with the Microsoft Community Contributor Award 2011. I am also a certified Prince2 Practitioner. This article has been cross posted from pwmather.wordpress.com (original article)

Got lots of web parts on a Project Detail Page in Project Online? Lots of fields that you want to group or display in a better way without navigating between pages? If so, this might be your answer, a simple JavaScript and jQuery solution to add tabs to your Project Detail Pages as seen below:

The solution starter code has been published for download but it will need updating to work on your PWA configuration but it is very simple and this blog post covers the changes needed. The download will just save a lot of typing and includes the full source code. The solution starter code can be downloaded from the Microsoft Gallery using the link here: https://gallery.technet.microsoft.com/Online-Server-PDP-tabs-c8012555 

Once downloaded, open the file to edit in your chosen editor (notepad will do if you have nothing else, I use Visual Studio Code or Notepad++). This solution starter is set to work with two web parts, the web parts seen below in my Project Online DEV instance.

In this post we will walkthrough adding in a 3rd web part to the script as that will provide the steps needed to get the correct web part references to update the script:

Firstly we need the web part div ID, to do this, when on the Project Detail Page in PWA press F12 and this will load the browser dev tools:

Using the element selector:

Select the web part, one at a time like below and click:

The DOM Explorer will then update and show you the web part div. You need to copy the div id as outlined in red below:

Repeat this for all the web parts on that page with you wish to move to use tabs then the browser dev tools can be closed.

In this example I just need to update the JavaScript file to add another item to the HTML list, add another div, move the web part to my new div, update the functions and add another function for my new list item. These changes can all be found in the screen shots below. The before images are the base script as downloaded. Before:

After:

Now I need to update the JavaScript in the file. Before:

After:

Save the file and upload to a library in the PWA Site, for example mine is uploaded to the Shared Documents library. Then add a Content Editor Web Part to the target Project Detail Page in PWA at the top of the page and edit that new web part:

In the content link, put a link into the JavaScript file, expand Appearance, give it a title and change the Chrome Type to None. Click Apply then click OK and stop editing the page. Your page will then display the web parts on the tabs:

Simple! This can easily be extended to add icons to the tabs etc. This simple example uses jQuery UI tabs: http://jqueryui.com/tabs/ that provides may options. In this example I also use the base jQuery UI theme CSS file but there are a few to choose from: https://code.jquery.com/ui/ I load the jQuery files in from the jQuery CDN but you might want to download them and store them locally etc. Also, the solution starter file contains HTML and JavaScript, for production you might want to split out the HTML and JavaScript into the separate files, reference the JavaScript file in the HTML file and link to the HTML file in the content editor web part but as this is so small having one file will be fine and is easier!

Fully test on a DEV / TEST PWA instance first before using in Production. The script is provided "As is" with no warranties etc.

Enjoy