How do I present a list of selected values?

Hi all!

On the left side in the screenshot, I have a table from the users table. I’m trying to make it that when you click on a user, it moves to the “selected” list, and removes the item from the list on the left. Then, I will have to insert each user in the “selected” list to a database table as separate records.

Does anyone know how to achieve this? I assume I will have to use some components like the array component, or data store component, or not?

Use a database and boostrap5 table from the outset. In the onlick event of the user row, call a server connect form to ‘move’ the item to the appropriate table. In the onsuccess event of the form, reload the table(s).

If they’re all in one table (with a selected flag), then you should use 2 data-views - one filtere to show selected, the other filtered to show unselected

1 Like

Thank you for your reply.

I made an array with the values of the selected id’s.

How do I filter in the data view to show only the records with the id’s in the array?

You don’t need the array. Just use a dataview showing the data from the query with the filter set to your selection flag and another dataview showing the data from the query that is unselected.

It’s either in one or the other.

What flag are you setting ? A Boolean ?

I’m not sure exactly what you mean. My intent is not to move the user from the user table to another table.

Basically what I want is to select the needed users, and then copy the details to a new table. In between the copying I’m trying to show the selection in a new list on the right for user experience purposes.

Ok. Are you moving them to the other table as you select them? (Seems the easiest and best)

If so, again, it’s one query from the user table with a left join to the other table. The first dataview filters then represent the user table without the join key and the other dataview filter Dhows only the joined items.

Refresh the query after each move.

Hi,

I would like to move them in the end of the form as the settings will have multiple steps.

At the moment I think I’m close with the data store component:

I will now try to solve that the selected record disappears from the left side.

Thank you for your responses

So just to document how I solved this problem for future reference and in case someone needs to make something similar:

  • I used 2 data store components. 1 for unselected users, 1 for selected users.

  • I’m populating the unselected users data store with a flow, from a server connect action. (Guide from here)

  • On click on a row of user, I’m removing that record from that data store, and adding that record to the other data store.

  • On click of “Add all” and “remove all” I’m just clearing all data from both data store, and adding with a flow a “fresh” list from the sever action to the relevant data store.

3 Likes