Project Online / Project Server: Project Detail Pages – Enhancements (Part 2) – Show/Hide a field based on the value of an Enterprise Custom Field on the same page

2019-01-21 | Barbara.Henhapl

This is the second part of articles discussing Project Detail Page enhancements:

  1. Show/hide a field depending on the value of an internal field on the same page
  2. Show/hide a field depending on the value of an Enterprise Custom field on the same page
  3. Show/Hide a field based on the value of an internal field using REST
  4. Show/Hide a field based on the value of an Enterprise Custom Field without Lookup Table using REST
  5. Remove Time from Enterprise Custom Fields on Project Detail Pages
  6. Remove Prefix from Enterprise Custom Fields on Project Detail Pages
  7. Hide Impact Ratings on Project Detail Page "Strategic Impact"
  8. Disable "Project Owner" Button on Project Detail Page

For a description for preparation of a Project Detail Page for JavaScript, see General Preparation.

This time, we will show or hide a field depending on the value of an Enterprise Custom field (ECF) available on this page. In article Project Detail Pages - Enhancements (Part 1) - Show/Hide a field based on the value of an internal field on the same page we used an internal field to evaluate the value. Now we will need evaluate the value of an ECF. On one hand, this is easier since we already know the GUID of this field. So there is no need to deal with different languages the get the GUID. The GUID of a field can easily be identified by editing this field from PWA Settings - Enterprise Custom Fields and Lookup Table.

SNAGHTML29c70693

On the other hand, it makes a difference how to get the value depending on read or write mode for the project. Moreover, we need to catch any changes on the value of the evaluated ECF in write mode, to apply the logic immediately.

In this sample, Enterprise Custom Field CostCenter will be hidden, if there are no Proposal Costs. GUID of Proposal Cost is “90c7672c-a519-e911-afbd-00155d80531a”. The variables FieldToCheckGUID and FieldToHide have to be adjusted accordingly.

<!-- Change path for query-2.1.1.min.js ->
<script type = "text/javascript" src = "/sites/pwa/Scripts/jquery-2.1.1.min.js"></script> 
<script type = "text/javascript">
// This script will hide a Enterprise Custom Field on a Project Detail Page if another ECF is empty

// Change GUID to Enterprise Custom Field to be checked: PWA Settings - Enterprise Custom Fields and LookUp Tables. Click on field name and get guid from the end of URL
var FieldToCheckGUID = "90c7672c-a519-e911-afbd-00155d80531a";

// Change To Enterprise Custom Field name to be hidden
var FieldToHide = "CostCenter";

//A global variable is necessary
var FieldToCheck;


//Call main function
$(document).ready(ExecuteOrDelayUntilScriptLoaded(MainFunction, "sp.js"));

//MainFunction 
function MainFunction() {

    // Checked out
    //If a project is checked out, there can be changes on the field used for check. Any modification has to be checked
    if (state == true) { //state = Checked-Out
        FieldToCheck = document.getElementById("idCF_" + FieldToCheckGUID);
        //Only move on, if field is on page to prevent errors
        if (FieldToCheck != null) {
            //Add eventlistener on field to get changes
            FieldToCheck.addEventListener("blur", function(f) {
                CheckFieldValue(FieldToCheck)
            });
        }
    } else { // Checked in: state = false if a project is read-only
        //getElementsByGuid(FieldToCheckGUID) and return result as FieldToCheck
        FieldToCheck = {
            value: getElementsByGuid(FieldToCheckGUID)
        };
    }
    CheckFieldValue(FieldToCheck);
}

//This function will return the value of Enterprise Custom Field if it is available on the page of a checked-in project
function getElementsByGuid(guid) {
    var nodeList = document.getElementsByTagName('*');
    var nodeArray = [];
    var iterator = 0;
    var node = null;

    while (node = nodeList[iterator++]) {
        //Nothing will happen, if field not on page
        if (node.hasAttribute("guid") && node.outerHTML.startsWith('<div guid="' + guid + '"')) {
            return node.innerText;
        }
    }
}

//This funktion will evaluate the field value to define visibility requirement
function CheckFieldValue(field) {
    if (field != null && field.value != "") {
        setFieldVisibility(FieldToHide, true);
    } else {
        setFieldVisibility(FieldToHide, false);
    }
}

//Show/Hide a field
function setFieldVisibility(field, bool) {
    $(".ms-accentText").each(function(index) {
        if ($(this).text() == field) {
            $(this).closest('tr').toggle(bool);
        }
    });
} 
</script>


Copy above code into a text editor, modify at least the marked sections, save with file extension "js" or "html", and upload to your script library.

Categories: Project

Source: https://blog.atwork.at/post/Project-Online-Project-Server-Project-Detail-Pages-Enhancements-(Part-2)