Elderberg

Solution Involves 2 Parts:
Part 1:  You need to use setTimeout() method to delay the code such that it runs AFTER the calculated fields get computed.  See https://www.w3schools.com/jsref/met_win_settimeout.asp 
 
Part 2:  You need to reference calculated fields using the document.getElementsByName with index 0  instead of by ID, this is because caspio adds some alphanumeric codes after the Virtual Parameters ID when its set to a Calculated Field.
See Code:
var x = document.getElementsByName("cbParamVirtual27")[0].value;
document.getElementById("ElderbergHTMLBlock1").innerHTML = x;

Just leaving this here ...  
 
<script> document.addEventListener('DataPageReady', function(event) { function hideControlsForPerson() { var table = typeof document.getElementsByClassName("cbResultSetTable" + event.detail.uniqueSuffix)[0] == "undefined" ? document.getElementsByClassName("cbResultSetTable")[0] : document.getElementsByClassName("cbResultSetTable" + event.detail.uniqueSuffix)[0]; // Find the index of the last column, which happens to be the inline edit/delete var total_num_columns = table.rows[0].cells.length; var controlsColumnIndex = total_num_columns - 1; //position of the column with inline edit/delete // Find the index position of the column by searching the column's label row = table.rows[0]; var i; var KeyColumnIndex; for (i = 0; i < total_num_columns; i++) { if (row.cells[i].textContent == 'Label_of_Target_Field') { KeyColumnIndex = i; i = total_num_columns; // this is essentially to exit the loop } } // Iterating through rows and hiding Content for (var i = 1, row; row = table.rows[i]; i++) { if (row.cells.length > KeyColumnIndex && row.cells[KeyColumnIndex].textContent !== '[@authfield:Name]') { row.cells[controlsColumnIndex].style = "display:none;" } } } hideControlsForPerson( ); }); </script>  
Note:  " row.cells.length > KeyColumnIndex "  was added to the if statement to protect against an uncaught TypeError that happens if using a date rollup or other field grouping. 
 
 

The real answer is Caspio should just create a distinct field button of some sort like they do in dropdowns when you can check Distinct Options and Im sure it would take them 20 minutes to do and everyone could use this!

Just leaving this here ...  
 
<script> document.addEventListener('DataPageReady', function(event) { function hideControlsForPerson() { var table = typeof document.getElementsByClassName("cbResultSetTable" + event.detail.uniqueSuffix)[0] == "undefined" ? document.getElementsByClassName("cbResultSetTable")[0] : document.getElementsByClassName("cbResultSetTable" + event.detail.uniqueSuffix)[0]; // Find the index of the last column, which happens to be the inline edit/delete var total_num_columns = table.rows[0].cells.length; var controlsColumnIndex = total_num_columns - 1; //position of the column with inline edit/delete // Find the index position of the column by searching the column's label row = table.rows[0]; var i; var KeyColumnIndex; for (i = 0; i < total_num_columns; i++) { if (row.cells[i].textContent == 'Label_of_Target_Field') { KeyColumnIndex = i; i = total_num_columns; // this is essentially to exit the loop } } // Iterating through rows and hiding Content for (var i = 1, row; row = table.rows[i]; i++) { if (row.cells.length > KeyColumnIndex && row.cells[KeyColumnIndex].textContent !== '[@authfield:Name]') { row.cells[controlsColumnIndex].style = "display:none;" } } } hideControlsForPerson( ); }); </script>  
Note:  " row.cells.length > KeyColumnIndex "  was added to the if statement to protect against an uncaught TypeError that happens if using a date rollup or other field grouping. 
 
 

Just leaving this here ...  
 
<script> document.addEventListener('DataPageReady', function(event) { function hideControlsForPerson() { var table = typeof document.getElementsByClassName("cbResultSetTable" + event.detail.uniqueSuffix)[0] == "undefined" ? document.getElementsByClassName("cbResultSetTable")[0] : document.getElementsByClassName("cbResultSetTable" + event.detail.uniqueSuffix)[0]; // Find the index of the last column, which happens to be the inline edit/delete var total_num_columns = table.rows[0].cells.length; var controlsColumnIndex = total_num_columns - 1; //position of the column with inline edit/delete // Find the index position of the column by searching the column's label row = table.rows[0]; var i; var KeyColumnIndex; for (i = 0; i < total_num_columns; i++) { if (row.cells[i].textContent == 'Label_of_Target_Field') { KeyColumnIndex = i; i = total_num_columns; // this is essentially to exit the loop } } // Iterating through rows and hiding Content for (var i = 1, row; row = table.rows[i]; i++) { if (row.cells.length > KeyColumnIndex && row.cells[KeyColumnIndex].textContent !== '[@authfield:Name]') { row.cells[controlsColumnIndex].style = "display:none;" } } } hideControlsForPerson( ); }); </script>  
Note:  " row.cells.length > KeyColumnIndex "  was added to the if statement to protect against an uncaught TypeError that happens if using a date rollup or other field grouping. 
 
 

Hi @Elderberg,
I have recently found that you can get suffix from DataPage event.
<script type="text/javascript"> document.addEventListener('DataPageReady', function (event) { let suffix = event.detail.uniqueSuffix; console.log(suffix); }); </script> Regards,
vitalikssssss 

Hi @Elderberg,
I can suggest using a simple Dropdown or Listbox for date selection and a lookup table which will be updated via Tasks on daily basis.
Here is an example of Task which adds yesterdays, current date, and tomorrows date on daily basis.

You may also import this Task from attached archive.
Hope this helps.
Regards,
vitalikssssss
CaspioData_2019-Dec-02_1638.zip