Can't quite figure out how to hide an element on a details page

[Doolysw]

I am trying to hide an element on a details page, but I can't quite figure it out.  I have a yes or no field in my table and if the field is yes I want to display the element, and if the field is no, I want to hide the element.  I feel like I'm doing something wrong in either the way I'm setting the variable or the way I'm doing my if statement.  It could also be that the field is not passing a yes or no, but something else like a 1 and 0.  Could some one look at the code and help me out?  FIRE_PLAN is the yes or no variable in my table.  Right now it hides it no matter what the FIRE_PLAN field is set to.  Just FYI, FIRE_PLAN is a display only field which means I can't just set a rule to hide the element.

 

I have this in an html box on my details page

 

<div id="firesection"><a href="[@field:FIRE_PLAN_URL]"><img alt="" src="http://censoredurl.com/fire.png" style="width: 90px; height: 90px;" /></a><br />
View fire plan for this address</div>

In the footer I have the following code

 

<script>
   var fireplan =  document.getElementById("FIRE_PLAN");

if(fireplan == "Yes")
{
  document.getElementById('firesection').style.display = "block";
}
else
{
  document.getElementById('firesection').style.display = "none";
}
</script>

 

[Doolysw]

I updated the script a bit with some stuff I've read, but it still doesn't work.  New footer script below.

 

<script type= "text/javascript">
var fireplan= document.getElementById("FIRE_PLAN").value;
if (fireplan == "No")
{
document.getElementById("firesection").style.display = "none";
}

</script>

Any help would be most appreciated.

[SunakoChan]

Hi @Doolysw,

May I suggest to use conditional forms: https://howto.caspio.com/datapages/forms/conditional-forms/ to hide the fields on your DataPage.

A conditional form is a regular Caspio form with rules consisting of criteria and conditional actions. You can apply conditional rules to create dynamic change forms that fine tune fields based on user entries. In the Rules tab of the DataPage wizard, you can create various conditions to hide, show, require or disable specific fields based on the value or selection of other fields in the same form.

I hope this helps.

[Doolysw]

I've tried that, but all of the fields on my details page are display only, and conditional formatting rules do not work with display only fields unfortunately.

[SunakoChan]

Hi @Doolysw,

What I can suggest is make the field editable, so that you can use the conditional forms feature. 

Then on your header DataPage add this CSS code below:

<style>
.cbFormTextField{
pointer-events: none !important;
 border-color: transparent;
}

.cbBackButtonContainer{
display: none! important;
}
.cbFormFieldCell{
pointer-events: none !important;
}
</style>

The use of the code is to make the field not editable.

I hope this helps.

[GregL]

@Doolysw, I am having the same problem as you. Did you ever find a way to show/hide sections on a "display only" Details Datapage?

[AtayBalunbalunan]

Can you try the following code in your footer, Doolysw?

 

<script> 
var yesNoSpan = document.querySelector("td[data-cb-cell-name*='EditRecordFIRE_PLAN']").nextSibling.firstElementChild;

if (yesNoSpan.innerHTML == "No") {
 yesNoSpan.parentNode.parentNode.style.display = "none";
}
</script>

 

This is tested when the responsive option is disabled.

[BrianI]

To conditionally hide a field or section...

Add a virtual field

Set the virtual field to Calculated Value and set its value to the field that holds the condition you need...

[@field:fireplan]

Then in the Rules you can use the value of the virtual field as the condition to hide the section.

[BrianI]

I just realized that the above method adds a submit button the the report which would not be desirable for a report page.

Another method..

Add a calculated field with some thing like...

CASE
WHEN
[@field:fireplan] != 'Yes'
THEN
'<div style="display:none;"><div>'
END

 

The calculated field can't render the HTML so add an HTML Block and set it to the value of the calculated field...  (Remember to make it an HTML field)

[@calcfield:1!]

Then add your conditional content

Then another HTML Block with: </div></div>

Then of course you need to hide the Calculated field so you end up with something like...

HTML Block1:  <div style="display:none;"><div>
Calculated field: CASE WHEN [@field:fireplan] != 'Yes' THEN '<div style="display:none;"><div>' END
HTML Block2: </div></div>
HTML Block3: [@calcfield:1!]
Your content to be conditionally hidden
HTML Block4: </div></div>

[Andrew131]

Hi @BrianI, I'm trying to figure out how to hide results for a specific word. It is a results page so I don't have virtual fields available. If the word 'None' appears as a value for this field, then hide the result. I've tried the above suggestions and others but not working so far.

[CoopperBackpack]

Hello @Andrew131,

Could you provide more details about the expected result?

For example, this is the Results page and it displays multiple records. 
In some records, the 'None' value is stored and in others - another value is stored:

Do you need to hide records(rows) if the value of the particular field is 'None'? Or do you need to hide the field(column)? Because if you need to hide the field, the condition is not clear. 
What is the expected result if the value = 'None' is only stored in some records as in the screenshot above? 

[Andrew131]

For example, I have a gallery type page with search and results, I can't filter of by "Hide field if blank" because there is a text value of  'None', so I wanted to hide the result if the value for field C_Add_on1 is 'None'. The table that contains the 'Add-ons' values is quite extensive so searching by the options wanted and exclude 'None' its not really an option. It's set up by C_Add_on1, C_Add_on2, C_Add_on3, up till 5 on the gallery results, but only the first one will have the value 'None' so the others I could use "Hide if blank". Ultimately wanted a way to filter off results if this specific keyword shows in one of the fields. 

[Kronos]

Hi everyone,  sharing this Howto article in case it might help others:

Hiding Fields in DataPages

Cheers!

[CoopperBackpack]

Hello @Andrew131,

I am afraid I still didn`t understand the requirements. 

If you need to hide one field (not the whole record) on the Gallery report based on condition, you can test the following code in the Footer:

<script>
document.addEventListener('DataPageReady', hideFieldHandler)

function hideFieldHandler(){
     const fieldValues = document.querySelectorAll('dl dd:nth-of-type(3)') // 3 is the position of the condition field  

     fieldValues.forEach(value =>{
         if(value.innerText === 'None'){
              value.style.display = 'none';
              value.previousElementSibling.style.display = 'none';        
         }
     })
}
</script>

For example, I have the 'text1' field and this field can store value = 'None' or other values. I need to hide this field if its value = 'None'

The 'text1' field is the 3rd field on the Results page, so I add this code:

Output:

If this is not the expected result, please specify the requirements.