0

My homepage has an embedded view of a list called Project Info which displays important project information. One of the fields is a choice field called ProjectStatus which can read either Pending, Active or Awaiting Approval. I want to selectively hide and display a pair of promoted links web-parts depending on the currently displayed contents of the Choice field.

I managed to accomplish something similar with hidden LVWPs based on another choice field called ProjectPhase using the code below but this method will not allow for a range of choices:

 <script type="text/javascript">
var ProjectPhase = document.querySelector("table[summary='Project Info Log ']").innerText.match(/Phase [1-9]/g)[0]

switch(ProjectPhase) {
case "Phase 1":
document.getElementById("MSOZoneCell_WebPartWPQ10").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ4").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ11").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ5").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ12").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ6").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ13").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ7").style.display = 'none';
break;
case "Phase 2":
document.getElementById("MSOZoneCell_WebPartWPQ9").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ3").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ11").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ5").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ12").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ6").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ13").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ7").style.display = 'none';
break;
case "Phase 3":
document.getElementById("MSOZoneCell_WebPartWPQ9").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ3").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ10").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ4").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ12").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ6").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ13").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ7").style.display = 'none';
break;
case "Phase 4":
document.getElementById("MSOZoneCell_WebPartWPQ9").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ3").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ10").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ4").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ11").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ5").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ13").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ7").style.display = 'none';
break;
case "Phase 5":
document.getElementById("MSOZoneCell_WebPartWPQ9").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ3").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ10").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ4").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ11").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ5").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ12").style.display = 'none';
document.getElementById("MSOZoneCell_WebPartWPQ6").style.display = 'none';
}
</script>

Can anyone suggest how I can modify this to work with a choice field with the following options: Pending, Active, Awaiting Approval, On Hold, Cancelled, Completed?

enter image description here

enter image description here

Improve this question
2
  • Is your choice field with the options you mentioned is same as ProjectPhase or different? Also you want to merge the conditions of two choice fields or just add conditions for your second choice field and remove conditions of ProjectPhase? – Ganesh Sanap Aug 8 '19 at 8:16
  • The choice fields are different. ProjectPhase has conditions Phase 1, Phase 2, Phase 3, etc. I want to accomplish the same effect as the above code (hide webparts based on field contents) for a different set of conditions – JonS Aug 8 '19 at 8:39
1

Assuming display name of your choice field is "Project Status" and it is drop-down, you can try something like given below:

<script type="text/javascript">
    var ProjectStatus = document.querySelector("select[title^='Project Status']").value;

    switch(ProjectStatus) {
        case "Pending":
            document.getElementById("MSOZoneCell_WebPartWPQ1").style.display = 'none';
            break;
        case "Active":
            document.getElementById("MSOZoneCell_WebPartWPQ2").style.display = 'none';
            break;
        case "Awaiting Approval":
            document.getElementById("MSOZoneCell_WebPartWPQ3").style.display = 'none';
            break;
        case "On Hold":
            document.getElementById("MSOZoneCell_WebPartWPQ4").style.display = 'none';
            break;
        case "Cancelled":
            document.getElementById("MSOZoneCell_WebPartWPQ5").style.display = 'none';
            break;
        case "Completed":
            document.getElementById("MSOZoneCell_WebPartWPQ6").style.display = 'none';
            break;
    }
</script>

You can add multiple hide/show statements inside each case statement as per your requirements.

Improve this answer
9
  • Looks promising but currently throws the following error: SCRIPT5007: Unable to get property 'value' of undefined or null reference. I've checked and the list name and webpart ID are definitely corrent. – JonS Aug 8 '19 at 13:00
  • This is because of the wrong selector used to get the Project Status value. Can you please click inspect element on your Project Status drop-down, take a screenshot and add it to your question, then I will help you to get the correct selector for your Project Status field. – Ganesh Sanap Aug 8 '19 at 13:04
  • images added. the html is split across 2 pics – JonS Aug 8 '19 at 13:18
  • Are you doing it on SharePoint form or somewhere else? – Ganesh Sanap Aug 8 '19 at 13:25
  • Try using this: var ProjectStatus = document.querySelector("table[summary='Project Info Log ']").innerText.match(/ProjectStatus [1-9]/g)[0] . – Ganesh Sanap Aug 8 '19 at 13:28
0

So here is the answer. The variable needs to be told to look for an array of possible answers, not just one. The code looks like this:

var ProjectPhase = document.querySelector("table[summary='Project Info Log ']").innerText.match(/(Pending|Active|On Hold|Cancelled)/)[0]
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.