Forms - is it possible to display existing AND submit new?

Hi. I'm absolutely sure this must be possible - hopefully someone could point me in the right direction.
I have a table and when you click on a row a container appears with fields that populate with
{{table.selectedrow.data}}. This works extremely well.
I also have a separate form that I use to Add New Data - this appears in a modal and also works extremely well.

I was wondering if it was possible to combine the two and have a single form that displayed the table data or presented a blank form when a "add new" button was clicked? I hope that makes sense. Thanks in advance.

I'll take a shot at this one. I was intrigued by this post bc I took the easy route in my app by using multiple modals. Take this with a grain of salt as I'm not a js expert by any means. :wink:

Try using a ternary operator within form1.initialData. For example,

screenshot-axcede.retool.com-2022.03.02-08_43_26

I also used a ternary operator to toggle the button text w/ create/edit.

form1_button

I think the conditional is ok here but you could also set a temp state var to true if a row is selected then use that as your conditional.

edit:
I'll add that

  1. added a close event to the modal that deselected the row in the table.
  2. disabled select first/any row in the table on load.
2 Likes

ha!!!! that worked absolutely perfectly. That is such an elegant solution... absolutely love it. Thanks

Man, i wish had asked that question earlier - now i need to work back through and remove the unnecessary modals :grinning: The only thing I did slightly differently was to add a "add new" button that simply set the table selection to null thus allowing the ability to add a new record even after a selection had been made.
Thanks again

1 Like

Hi @matth, the submit button is an issue. For new entries, I need it to create a new entry and for editing records i need it to update the existing entry. I'm thinking about creating 2 buttons that hide/show dynamically but I wanted to check if you have any smart ideas to get the same button to perform tasks differently depending on the status?

I thought about this... I haven't changed my modals yet. Maybe a js query that has the logic to trigger either the create or update query? Some temp state might be helpful in this situation.

Your idea would probably work too. Depends on how you want to manage your state and what's more manageable/cleaner for your team in the long term.

Hiding the buttons works pretty well. I'll just go with that until I can learn to be a bit more fancy. I should have mentioned i created "Temp State" variable that goes to true when "add job" is clicked and false when the table is clicked. this allows you to control everything perfectly. Thanks for your input though @matth - really appreciate it.

1 Like