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

June 10, 2014 at 7:22 am | Posted in Add-on, Administration, Configuration, Customisation, Functionality, Information | 5 Comments
Tags: , , , , , , ,

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-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:

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

About these ads

5 Comments »

RSS feed for comments on this post. TrackBack URI

  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?

    • 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.
      Paul

      • 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!
        :)
        Amy

      • 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


Leave a Reply

Fill in your details below or click an icon to log in:

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 )

Google+ photo

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

Connecting to %s

Create a free website or blog at WordPress.com. | The Pool Theme.
Entries and comments feeds.

Follow

Get every new post delivered to your Inbox.

Join 687 other followers

%d bloggers like this: