Move Position Of Row In A Table Based On Checkbox Value

[mriganka]

Hello

Non techie here

I am in the process of creating a very basic to-do list so that I can slowly learn the functionalities of WeWeb and Xano. So far I have achieved the followign:

1. Pull a collection from Xano onto a table in WeWeb
2. When user checks/unchecks the checkbox next to a to-do task, the backend table in Xano gets updated. I’m able to achieve this by using a workflow which is attached to the checkedbox element.

Now, I want to achieve the following:

1. When the checkbox is checked (i.e. when value is true), I want the entire row to move to the bottom of the list
2. If the user unchecks the checkbox, the entire row should move back to it’s original position

How can I achieve this?

Thanks in advance for all your help!

Attaching a screenshot below:

[mriganka]

Good news! I was able to sort of achieve what I wanted to achieve using filters when I’m binding the collection to the table. Here’s what I did:

1. I created another collection below the first collection
2. In the first collection I added a filter when binding, with the condition that it should display only those items whose chechbox value is “false”
3. In the second collection I added a filter when binding, with the condition that it should display only those items whose checkbox value is “true”

To some extent it worked. BUT, if I checkbox one item, another random item from the first collection shows as checked. However, in the database, the correct values are getting recorded. For example - if there are three items - item_1, item_2 and item_3, and I check item_1, item_1 gets filtered correctly and the database in the backend shows that item_1 has a value “true”. However, in the frontend, item_3 also shows as checked but in the backend, item_3 still holds the correct value of “false”.

Here’s a link to a Loom recording. Unfortunately my mic wasn’t working and I couldn’t record the audio. Hopefully it can help -

Library | Loom - 16 September 2023 - Watch Video

[Broberto (Rob)]

Why not just sort the collection input by the value of your true_false column?
You could apply the same logic like @Joyce is using here, but without binding the value and by just simply sorting it by a static condition.

Add dynamic options to filter a collection using the select element

Or directly sort it in Xano. Btw, you also need to bind the checkboxes to your checked/unchecked value.

[mriganka]

Hi Broberto,

Sorting did help. And I was able to get the condition right. However, in preview mode, when I am checking the checkbox, I face the same issue as you can see in the Loom video I attached in my previous message. A random item gets checked in the frontend, without the corresponding value changing in the backend. So far, I’ve been able to achieve the desired condition using sort as well as filter. But I think this is a front end bug. Any idea how I can go about the front end issue?

[Broberto (Rob)]

You need to set the value of your backend checkbox to your checkbox on the frontend and then refresh the collection I think.

[mriganka]

I could be wrong but I think I’m doing that. Here’s a step by step:

1. User clicks on the checkbox in the frontend
2. Workflow step 1 - calls Xano api and updates the record in the backend.
3. Workflow step 2 - fetches the collection again

If I don’t add the sort or filter condition to the collection, everything works exactly as I want. The moment I add any kind of sort or filter condition, the front end produces erratic behavior. I even applied sorting logic in Xano backend api call to fetch collection without any front end filters or sorting and the same issue is happening. Below is a loom of what I’m facing. This is with backend api sorting the collection. No filter/sort in the frontend.

Pynapple | WeWeb - 17 September 2023 - Watch Video

This is the frontend behaviour when there is no sort/filter applied either in the backend or the frontend.

Re: Pynapple | WeWeb - 17 September 2023 - Watch Video

[Broberto (Rob)]

Can you send how the data is bound? I need to see how you determine the checkbox being selected from the backend into your checkbox. I’m 90% sure you have it wrong. Thats what I’m telling and asking you all the time

[mriganka]

Sure thing. I’m sure I’m doing something incorrectly too
Screenshots below:

Here I’m binding the rows of the table to the collection

After that, I’m binding the init value of the checkbox element.

Hope this helps

[Broberto (Rob)]

You might want to set your checkbox value to a dynamic value from the context, now it’s gonna be always false. As you seem to be referencing todo.data[0] ← fixed index

[mriganka]

I changed that to dynamic value from the context and the frontend is still showing buggy behavior. Attaching a loom. Am I missing something?

Pynapple | WeWeb - 18 September 2023 - Watch Video

[Broberto (Rob)]

Could you look at the value of the unwanted checkbox? What is it bound to?

[mriganka]

For the checkbox element, I have craeted two states. One is the default one and the other is checked. In the “checked” state, in the “condition” section, I have binded it using the formula item.data.complete=true

[mriganka]

Hey! I just managed to resolve the issue. I deleted the entire table and started from scratch and now it’s working

I don’t know what went wrong here, but its working now.

Thank you so much Broberto for pointing me in the right direction, especially with the sort and filter function. I learned a lot in the last few hours thanks to you