Open a dynamic modal form from within a table

App Building
1

I have a custom table field of type "modal", whose text is dynamically populated from the table row using Edit {{currentRow.id}}:

form-modal
form-modal1568×730 63.5 KB

What I can't figure out is now to hook up that deal id with a custom action when the "Edit XXX" link is clicked. In particular, I want to do the following using a custom script:

  1. Make an API request using currentRow.id to fetch some additional data about the selected row.
  2. Use the response to populate a form which is displayed in the modal.
  3. Submit the form, creating a new API request, and reload the table row's data (reloading the whole table is an acceptable alternative).

Step 1 is where I'm stuck. The problem is that there is no way to edit properties of the modal component created by the column type. The modal itself opens when you click on the field in the preview editor, and you can add components to it, but you can't "focus" the modal itself to update its properties.

For example, as I workaround I can create a separate modal, mark it hidden, and then change my table column type to button, and open my hidden modal using modal1.open(). But this seems silly when there is already a column type "modal" presumably built for this purpose.

1 Like
2

Hi there @jonah :wave:

Thanks for bringing this up. This is definitely a known thing that we're trying to work through. For the time being may you try implementing the following workaround:

Try using a button that opens a module instead of the module col-type.

Let me know how that works for you!

3

Hi @Pawan,

I need similar thing like @jonah and need have populated modal with data of corresponding row, so what is the status of this feature? I would need implement it, I can use suggested workaround but is ugly ...

4

You can drag a modal into the canvas and set it to hidden = true... then when clicking on the link in the table set the table to select row on click and also set an event handler to OnClick to run a script and yourModal.open(); then in the form in the modal you can populate the form fields with yourTable.selectedRow.data....

1 Like