#ProjectOnline / #ProjectServer display Project Detail Page web parts using tabs #PPM #MSProject #JavaScript #jQuery

March 4, 2018 at 4:40 pm | Posted in Add-on, Administration, Configuration, Customisation, Functionality, Information | Comments Off on #ProjectOnline / #ProjectServer display Project Detail Page web parts using tabs #PPM #MSProject #JavaScript #jQuery
Tags: , , , , ,

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:

image

image

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.

image

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:

image

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:

image

Using the element selector:

image

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

image

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:

image

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:

image

After:

image

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

image

After:

image

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:

image

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:

image

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 Smile

Advertisements

Create a free website or blog at WordPress.com.
Entries and comments feeds.

%d bloggers like this: