Change a header of a Submission DataPage based on a value on the page

[vanderLeest]

I want to change a header of  submission datapage based on a comparison between two virtual fields on the page. The virtual fields are fixed values for the record drawn from an underlying query, using dropdown values.

If Virtual 2 <> Virtual 3 a section with a  submission field for the Financial Statement Report is hidden (via Rule 1) , and if Virtual 2 = Virtual 3 the same field is set to be required (via Rule 2).

I did not create the header, but it looks currently like this:

<div class="container mt-3 mb-3">
    <div class="row">
        <div class="col mb-3" style="display:inherit !important;">

<h4>Add your Invoice and a Financial Statement Report</h4>
            
            <a href="https://c4ffn695.caspio.com/folderlogout" class="ml-auto btn btn-secondary">Logout</a>
        </div>
    </div>

    <div class="row">
        <div class="col">

If Virtual 2 <> Virtual 3, I want to header to read 'Add your Invoice'  and if not 'Add your Invoice and the Financial Statement Report'

I tried (to no avail) - with different header values - the following script in the Footer

<script type="text/javascript">
document.addEventListener('DataPageReady', function (event) {
       if ("[@cbParamVirtual2]" == "[@cbParamVirtual3]" ) {
document.querySelector("h4").innerHTML="Some title";   }
else {
DataPage, you may try document.querySelector("h4").innerHTML="Other title";   }
});
</script>
 

But I am no JS expert

Any help sincerely appreciated

Floris

[CoopperBackpack]

Hello @vanderLeest,

Please try this code:

<script type="text/javascript">

document.addEventListener('DataPageReady', function (event) {
  
  let title = document.querySelector('#cbParamVirtual2').value;
  let title1 = document.querySelector('#cbParamVirtual3').value;

         if (title == title1) {
          document.querySelector('h4').innerHTML="Add your Invoice";
     }
         else {
          document.querySelector('h4').innerHTML="Add your Invoice and the Financial Statement Report";
     }
  });
  
</script>

The code should work properly if:

1) you have only one <h4> tag on the DataPage

2)  Virtual2 and Virtual3 values are present on the DataPage once it is loaded.

 Feel free to write back in case you have additional questions.

[vanderLeest]

Hi CoopperBackpack,

I will definitively give your suggestion a go (next week)

and let you know how I go.

 

Floris

 

[vanderLeest]

Thanks  CoopperBackpack,  your solution worked (almost perfectly).

I put your JavaScript in the header of the DataPage, and changed the option around,

as title == title1, the innerHTML of the H4 header should read "Add your Invoice and Financial Statement Report".

Floris

[vanderLeest]

Hi again, CoopperBackpack,

I changed the page's source from a View to a Table, and the two virtual fields are now calculated values based on a  select statement, drawing information from a View.

Now the JS script no longer works. Do you have any ideas why, and for a workaround?

Uncaught TypeError: Cannot read property 'value' of null
    at HTMLDocument.<anonymous> (8777500065adaf522f0942fca682?ID=414:935)
    at f_dataPageReadyEvent.dispatchEvent (8777500065adaf522f0942fca682?ID=414:2473)
    at f_dataPageReadyEvent.init (8777500065adaf522f0942fca682?ID=414:2473)
    at new <anonymous> (8777500065adaf522f0942fca682?ID=414:2474)
    at 8777500065adaf522f0942fca682?ID=414:2473

Floris