Project Site - Project/Custom fields displayed on Project Site or Project Workspace

If you want to display project fields or project custom fields on your project site, like in the image below, there are only a limited number of possibilities. One of them is of cause to use an App, but that limits the layout to the App.

In this post, I will walk you through how to insert a script that loads and displays any project field you like. The Script is really easy to configure.
I should mention that I found part of this solution at Poul's Project blog (link) but his solution was very difficult to configure so I rewrote the whole code.

First thing you need is to upload your JQuery script file to the PWA site. if you already have a JQuery file uploaded it will properly do fine.

Download the JQuery file here http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js and save it on your desktop.

Go to the Site Settings of the PWA and click on Master Pages.

Upload the JQuery file here and publish it.
View properties of the file and copy the JQuery file link.

Now go to your Project Site or Project Site template (if you want it on all sites) and insert a Content Editor Webpart.
Edit source of the webpart.

Paste the following script into the webpart.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  
 <link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.0/css/jquery.dataTables.css">  
 <script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.0/js/jquery.dataTables.js"></script>  
 <script type="text/javascript" src="/_layouts/15/sp.debug.js"></script>  
 <script type="text/javascript" src="/_layouts/15/sp.js"></script>  
 <div id="pData"></div>  
 <script type="text/javascript">  
   var ProjectFields =  
         [  
           //Project fields  
           // Header      Name  
           ['Project Name', 'ProjectName'],  
           ['Description', 'ProjectDescription'],  
           ['Project Owner', 'ProjectOwnerName'],  
           ['% Complete', 'ProjectPercentCompleted'],  
           ['Project Work', 'ProjectWork'],  
           //['Project Cost', 'ProjectCost'],  
           ['Project Health', 'ProjectHealth']  
         ];  
   var ProjectUID;  
  ExecuteOrDelayUntilScriptLoaded(getProjectUIDProperty, "sp.js");  
  function getProjectUIDProperty()  
  {  
    $('#pData').empty();  
    $('#pData').css('display', 'table');  
    $('#pData').css('width', '100%');  
    var row = $('<div />');  
    row.css('display', 'table-row');  
    var row_below = $('<div />');  
    row_below.css('display', 'table-row');  
    ProjectFields.forEach(function (field, i)  
    {  
      var cellContent = $('<div />');  
      cellContent.css('margin', '2px');  
      cellContent.css('border-bottom', '0px solid');  
      //cellContent.css('max-width', '400px');  
      cellContent.css('font-weight', 'bold');  
      cellContent.text(field[0]);  
      var cell = $('<div />');  
      cell.css('text-align', 'center');  
      cell.css('display', 'table-cell');  
      cell.css('vertical-align', 'middle');  
      cell.append(cellContent)  
      row.append(cell);  
      var cellContent_below = $('<div />');  
      cellContent_below.css('margin', '2px');  
      cellContent_below.css('border-bottom', '1px solid');  
      //cellContent.css('max-width', '400px');  
      cellContent_below.css('font-weight', 'bold');  
      var cell_below = $('<div />');  
      cell_below.css('text-align', 'center');  
      cell_below.css('display', 'table-cell');  
      cell_below.css('vertical-align', 'middle');  
      cell_below.append(cellContent_below)  
      row_below.append(cell_below);  
    });  
    $('#pData').append(row);  
    $('#pData').append(row_below);  
         var ctx = new SP.ClientContext.get_current();  
         this.web = ctx.get_web();  
         this.props = this.web.get_allProperties();  
         ctx.load(this.web);  
         ctx.load(this.props);  
         ctx.executeQueryAsync(Function.createDelegate(this, gotProperty), Function.createDelegate(this, failedGettingProperty));  
       }  
 function gotProperty() {  
          ProjectUID = this.props.get_item('MSPWAPROJUID');  
                      LoadProjectData();  
       }  
 function failedGettingProperty() {  
         alert('Error: ' + args.get_message());  
       }  
 function LoadProjectData()  
 {  
   var selectStr = '';  
   ProjectFields.forEach(function (field, i)  
   {  
     if (i == 0)  
     {  
       selectStr = field[1];  
     } else  
     {  
       selectStr = selectStr + ',' + field[1];  
     }  
   });  
   var data = $.ajax({  
     url: _spPageContextInfo.siteAbsoluteUrl + "/_api/ProjectData/Projects(guid'957d5fcd-5cbf-e111-9f1e-00155d022681')?"  
            + "$select=" + selectStr,  
     type: "GET",  
     dataType: "json",  
     headers: { Accept: "application/json;odata=verbose" }  
   });  
   data.done(function (data, textStatus, jqXHR)  
   {  
     try  
     {  
       var row = $('<div />');  
       row.css('display', 'table-row');  
       var row_below = $('<div />');  
       row_below.css('display', 'table-row');  
       ProjectFields.forEach(function (field, i)  
       {  
         var value = data.d[field[1]];  
         try{  
           var numValue = parseFloat(value).toFixed(2);  
           if (numValue != 'NaN')  
           {  
             value = numValue;  
           }  
         } catch (ex)  
         { }  
         var cellContent = $('<div />');  
         cellContent.css('margin', '2px');  
         cellContent.css('border', '0px solid');  
         //cellContent.css('max-width', '400px');  
         cellContent.css('height', '100%');  
         cellContent.text(value);  
         if (value == 'Red')  
         {  
           cellContent.css('background-color', 'red').css('color', 'white');  
         }  
         if (value == 'Yellow')  
         {  
           cellContent.css('background-color', 'orange').css('color', 'white');  
         }  
         if (value == 'Green')  
         {  
           cellContent.css('background-color', 'green').css('color', 'white');  
         }  
         var cell = $('<div />');  
         cell.css('text-align', 'center');  
         cell.css('display', 'table-cell');  
         cell.css('vertical-align', 'middle');  
         cell.append(cellContent)  
         row.append(cell);  
         var cellContent_below = $('<div />');  
         cellContent_below.css('margin', '2px');  
         cellContent_below.css('border-top', '1px solid');  
         //cellContent_below.css('max-width', '400px');  
         cellContent_below.css('height', '2px');  
         var cell_below = $('<div />');  
         cell_below.css('text-align', 'center');  
         cell_below.css('display', 'table-cell');  
         cell_below.append(cellContent_below)  
         row_below.append(cell_below);  
       });  
       $('#pData').append(row);  
       $('#pData').append(row_below);  
     } catch (ex)  
     {  
       alert(ex.get_message());  
     }  
   });  
   data.fail(function (jqXHR, textStatus, errorThrown)  
   {  
     alert("Error retrieving project data: " + jqXHR.responseText);  
   });  
 }  
 </script>  

Replace the JQuery script in the top of the file with the link to your local script.

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  

Replace the Project Fields with the fields and headers you want to display.

var ProjectFields =  
         [  
           //Project fields  
           // Header      Name  
           ['Project Name', 'ProjectName'],  
           ['Description', 'ProjectDescription'],  
           ['Project Owner', 'ProjectOwnerName'],  
           ['% Complete', 'ProjectPercentCompleted'],  
           ['Project Work', 'ProjectWork'],  
           //['Project Cost', 'ProjectCost'],  
           ['Project Health', 'ProjectHealth']  
         ];  

Click OK and save the webpart page.

The fields will now be displayed on your Project Site.

Note: The Content Editor webpart sometimes converts the Javascript into HTML, so after clicking Save you cannot edit the script anymore. Remember to keep an offline copy of the script while modifying it.