Home > Paul Mather, Work > #Project-on-a-page for #Microsoft #ProjectOnline #PS2013 #JavaScript #jQuery #Office365 #SharePoint

#Project-on-a-page for #Microsoft #ProjectOnline #PS2013 #JavaScript #jQuery #Office365 #SharePoint

Paul Mather
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)

This script will display project information including project level data, milestones, issues and risks on one page on the associated Project Site in Project Online. The script can be downloaded from the script gallery below:


To get the script to work you will need to download the following jQuery library: jquery-2.1.1.min.js – jQuery download Another version of this library may work but this was the one I used / tested with. Upload this library to your PWA site collection then update the script file with the correct location. I uploaded this file to the site collection document library as you can see in the code below:


Also notice the reference to the two references to the Data tables CSS and JS files. I just referenced the hosted files but you could download these and host them yourself – if hosting the data table files yourself you will need more than just the two files reference here.

Worth noting, the script will also work for Project Server On-prem but the milestone query will need to be updated to use JSOM REST (/api/ProjectServer/) as the ProjectData ODATA feed has a bug with filtering for boolean fields. The query will need to be updated to use the REST fields – these are named different to the ODATA equivalents.

In this example i had the jQuery library and the “Projectonapage on project site.js” file uploaded the site collection documents library but in reality you would probably load both of these somewhere else in the PWA site collection but the choice is yours. I then created a page on my Project Site just in the Shared Documents library but again, create the page where you like within your Project Site. On the page I add a content editor web part and reference my “Projectonapage on project site” JavaScript file. I also added a link on the Project Site quick launch to my new page. The output can be seen below.

When the page loads the dialog box below will display until all the data has been loaded:


Once loaded, the page will contain the project data:



This only uses intrinsic fields so should work for any Project Online environment but do test it thoroughly first. You might want to improve the error handling etc. before deploying to a production environment.

Categories: Paul Mather, Work Tags:
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: