Datapage with table with button to refresh second data page

[JeffP]

Hello,

I have read this article https://howto.caspio.com/tech-tips-and-articles/results-and-details-on-two-separate-web-pages/ regarding how to  embed a link in a table row which updatas a datapage on a second webpage.

What I need is to have both datapages on a single webform and when I either clck an embedded utton in the row or click the row the second datapage refreshes with the related data?

Regards,

Jeff

[Volomeister]

Hi @JeffP

Are you looking to create something like this: 

https://c7eku786.caspio.com/dp/7f80b00002f01d1dde324ae3940e
 

[JeffP]

Hi Volomeister,

yes this is what I am looking for.

Regards

Jeff

[Volomeister]

Hi @JeffP

You need to do the following:

1. Your details page must receive record ID as an external parameter to filter records based on ID. Make sure you use [@ID] as external parameter


2. Add this code to the header of your details report DataPage:
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.1/iframeResizer.contentWindow.min.js" type='text/javascript'></script>

3. Add this code to the footer of your tabular report DataPage:
 

<iframe id="detailsPage" style="width: 100%;" frameborder="0">Sorry, but your browser does not support frames.</iframe>
<script>iFrameResize({log:true, sizeWidth:true, sizeHeight: true})</script>

4. Add this code to the header of your tabular report DataPage:
 

<script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/3.6.1/iframeResizer.min.js" type='text/javascript'></script>


<script>
if (document.mainDataPageReadyHandler == undefined) {

const DetailsPageURL = 'Details Page URL'


const clickHandler = (e) => {
console.log(e.target)
if (e.target.getAttribute('class')!=undefined) {
 if (e.target.getAttribute('class').indexOf('cbResultSetDataRow')>-1) { // row clicked
    setIframeSrc(e.target.querySelector('td:nth-child(1)').innerText.trim())
  }
 else if (e.target.getAttribute('class').indexOf('cbResultSetData')>-1) { // cell clicked
   setIframeSrc(e.target.parentElement.querySelector('td:nth-child(1)').innerText.trim())
  }
}
else if(e.target.getAttribute('datetime')) {
setIframeSrc(e.target.parentElement.parentElement.querySelector('td:nth-child(1)').innerText.trim())
}

}

const setIframeSrc = (ID) => {
document.querySelector('#detailsPage').setAttribute('src', `${DetailsPageURL}?ID=${ID}`)
iFrameResize({log:true, sizeWidth:true, sizeHeight: true})
}

const mainDataPageReadyHandler = () => {
document.querySelectorAll('.cbResultSetDataRow').forEach(row=>{
row.addEventListener('click', clickHandler)
})
}

document.addEventListener('DataPageReady', mainDataPageReadyHandler)
document.mainDataPageReadyHandler = 'enabled'
}

</script>

Substitute 'Details Page URL' with the URL of your details DataPage. 

5. Make sure that the first column on your tabular report is ID column. If you enable grouping on your tabular report, the code may require some adjustements

[JeffP]

Thankyou Volomeister, much appreciate your help.

Regards,

Jeff