Jump to content
  • 0

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


Question

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

Link to post
Share on other sites

4 answers to this question

Recommended Posts

  • 0

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.

Link to post
Share on other sites
  • 0

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

Link to post
Share on other sites

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.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...