Select item in list after form/query submits

Hi -

In my app I have a list, which displays workshops. If the user wants to create a new workshop, they select the button "Create New Workshops" and this causes a modal to pop up with a form in it. A user can then fill out the form and submit it.

What I'd like to do is that after the user submits the form the list will select the new workshop name.

As it is now, when the user submits the form, a query is run to add the items to a Google Sheet. On the success of that query a query is triggered to update the workshop list with the latest in Google Sheet, and to close the modal.

Some how in here I'd like to get the list to then display the new item. I'm running into a wall, or maybe a timing conflict. Any suggestions on how to tackle this?

And I have a solution that works, not sure if this is the best, so I'm open to alternatives.

When a form is successfully submitted (adding a role to a google sheet):

  • Set a Temporary State to the length+1 of the selected list data
  • Trigger the updating of the workshop list from the google sheet
  • close the modal with the form.

When in the query getting the workshop list from the google sheet, on success:
if (newWorkshopAdded.value != 0) {
newWorkshopAdded.value = 0;

The default state for the Temporary State is 0.

This works for now, if you have other ideas, please toss them out. I'm learning. Two things that caught me up is I didn't see the function "setValue", I was just trying to do selectedWorkshop.value = x. The other is confusing strings/numbers for the ID I have in the Google Sheet. One needs to watch the type value and importing.

Nice solution! I was able to come up with a different solution:

I created a transformer with return ( - 1) of the list in order to find the last index value, assuming this will be the most recently appended data.

I used that value to set the 'Default Value' and the 'Placeholder' of the list {{listData[transformer.value].columnName}} and that displayed the desired data in the list.

You may want to set some kind of || inside if you have not appended the data.

Thank you @grace for your solution too!

Though this sets the default to always be the last item, it feels like this is a more efficient method.

I'm not following you on the last comment about ||. I'm not familiar enough maybe on Javascript.