This is the second part of articles discussing Project Detail Page enhancements:
- Show/hide a field depending on the value of an internal field on the same page
- Show/hide a field depending on the value of an Enterprise Custom field on the same page
- Show/Hide a field based on the value of an internal field using REST
- Show/Hide a field based on the value of an Enterprise Custom Field without Lookup Table using REST
- Remove Time from Enterprise Custom Fields on Project Detail Pages
- Remove Prefix from Enterprise Custom Fields on Project Detail Pages
- Hide Impact Ratings on Project Detail Page "Strategic Impact"
- 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.
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)