Quantcast
Channel: Joined Up Solutions » SP2013
Viewing all articles
Browse latest Browse all 7

Supporting post for #ProjectServer 2013/ #ProjectOnline project fields displayed on project site #JavaScript #jQuery

0
0

As mentioned when I published the JavaScript code that displays project level information on the project site, here is the supporting blog post. The quick post that references the script is below:

http://pwmather.wordpress.com/2014/06/02/projectserver-2013-projectonline-project-fields-displayed-on-project-site-javascript-jquery/

The script can be downloaded from the Microsoft Script Gallery below:

http://gallery.technet.microsoft.com/scriptcenter/Server-Information-ab10fd63

Firstly, as with the other JavaScript files I have published you will need jQuery:

jquery-1.8.3.min.js – jQuery download

A later 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 assets library as you can see in the code below:

image

Like the Project Milestone JavaScript file I wrote, you will also notice the reference to the default SharePoint JS files and 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. For a production environment I would probably recommend downloading and hosting the jQuery data tables locally.

Once the script has been downloaded you will notice that I have used 6 default project level fields and 2 custom fields. The two custom fields are Programme and RAGPMStatus. These can be seen on the select below:

image

Programme and RAGPMStatus are custom to my test environment but I added these to show that default and custom project level fields can easily be added. To get the script to work you can either add these fields to your configuration – probably fine for a test environment, or modify the script to remove the custom fields or add your own. Here I will assume you want to add 2 of your own project level custom fields. Below are parts of the script that will need to be modified to accept your own 2 project level custom fields. For simplicity we will assume that the two new fields are Project Location and Project RAG. Project RAG is associated to a lookup table with the following 3 values: Green, Amber, Red.

Starting from the top of the script file here are all the places you will need to modify to get the two new fields in the code.

  • In the table, update the two column headers, replace Programme with Project Location and replace RAG Status with Project RAG.
  • Update the select query, replace Programme with ProjectLocation and replace RAGPMStatus with ProjectRAG.
  • On the first if statement replace Programme with ProjectLocation and replace RAGPMStatus with ProjectRAG.
  • In the data table processing section, replace Programme with ProjectLocation and replace RAGPMStatus with ProjectRAG for the aoColumns parameter
  • In the data table processing section for the aoColumnDefs parameter update the fnCreatedCell if statement with the correct lookup table values for the Project RAG field. So in this example replace On schedule [Green] with Green and Slipping but can mitigate [Amber] with Amber. You might also want to change the cell and font colors.

Once updated, add the script to your PWA site collection, I uploaded this to the Style Library. Then add a content editor web part to the project site and reference the uploaded project information JS file. If you want this to be on all project sites then you would need to create a new project site template with the JS file added.

Once added to a project site the project information will be visible for that project:

image


Filed under: Development, Office 365, Project Server Tagged: JavaScript, PPM, Project Online, Project Server 2013, PS2013, SharePoint 2013, SharePoint Online, SP2013

Viewing all articles
Browse latest Browse all 7

Latest Images

Trending Articles





Latest Images