How do I populate data from API in a modal widget on click of button on table row with params?

[vihar]

This question was asked on Discord by a user rs4, following is the use-case:

• In a column of a table I have added a button that opens a modal.
• The modal contains a table, which populates its data with an API call.
• The endpoint of the API requires a field ID fetched from the selected row of the table on the main page.
• Whenever I open the modal by clicking the button it shows me the previously fetched data, meaning the API corresponding to the selected row ID is not hit again.

---

Step 1:

First, we could convert table column types into Button, by updating it on the property pane.

Step 2:

Next, drag and drop a new Modal (default name would be Modal1) on the canvas.

Step 3:

Open the table’s property pane, go to column properties of the desired row and update its onClick property to:

{{ Api1.run(()=> showModal('Modal1'), ()=> {} ) }}

When the button is clicked on the table row, this will run the API1 query and then opens the Modal1 widget.

If you wish to pass parameters on the query based on the selected row, we could use the selectedRow property.

{{ Table1.selectedRow.<<attribute>> }}

Here’s a small recording of how this works: Loom | Free Screen & Video Recording Software

[vernons]

@vihar

{{ Api1.run(()=> showModal('Modal1'), ()=> {} ) }}

This doesn’t seem to work if the item in the Modal is a JSON form. Any insights?

If I create a form with some elements it works, but if I use a JSON form, it doesn’t. The same JSON form works fine if it’s just positioned on the page and not in a modal.

If I use the show (eye icon) to hide and then redisplay elements within the JSON form, it updates to reflect the correct information.

Bug?

Thanks,
Vernon

[vihar]

Hey @vernons, I didn’t understand your use case, are you trying to use a JSON form on the Modal? If that’s the case, it’s working well for me. Here is the API I’m using:

https://randomuser.me/api/

On the button onClick property, I’m running an API and showing a Modal, that has a JSON form binded to the API that’s called. I’m attaching the recording of the same:

[vernons]

Hi @vihar, my use case is to pop up a modal that has a JSON form populated with details when a row on my main page is selected.

It’s similar to your demo, with the differences being the modal being triggered when a row is clicked (instead of a button) and a the JSON form in the modal being more complex.

See the attached video.

[vernons]

I’m not sure why what I was doing yesterday wasn’t working. Today as I was refactoring the form for use with some other lists, I used the following pattern:

{{
Api1.run(() => {}, () => {}, { courseId: Table1.selectedRow.id })
showModal(‘Details_Modal’)
}}

This works as expected, and allows me to use the same Modal for several different Tables by varying the table name.

If I put the showModel(‘Details_Modal’) within the run, like this:

{{
Api1.run(() => showModel(‘Details_Modal’), () => {}, { courseId: Table1.selectedRow.id })
}}

It doesn’t work (it works as shown in the video I uploaded yesterday).

[vihar]

Hey @vernons, on the second code snippet I see there is a typo in the function name. To open modals on Appmith, we should use the showModal function.

In the code snippet you shared, it’s mentioned as showModel. But the rest looks fine to me.

[vernons]

Hi Viharkuma,

I think the typo was when I typed the item into the forum. I guess I didn’t use cut/paste, since it’s correct in the application.

I’m still not sure why the second case – with the correct spelling, of course – doesn’t work, but I’ve just reconfirmed that again. If I use the run and then the showModal sequentially, as in the first example, the data is populated correctly, but when I use the callback style in the second example, the data reflects data from the previously selected row.

Anyway, the sequential style works fine, so I’ll use that.

Thanks!
Vernon