pmcfarlain

Hi, this solution gets autocorrected by caspio and no longer works. Is there a more up-to-date solution?

seems like you're missing 
var elems = isi.parentNode.parentNode.querySelectorAll("td"); it's set just above the for loop

Not sure if what I understood is correct, but, you can try this, create a Calculated Value, this is to check if the date today is less than 5 or not. If it's 1, user can input any date, if it's 0, only on the current month and later.
CASE WHEN DATEPART(day, GetUTCDate()) <5 OR (DATEPART(day, GetUTCDate()) >= 5 AND DATEPART(month,GetUTCDate()) <= DATEPART(month, [@field:Date])) THEN 1 ELSE 0 END Script on the footer: (change the number on cbParamVirtual1 depending in your Virtual Field)
<script> document.addEventListener("BeforeFormSubmit", function(e){ var a= document.querySelector("input[name='cbParamVirtual1']").value; if (a == 0){ e.preventDefault(); alert("Please input Date within or after the current month"); } }); </script>  
 
If you want this to trigger on change of the field that is being used in the Calculated Field.
Change the InsertRecordFIELDNAME to your actual field's id
cbParamVirtual1 to your Virtual Field's name if it's 1 2 3 or whatevers
<script> document.getElementById("InsertRecordFIELDNAME").addEventListener("change", function(e){ document.querySelector("input[name='cbParamVirtual1']").addEventListener("change", function checker(){ var a= document.querySelector("input[name='cbParamVirtual1']").value; if (a == 0){ //if Calculated Value is 0 then alert alert("Please input Date within or after the current month"); //add another code } this.removeEventListener("change",checker); }); }); </script>  

Hi @pmcfarlain - you may try this forum post
 
This is the result I had


My code in HTML Block

 
<div id="visi-[@field:GUID]"></div> <script> var isi = document.getElementById("visi-[@field:GUID]"); if([@calcfield:1#] < 0 ){ isi.parentNode.parentNode.classList.add('custom-less') } else{ isi.parentNode.parentNode.classList.add('custom-greater'); } </script>
Header
<style> [class*="custom-"] * { color: inherit !important; } .custom-less { color: red; background-color: yellow !important; } .custom-greater{ color: black; background-color: transparent !important; } </style> I hope this helps!

Hello! You can set it up in Styles on your Caspio Bridge.
 

<style>
[class*="cbResultSetHeaderCell"]{
text-align:center !important;
vertical-align:center !important;
}
.cbResultSetLabel:nth-child(2) {
writing-mode:vertical-rl;
transform: rotate(180deg);
border:none;
}
</style>
 
You can try this, you'll have to manually set the number of that header, if you want 2 and 3, you'll do .cbResultSetLabel:nth-child(2), .cbResultSetLabel:nth-child(3) 

Just separate with comma

Try this one, this will only run once, when the DataPage is loaded, after that, it will not run anymore unless you refresh
 
<script> document.addEventListener("DataPageReady", function(e){ var gridEditButton = document.querySelector("a[data-cb-name='GridEditButton']"); gridEditButton.click(); }); </script> This is much simpler method than the one above. That's to force Grid Edit. You don't need the other script for this, just the style, maybe