Doolysw Posted March 11, 2019 Report Share Posted March 11, 2019 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> Quote Link to comment Share on other sites More sharing options...
Doolysw Posted March 12, 2019 Author Report Share Posted March 12, 2019 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. Quote Link to comment Share on other sites More sharing options...
SunakoChan Posted March 14, 2019 Report Share Posted March 14, 2019 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. Quote Link to comment Share on other sites More sharing options...
Doolysw Posted March 14, 2019 Author Report Share Posted March 14, 2019 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. Quote Link to comment Share on other sites More sharing options...
SunakoChan Posted March 14, 2019 Report Share Posted March 14, 2019 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. Quote Link to comment Share on other sites More sharing options...
GregL Posted June 22, 2020 Report Share Posted June 22, 2020 @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? Quote Link to comment Share on other sites More sharing options...
AtayBalunbalunan Posted June 28, 2020 Report Share Posted June 28, 2020 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. Quote Link to comment Share on other sites More sharing options...
BrianI Posted June 10 Report Share Posted June 10 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. Quote Link to comment Share on other sites More sharing options...
BrianI Posted June 10 Report Share Posted June 10 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> Quote Link to comment Share on other sites More sharing options...
Andrew131 Posted June 10 Report Share Posted June 10 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. Quote Link to comment Share on other sites More sharing options...
CoopperBackpack Posted June 11 Report Share Posted June 11 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? Quote Link to comment Share on other sites More sharing options...
Andrew131 Posted June 11 Report Share Posted June 11 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. Quote Link to comment Share on other sites More sharing options...
Kronos Posted June 12 Report Share Posted June 12 Hi everyone, sharing this Howto article in case it might help others: Hiding Fields in DataPages Cheers! Quote Link to comment Share on other sites More sharing options...
CoopperBackpack Posted June 14 Report Share Posted June 14 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. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.