How to use Modal for Add and Update form

Hello Team,
I am new to Retool and it looks very interesting so exploring more.
I have created an app, which has Table. Added Add Button as a modal and inside model added form which contains some elements into it to save in database. Added one event handler on table row click which is opening same popup and binded form values as

{{ table1.selectedRow.data.SymbolId }}

This is working fine that in click of Add New its opening Modal and on table row click its opening same modal with seleted rows values.

Problem is, I am not able to differentiate how to perform insert if modal is opened on click of Add button and how to perform update on click of table row.

Could you please give a hint or share any reference where we are doing insert/update using modal?
Many Thanks in Advance!

@vivek.deshmukh Welcome to the community!
If I understand your question, you're looking to insert changes for the row clicked on in the table with the NEW data in the form in the modal? If so, you can add an event handler to the form submit button (if you're not POSTing the form)
The event handler should call a query that contains the form field values and when the insert is complete (Success) you should then add an Event handler to reload the table.
https://docs.retool.com/docs/event-handlers

Thank you @ScottR . I could able to attach an event handler and its working fine. Only problem is, when I click on Add or on table's row same modal is opening. So on that modal I am not able to differentiate weather it came after clicking on add or on clicking on table's row.
Ex- Modal dialogue contains one form component, it it opens after clicking on Add then form's title should be "Add Record" and if comes after clicking on table's row then its title would be "Edit Record". If I could able to achieve this, then I can apply conditional evt handlers to submit button which will call insert/update queries.

@vivek.deshmukh It will help me help you if you can provide screenshots noting which modal opens upon which event handler...

Hi @ScottR,
I have this Table and "Add User" modal button. On click of this "Add User" modal popup is opening as Below (Added only one cotrol to show the problem statement).



If I click on table's row, I am opening same table. Written in Javascript quiery to open a modal and attached this quiery on table row click as below.
image

Now If I click on any table's row, modal is opening but I want to change modal's form title from "Add User" to "Edit User" and bind selected rows values to the respective form controls.

@vivek.deshmukh I think, since you're only updating an email or a handful of fields for that row you can make the column editable and also use bulk update functionality if you want to edit more than one row at a time....
Opening a modal through a click isn't really necessary only because you can also set columns to be modals and open the data in that row in the modal... I would still go with Bulk Update....
https://docs.retool.com/docs/working-with-tables#editing-table-values-making-data-editable

Hi @ScottR . I have many other fields in the modal's forms. In the screen shot I showed was used only for the problem statement's reference purpose. Is there any other way we can achieve opening modal's on table rows click?

Use the Row click Event in the table itself and NOT in a JS query
When that modal opens containing the fields from the selected row - empty or not - you then use the button ON the form to update that row. When the UPDATE is successful, call the query that populates the table

Great. Much simpler. Working now. Last question please?
How to open blank modal form after clicking on "Add User". If I click on "Add User", it opens up the modal but all forms control value is defaulted to table's selected row.

I have setup up modal's form controls default value as "{{table1.selectedRow.data.email}}"

You would have to either use some logic to ignore what is in the row OR you would need to open a different modal - the modal email field cannot have BOTH {{table1.selectedRow.data.email}} AND a blank field - it's either one or the other.... You should think about what the user experience will be and try and simplify and delineate the experience depending on the task you need to accomplish

Okay. I have created one temp state variable and used it in a form. Its working as expected now.
Usage on model's default value is {{ addModel.value == true? null: table1.selectedRow.data.email}} where addModel is a temporary state variable.

Glad to hear that it works!