Open up datapage in modal - how to pass parameter?

[NikkiC]

Hi,

We have a datapage of a list of current records.  At present, we click on a link, and the individual record opens up in a new tab / window.  What we would like to do, is have the record appear in a lightbox / modal.  However because there is no active "link" involved in opening up a modal (done with Bootstrap - it's simply: data-toggle="modal" data-target="#myModal") and then I would put the Caspio deploy code within div class="modal-content" - how would I ensure the correct record opens up?

Many thanks

Nikki

[NikkiC]

I've been working on this, and managed to find a solution which works in a testing environment, but not within Caspio!

 

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-cardid="[@field:Card_ID#]">[@field:Question]</button>
<div class="modal fade" id="exampleModal" role="dialog" aria-labelledby="exampleModalLabel">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="exampleModalLabel">Card ID</h4>
      </div>
      <div class="modal-body"></div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script>
$('#exampleModal').on('show.bs.modal', function (event) {
  var button = $(event.relatedTarget)
  var recipient = button.data('cardid')
  var modal = $(this)
  modal.find('.modal-title').text('Card ID ' + recipient)
  modal.find('.modal-body').html('<iframe src="https://account.testboard.com/TEST_CARD_MODAL.php?Card_ID=' + recipient + '" style="width: 850px; height: 600px;">')
})

$('#exampleModal').on('hidden.bs.modal', function () {
 window.location.reload();
})

</script>

Can anybody help??!!

Many thanks

Nikki

[NikkiC]

Just to let anyone know if they're interested that I got this script to work, by changing the datapage!  There must have been something in the original one that stopped it from working.

[Elderberg]

On 2/23/2018 at 5:11 AM, NikkiC said:

Just to let anyone know if they're interested that I got this script to work, by changing the datapage!  There must have been something in the original one that stopped it from working.

What datapage did you use?

[Meekeee]

Hi! I would like to share this helpful video from Caspio Labs about using modal in DataPages:

 

Check the description to download the files needed.

[ParkLoey]

Hi! I just wanted to add since I was able to use this to show my details page in a modal window. On the video that @Meekeee provided, the HTML used for the button is like this:

<a class="btn btn-primary text-white mt-3 mb-4"  style="color: #fff; text-decoration: none;" onclick="openModal('See Details', 'efc419ff38ce4a2b9e27', '','modal-md')" style="cursor: pointer;"><i class="fas fa-plus"></i>&nbsp;&nbsp;Add Contact</a>

The values we need to change is listed on the document that they provided in the YouTube video, but to make sure we pass an id field or parameter to be received by our Details Page, it can be added after the appkey

<a class="btn btn-primary text-white mt-3 mb-4"  style="color: #fff; text-decoration: none;" onclick="openModal('Add Contact', 'appkey', '?ParamName=[@field:ParamName]','modal-md')" style="cursor: pointer;"><i class="fas fa-plus"></i>&nbsp;&nbsp;Add Contact</a>

It's just like in passing parameters on query string but without the URL

https://howto.caspio.com/parameters/parameters-as-query-string-values/

I hope this helps!

- LOEY

[GoodBoy]

Hello! Just updating this thread. They already have a helpful documentation on how to implement modal in our DataPages.

- https://howto.caspio.com/tech-tips-and-articles/advanced-customizations/open-details-datapages-in-a-lightbox/

[Jodie]

Loey - were you able to pass the parameters ? I must be doing something wrong with my syntax. When I added my parameters in that location my modal wouldn't open. I've been trying to find alternatives and even entertaining using triggers to move the data from one table so that it's available in the next form. If I ditch the modal altogether I can pass the parameters on the submit button, but that's the best user experience...

[Jodie]

Ok - after reading more code from others with passing parameters in the modal I realised I wasn't passing them correctly and was missing just this before my parameter names:  cbResetParam=1

[Corpcatalog]

Having the same problem,

where should I add this cbResetParam=1 

In the footer code or the button html?

[sandy159]

Hi @Corpcatalog,

You can add this reset parameter after other parameters in the query string by adding the ampersand symbol (&) between the parameters as follows:

<a class="btn btn-primary text-white mt-3 mb-4"  style="color: #fff; text-decoration: none;" onclick="openModal('Add Contact', 'appkey' , '?ParamName=[@field:ParamName]&cbResetParam=1' , 'modal-md')" style="cursor: pointer;"><i class="fas fa-plus"></i>&nbsp;&nbsp;Add Contact</a>

Here is a How-To article as well: https://howto.caspio.com/parameters/resetting-parameters/

[Corpcatalog]

Thanks for the tip - that worked perfectly.

I have another problem - I have a report page that is embedded into a weebly site, that worked rendered perfectly at 100% width, responsive and scrolled.

Since I added the model code the report will only render as a fixed width with no scrolling and not responsive.

Is there something in the modal style that is messing with either the weebly template or the caspio css?

[Corpcatalog]

 

this used to be full page width! 

[Meekeee]

Hi! Just an update - if you have a modal that is showing behind the Results Page, you can use this code in the Header:

<style>

.modal {
 z-index: 9999 !important;
}

</style>

In addition, if you would like to automatically adjust the size of the modal based on its content. You can use this code in the Header as well:

<style>

body .modal-dialog { /* Width */
max-width: 50%;
width: auto !important;
}

</style>

[Meekeee]

Hello - In addition to the previous post, if you have a modal and Form Elements that are not showing such as AutoComplete, Dropdowns, and Date Pickers, you can use a custom CSS to show these elements in front of the modal.

Insert this code in the Header of the DataPage.

<style>

.modal-backdrop{
z-index:4 !important;
}
.modal {
z-index: 5 !important;
}
.header-navbar{
z-index: 3 !important;
}

</style> 

 

[Meekeee]

Hi - Here's another workaround for light boxes:  https://www.humaan.com/modaal/

Modaal is a dialog window plugin that you can also use as another window/popup window on your page.
- https://www.jsdelivr.com/package/npm/modaal
- https://github.com/humaan/Modaal