Open Submission Form in Lightbox and Record Results Count Before Allowing .csv File Download from Report Datapage

[wimtracking2]

I have an authenticated tabular report datapage pulling data from a table called: Contacts. I want to the user to pay a per record download fee to export the data from Contacts into .csv.

My workflow idea is...

• Have a button on top of the results of the tabular report datapage that says Download Data (however, not the standard download data button)
• When the user clicks Download Data, a Submission Datapage opens in a Lightbox
• The Submission Datapage in Lightbox submits a new record to a table called:  Huey_tbl_Researcher_Downloads. 
  • This submission will
    • (Q1) record the Number_of_records to be downloaded into .csv (Results Count) from the results of the tabular report datapage (Contacts table)
    • the User_ID from the authenticated user
    •  (Q1) a calculated $ value (Number_of_records*.20)
    • and a checkbox where the user agrees to the cost
  • (Q2) Once the user agrees and the submission to the table Huey_tbl_Researcher_Downloads is made, the user can then download the .csv file

I have the payment automation figured out, I just need to get the submission into this table Huey_tbl_Researcher_Downloads to trigger the payment and then allow the user to download the csv file after agreement to payment. So my questions are:

1. (Q1 from above) How can I take the Number_of_records to be downloaded from the results of the tabular report datapage (Contacts table) to the Submission Datapage in Lightbox to calculate the cost?
2. (Q2 from above) How can I then get the .csv file to the user? Can the download data link from the tabular report datapage be displayed or can the system email them the .csv file?

Thanks for any and all ideas!

Edited July 30 by wimtracking2
More concise title

[Volomeister]

Hi @wimtracking2

1. When adding lightbox with JavaScript, you specify the URL of the DataPage that needs to be open, so you can add a query string to pass the number of records from the results set.
On your submission form, you will use regular calculated value field to calculate the cost based on external parameter that was passed via query string.

2. The only solution that comes to mind is:
 2.1.  The regular download option is hidden by default (via CSS, for example)
 2.2. Instead, a custom "Download" link is added that open submission form lightbox (via JS)
 2.3. After the form is submitted, JavaSript will click on the hidden download option and initiate a download

The obvious drawback is that one can examine the source code of the DataPage, find the hidden download option, and click on it without having to pay


 

[DrSimi]

Hi @wimtracking2,

Do you need to do the download in the same DataPage? You can have one version before payment without the download enabled, and one version after the user already paid. These are my suggestions:

-Since you seem to be using Listboxes for the search, building the SQL formula to get the count of results from those search parameters like @Volomeister suggests may be complex, but is still doable. Another option is to get the Total Count of records returned from the record count text at the bottom of the tabular report. See:

-Use the option to limit how many records are returned per page so you give a "preview" of the result set to the user.

-Do not enable Download options in this DataPage.

-Use JS to remove the page navigation controls completely from the DOM, using this inside DPReady event (I haven't tested this fully): document.querySelector('.cbNavBarCtnt').remove()

-Add the Download as a custom button or link, which would take the user to the Payment DataPage first. The Total Count has to be passed as a parameter from the button link.

-After payment, the user would be taken to another version of the DataPage where you do not remove navigation controls and have the Download option enabled.

 

Hope this helps!

[wimtracking2]

@Volomeister and @DrSimi Thank you for your responses, your help was imperative. I was able to complete this using a combination of your suggestions. 🤩

Solution:

Step 1: Hide the Download Data button in tabular datapage results

<style>

nav[id*="PageActionsCtnr"] {
display: none;
}

</style>

Step 2: Select the total count of records from the tabular report datapage results and pass it as a parameter (as ?Number_of_Records_Downloaded=) to the submission datapage opening in a lightbox (Opening Details DataPages in a Lightbox - Caspio Online Help)

<!-- Button to Open Modal -->
<a class="btn btn-primary text-white mt-3 mb-4" 
   style="background-color: #0d1267; color: #fff; text-decoration: none; width: 300px; font-size: 16px; margin-bottom: 20px; cursor: pointer;"
   onclick="
       var recordMsg = document.querySelector('.cbResultSetRecordMessage').innerText;
       var recordsDownloaded = recordMsg.split(' ')[3];
       openModal('Lightbox Title', 'Appkey', '?Number_of_Records_Downloaded=' + recordsDownloaded, 'modal-md');
   ">
   Button Text
</a>

Step 3:  Use javascript to select the hidden download data button and initiate csv file download after the lightbox modal form is submitted and modal closed (added to footer of submission datapage in lightbox)

<script>
document.addEventListener('FormSubmitted', function (event) {
    // Close the modal
    document.querySelector('body').classList.remove('modal-open');
    const modal = document.querySelector('.modal-backdrop');
    modal.parentNode.removeChild(modal);

    // Select the download element and trigger the download
    const downloadElement = document.querySelector('.cbResultSetDownloadLink'); 
    if (downloadElement) {
        downloadElement.click(); // Simulate a click to start the download
    }
});
</script>