Want to see Risks and Issues on a #ProjectOnline / #ProjectServer project detail page? #PS2013 #SharePointOnline #SP2013 #Office365 #JavaScript #jQuery

Over the last few weeks when I have had a spare 5 minutes I have been playing with JavaScript /jQuery. It is something I have wanted to learn for a while and finally thought I would give it ago and see what I could do with SharePoint / Project data. After lots of reading and researching (lots of examples out there!) I came across some very useful jQuery libraries. This post covers the usage of a script I put together to display risks and issues on a project detail page from the associated project site. The full script can be downloaded from the Microsoft script gallery below:

http://gallery.technet.microsoft.com/scriptcenter/Server-Risks-and-Issues-on-65dcbe0e

The script only uses default Project Server Issues and Risks columns so it will work as is but it can easily be updated to include other columns.

To get the script to work you will need to download the following jQuery libraries:

jquery-1.8.3.min.js – jQuery download

knockout-3.1.0.js – knockout jQuery download

ko.sp-1.0.min.Ex.js – knockout JS binder library – Extended Version (Includes Moment Js and numeral Js)

Later versions of these libraries may work but these were the ones I used / tested with.

Upload these to your PWA site collection then update the script file with the correct location. I uploaded these files to the site assets library as you can see in the code below:

Also note the references to the default SharePoint / ProjectServer JavaScript libraries.

Once the script is uploaded, save this to the PWA site collection. I uploaded the JavaScript file to the style library:

Now create a new PDP page, I called mine Risks and Issues. Then add a content editor web part on the page and reference the riskandissueonPDP.js file. After clicking save you should see the following message above the grids:

This is because the current page is not an actual projects project details page. Add the new PDP to the correct EPT/s. Now navigate to the Project Center and click on a project that contains risks and / or issues on the associated project site. Click the new Risks and Issues PDP and you will see the the risks and issues displayed:

The script is just an example I put together and should really be improved for a production environment  – error handling, update the displayed columns, visualise processing etc. Watch this space for more JavaScript examples as I dabble further!