I’m creating a simple todo list using a table.
The table is fetching a collection from Xano. The result is sorted in the frontend on WeWeb.
One of the columns in the table is a checkbox element. The init value of the checkbox is binded to a property of an item from the collection.
On clicking a checkbox, a workflow is triggered where the updated value is sent to my Xano backend and then I fetch the collection again. All of this works perfectly well till here.
Challenge I’m facing:
When the checkbox is clicked, there is no immediate visual feedback to the user that the checkbox was clicked. If the fetch collection did not have sort applied, then it’s not an issue. But becuase there is a sort that is applied, the entire row abruptly gets pushed to the bottom. Without a visual feedback to the user that the checkbox was clicked, it is a very jarring experience.
Things I’ve tried:
I’ve tried adding time delays to the workflow between sending updated data to Xano backend and fetching collection. Did not work.
I’ve watched the YT tutorial on using custom states. I tried using the method of applying the variable and then updating the variable on click in the workflow. Since my checkbox are linked to the collection, whenever any one checkbox is checked, it changes the value of all the checkboxes.
To put it very simply, this is the flow I’d like:
User clicks on any checkbox
An immediate visual feedback is shown (nothing fancy, just confirmation that the checkbox got checked)
Send the data to the backend to update the database using workflow
Fetch the collection
I’m getting steps 1,3 and 4 working correctly. How do I get step number 2?
Below is a loom of the problem. Hope it helps.
Many thanks in advance!
I also tried adding a custom javascript action in the workflow to sort the fetched collection. While running test, it showed that the sort worked. However in preview it did not work.
The “checked” state of the checkbox is binded to the item property of the collection. It shows as checked only if a item property has a value true. When the user clicks a checkbox, it sends the update to the backend, but since the “checked” state gets updated only on frontend update, it needs to fetch collection to show the updated state. So adding any amount of delay does not help in this case.
Is there any other way to change the state of the checkbox before fetching collection?
You could sort it via a function instead of on the load of the data, but it’s a little more complicated.
But what you could try is, add a delay. And on click, actually do item.checked = true via custom javascript right after the click. This way it will force the change. This will reset after the collection fetches again after the delay.
Try this: [after xano set todo completed], add custom javascript, NOT formula containing this
[Item.data.complete] = true
Then add your delay before the fetch collection (after the javascript). This now should force the state to checked and then flush it away with the new data from fetch collection and sort it.
You could probably also set it to true with change variable action, but with JS it’s guaranteed to be forced to change.
I tried this approach but I think I’m getting the JS code wrong. I tested the custom JS action in the workflow builder and it showed succeed, but the frontend still does not behave the expected way. Possible to point out what the mistake is? Screenshot below
If I do that, then the custom js action shows error. Screenshots below.
I’m not able to use a variable here because the checkboxes load as per the collection. And because the collection is dynamic, it’s not creating any checkbox variables for me to apply a change variable value in the workflow.
If I manully create a variable and assign the bind condition of the checkbox state to that variable, and then change the variable value in the workflow, then if I click on one checkbox, all the checkboxes get changed at once. There is no unique variable assigned to each checkbox since (i assume) the checkboxes are binded to the collection
It seems to work for me like this
in your case it would be like this: context.item.data.complete I thought it was simpler, sorry for wrong answers before (I was on the phone and unable to try it out myself). Like this it should work.
Yup, this way the action results in no bug. But the front end still doesn’t show the expected behaviour. It still shows teh checked state of the checkbox after the fetch collection.
My current flow:
On Change → Xano request to update backend → Custom JS action → Time delay → Fetch collection
