Couldn’t find a solution myself… I have a table with a header. The header contains only one collection item and a button. In the table cell is another table with collection items. I want to create a animation to give visual feedback, when the button is clicked. I created an “Active” state, bound it to a variable and start the animation with a workflow and a onClick trigger. It works fine so far, but if I click the button, all buttons are animated, not only the clicked one. How can I make sure, that only the clicked button gets triggered?
We might need to go back and forth a little here but it might be a good idea to bind the state of the button to a field in your backend (Airtable, Xano, Supabase, or whatever you are using).
The reason I mention this is assuming that once your user leave and then comes back to this page, the button should still reflect the “Active” state. Bind this state of your button to a status in your backend could solve for that.
To do this, you will create a Workflow on the click of the button to “Update” for whichever backend you are using. WeWeb should then prompt you to define which record you are looking to update, and therefore allowing you to properly change the status in the backend. This allows you to have a more successful “state” of your button.
Thank you for taking the time. I use Xano and I’ll have a look to at this. The way I want it to work is:
User clicks the button (it says “Create invoice”)
Button animation play as feedback that it was clicked
A webhook request is send to create the invoice in the backend and mark the records as billed
if the result is success, the text of the button changes and the whole table element disappaers
If the user revisit the page again, this dataset won’t show up again since it only show unbilled entries.
Since the hover state works fine for the actually hovered button, I thought I could get the same result with an active state. Instead is animates all buttons in the table
the key here is that you can use a boolean variable to trigger the action of a single button, but for a list of buttons you also need to know which button in the list has been clicked.
You can do this by using an object. It’s the same principle of keeping track of inputs inside a colletion list. Have a look at this post and this post
