Jump to content
  • 0

Hide certain fields conditionally in a List DataPage


cordova
 Share

Question

Hi,

I have a List Report DataPage and among the fields, I have School_1, Educ_Attainment_1, School_2, Educ_Attainment_2, which basically means that users should add in their two highest educational attainments and from which school they studied (for example, one person would have a Bachelor's Degree in Harvard University, and a Master's Degree in Princeton University, while another person would have a Master's Degree in University of Michigan and a Doctorate Degree in Stanford University), and that works fine. But is it possible to hide one's educational attainment (and the affiliated university) if it's a Bachelor's one? So for those who records who has educational attainments of Bachelor's  that field should be hidden and the university.

 

 

Link to comment
Share on other sites

1 answer to this question

Recommended Posts

  • 0
22 minutes ago, cordova said:

Hi,

I have a List Report DataPage and among the fields, I have School_1, Educ_Attainment_1, School_2, Educ_Attainment_2, which basically means that users should add in their two highest educational attainments and from which school they studied (for example, one person would have a Bachelor's Degree in Harvard University, and a Master's Degree in Princeton University, while another person would have a Master's Degree in University of Michigan and a Doctorate Degree in Stanford University), and that works fine. But is it possible to hide one's educational attainment (and the affiliated university) if it's a Bachelor's one? So for those who records who has educational attainments of Bachelor's  that field should be hidden and the university.

 

 

Hi @cordova,

You can achieve this with some JavaScript, here's what I have come up with:

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {

var elems = document.querySelectorAll("div[class*='cbReportBlock']");


[].forEach.call(elems, function(elem, i) {


var type1 = elem.querySelector("dl dt:nth-child(7)").nextElementSibling;

if(type1.innerText  == 'Bachelors' ){
type1.style.display = "none";
type1.previousElementSibling.style.display = "none";
type1.previousElementSibling.previousElementSibling.style.display = "none";
type1.previousElementSibling.previousElementSibling.previousElementSibling.style.display = "none";
}


var type2 = elem.querySelector("dl dt:nth-child(11)").nextElementSibling;
if(type2.innerText == 'Bachelors') {
type2.style.display = "none";
type2.previousElementSibling.style.display = "none";
type2.previousElementSibling.previousElementSibling.style.display = "none";
type2.previousElementSibling.previousElementSibling.previousElementSibling.style.display = "none";
}

});


});
</script>
 

 

But the crucial part here is determining which nth-child you need to look for, so I guess you can try switching up the nth-child value until you get the value of the Educ_Attainment (or if youre a bit techy, you can inspect element for you to determine at which order does the Educ_attainment value comes in)

 

Here's my table containing all records including those with Bachelor's degrees (i've highlighted those fields which should be removed on the DataPage): 


1434955402_recordswithbachelors.png.9a09c54747aec64e0a8c566052ecd977.png

 

 

And on the DP with the Script, here's how that looks like (notice that the bachelors value has been removed as well as the school affiliated to them):

2052149893_bachelorsremoved.png.aaf459698fd433e00eb427101e4ebb74.png


Here's the sample DP: https://c1hch576.caspio.com/dp/db26a0007b8cbbe6f560451f9197

 

Hope this helps!

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...