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

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:

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

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

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


Like the Project Milestone JavaScript file I wrote, you will also notice 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:


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:


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

  1. If you are not using the project sites associated with PWA is it possible to use this script to display project information on a project site in a separate web app?

    1. Hello,

      This script would only work on Project sites that are linked to Projects in Project Online / Project Server based on the out of the box functionality. Providing you can programmatically determine which project the project site is associated to in project server / project online from the project site you should so be able to modify it to work.

      1. Thank you for the quick response! I’d like to clarify if I could however that there isn’t a limitation due to the sites being in another web app – only that they would need to some how be programmatically linked to the data coming out of project?

        Thanks Again!


      2. Providing you could programmatically determine the associated project and the user on the site had access to Project Server then I cant see of any reason why it wouldn’t work. Paul

  2. Unfortunatally this script does not work when a user who has no permissions on the project webapp and visits the project site. What permissions does a visitor need to see this data? Would view permission be enough?

  3. I would love to use your solution (Project Online), however after following your steps I am getting this message in the console log. Can you perhaps help me out?

    Uncaught TypeError: Cannot read property ‘results’ of undefined
    at Object. (default.aspx:591)
    at fire (jquery-2.1.1.js:3073)
    at Object.fireWith [as resolveWith] (jquery-2.1.1.js:3185)
    at done (jquery-2.1.1.js:8251)
    at XMLHttpRequest. (jquery-2.1.1.js:8598)

Comments are closed.

Create a free website or blog at

Up ↑

%d bloggers like this: