I have a problem that I cannot solve
A page lists repeated cards and for each a link to a Modal
But I would like each card to open specific modal
Example:
Card with ID = 1 open modal_01
Card with ID = 2 open modal_02
how should i set the link?
Thank You
Hi,
Because you are in a repeat, you cannot dynamically put in the id of modal yoi want to open.
But, it looks like either the repeat has fixed number of items or there is a value for which a specific modal is opened for each repeated row.
You can try using ternary operator on click event of link to determine which modal to open:
dmx-on:click="someValue == 'a' ? modal1.show() : modal2.show()
1 Like
I thank you but I don't understand
For example we have 3 repeats (id = 1 / id = 2 / id = 3)
and 3 dynamic modal (modal01 / modal02 / modal03)
Tthis link?
<img class = "card-img-top img-thumbnail" href = "#" alt = "" dmx-bind: src = "photo" dmx-on: click = "someValue == 'id' ? modal01.show ( ) : modal02.show () : modal03.show ()" data-toggle =" modal ">
Yeah. Similar to this.
somevalue == 1 ? modal01.show() : somevalue == 2 ? modal02.show() : modal03.show()
unfortunately it doesn't work
maybe I'm wrong something
where does somevalue value come from?
How many morals do u you have? How many cards in the repeat. If it’s just the three I would have used a single modal showing the content based on a value.
1 Like
there are 28 cards but could increase by a few units
The source is a json file with 28 card (text and image)
I would need to have a single modal for each card, because they are very different.
What I can’t do is make sure that clicking on a card, shows the reference modal
Why not open a single modal and change its content dynamically depending on the selected record?
The problem is that the various modals need completely different settings
Moreover, even with only one modal I would not know how to pass the dynamic data
If ID is you field, then somevalue will be 1,2,3…28.
Looking at your other comments, I think you are doing something wrong with the architecture itself.
If there are 28 different cards and modals, there is nothing dynamic here as such. You should just hardcode this stuff, without using repeat.
About fetching dynamic data, you can use data view and data detail components to fetch data for selected card to show on a single modal.
You might find some doc for this.
If you could give a little bit more explanation about what you app does here, there could be a better way to achieve it in Wappler.
The setting is this:
- In a data.json file there is a list with 28 products (Title, text and image)
- In the page, a card is inserted and repeat lists all 28 products
- for each product there is a modal (for a total of 28 different modals)
- what I would like is that clicking on the image of a card the relative modal is displayed
What is additional information you are trying to show in the modal?
And are you sure all need a different modal of their own?
Usually, for a data collection, how it works is all rows have their data spread over same type of columns. So there is just 1 modal where data is shown for the currently clicked card. Would that work for your case?
In this case the problem is that the modals are completely different in setting and content
Ok. So this is why you are creating 28 separate modals on the page.
Similarly, don’t use REPEAT. Just code in 28 cards on the page. And link each to respective modal. Which will be much better.
If you want to use repeat, you will have to put in the condition as descried in comments above. Which will be extremely complicated and nested condition since it will go deep 27 levels.
Another way to do it would be to use JS. On click of link, use FLOW to send current ID to a JS function and in the JS function create ID of modal and open it.
You are right
It is best to avoid repeat and create 28 cards per page
Thanks for your help
No problem.
BTW, I would be interested in seeing what this project is, if you could share once its done. 28 modals sounds wild. 
Hi Brad,
Would be interested to know how you would go about it in the scenario you have mentioned (just the three cards) using a single modal.
Please check the tutorial, it explains how to show record details (also in modal)
Thanks, Teo.