Second Life of a Hungarian SharePoint Geek

July 26, 2016

Setting the Display Order of the Enterprise Custom Fields on the Project Details Page of Project Server

The out-of-the-box version of the Project Details page of Project Server contains two web parts. On the top, there is a web part with the title “Basic Info” (implemented in class Microsoft.Office.Project.PWA.WebParts.ProjectFieldPart, assembly Microsoft.Office.Project.Server.PWA) that displays the core information about the project, like its name and description as well as start and finish date and the name of the project owner.

There is another web part at the bottom of the page. It is the “Details” web part (implemented in class Microsoft.Office.Project.PWA.WebParts.ProjectCustomFieldsPart, assembly Microsoft.Office.Project.Server.PWA), and it displays the enterprise custom fields defined for the Project entity type.

In the “Basic Info” web part you can select, which project fields should be displayed, as well as their order via the web part properties, as displayed on the screenshot below:

image

image

However you don’t have such control on the fields displayed by the “Details” web part, it simply displays all of the project-related enterprise custom fields.

In this post I show you how to control the display order of the fields in the “Details” web part via jQuery, illustrating the possibilities by using two real-world problem as example.

Problem 1

Assume you have defined (among others) the following custom fields for the Project entity:

  • AField
  • AnotherField
  • CompanyComment
  • CompanyName
  • DivisionComment
  • DivisionName
  • JustOneMoreField
  • LastField

What can you do, if you have a business requirement that dictates the following order for these fields?

  • AField
  • AnotherField
  • DivisionName
  • DivisionComment
  • CompanyName
  • CompanyComment
  • JustOneMoreField
  • LastField

The fields highlighted with bold should be in the specified order. The other enterprise fields (including the ones created later) will be displayed before or after the highlighted block and sorted alphabetically.

You have the option to remove the “Details” web part from the page, and include all of the fields you need in the “Basic Info” web part in the required order. This solution seems to be simple at first sight, but it has the drawback, that you lose the original page structure with the two web parts, and what even worse, you should add any new enterprise custom field to the “Basic Info” web part manually in the future.

Alternatively, you can use jQuery to achieve the required results within the “Details” web part.

The changeFieldOrder function below demonstrates how to accomplish this goal. This function invokes the getTRForField function to find the table row for the specified field. It looks up then the row that belongs to the field specified in the first member of the string array (fieldOrder) it receives as parameter, then looks up the other rows one after the other as well, and places them after the previous one.

Optionally, you can define further field order sets and call the changeFieldOrder function repeatedly using these field sets as parameter.

  1. $(document).ready(startScript);
  2.  
  3. function getTRForField(parent, fieldName) {
  4.     var result = parent.find("h3.ms-accentText").filter(function () { return $(this).text() === fieldName; }).closest("tr").first();
  5.     return result;
  6. }
  7.  
  8. function changeFieldOrder(fieldOrder) {
  9.     var wp = $("div[name='WPClass:ProjectFieldPart']").last();
  10.     var tbody = wp.find("tbody").first();
  11.     for (i = 1; i < fieldOrder.length; i++) {
  12.         var firstTR = getTRForField(tbody, fieldOrder[i – 1]);
  13.         var secondTR = getTRForField(tbody, fieldOrder[i]);
  14.         firstTR.after(secondTR);
  15.     }
  16. }
  17.  
  18. function startScript() {
  19.  
  20.     var fieldOrder1 = ["DivisionName", "DivisionComment", "CompanyName", "CompanyComment"];
  21.     // you can define further field orders if you need
  22.     // var fieldOrder2 = ["CustomField2", "CustomField1"];
  23.  
  24.     changeFieldOrder(fieldOrder1);
  25.     // changeFieldOrder(fieldOrder2);
  26.  
  27. }

Assuming this script is saved in the file CustomFieldOrder.js in the Site Assets library of the PWA site, and the jquery-1.9.1.min.js can be found in that library as well, you can add a Script Editor web part to the Project Details page, and include these two lines in the web part to inject the field-sorting functionality into the page:

/PWA/SiteAssets/jquery-1.9.1.min.js
/PWA/SiteAssets/CustomFieldOrder.js

Problem 2

Assume you would like to display the fields in this order:

  • DivisionName
  • DivisionComment
  • CompanyName
  • CompanyComment
  • AField
  • AnotherField
  • JustOneMoreField
  • LastField

The fields highlighted with bold should be at the very top of the field list and in the specified order. The other enterprise fields (including the ones created later) will be displayed after the highlighted block and sorted alphabetically.

Again, you have the option to remove the “Details” web part from the page, and include all of the fields you need in the “Basic Info” web part in the required order, but in this case you have the same drawbacks, as in the first case above.

Instead of this, you can use the setFieldOrder function that invokes the same getTRForField function we saw in the example above. Then it looks up the row that belongs to the field specified in the first member of the string array (fieldOrder) it receives as parameter, put it at the first row of the table, then looks up the other rows one after the other as well, and places them after the previous one.

  1. function getTRForField(parent, fieldName) {
  2.     var result = parent.find("h3.ms-accentText").filter(function () { return $(this).text() === fieldName; }).closest("tr").first();
  3.     return result;
  4. }
  5.  
  6. function setFieldOrder(fieldOrder) {
  7.     var wp = $("div[name='WPClass:ProjectFieldPart']").last();
  8.     var tbody = wp.find("tbody").first();
  9.     var trLast;
  10.     for (i = 0; i < fieldOrder.length; i++) {
  11.         var tr = getTRForField(tbody, fieldOrder[i]);
  12.         if (!trLast) {
  13.             tr.prependTo(tbody);
  14.             trLast = tr;
  15.         }
  16.         else {
  17.             trLast.after(tr);
  18.             trLast = tr;
  19.         }
  20.     }
  21. }
  22.  
  23. function startScript() {
  24.     var fieldOrder = ["DivisionName", "DivisionComment", "CompanyName", "CompanyComment"];
  25.     setFieldOrder(fieldOrder);
  26. }

You can combine the usage of the changeFieldOrder and setFieldOrder functions if you wish.

In the next blog post I plan to stay with the same topic, how the enterprise custom fields get displayed in the “Details” web part, but instead of setting display order, I show you how to hide / display them based on conditions, like the group membership of the current user.

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

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

Blog at WordPress.com.

%d bloggers like this: