How can I create a "move right" or "move left" button for elements inside a row container

Hi everybody,

I am trying to make a clone of Asana, on the 'My Tasks" tab there’s a feature they have on some of the columns that I will like to to recreate. I have attached a screenshot

When “move right” is clicked, “Task Visibilty” and “Due Date” swap positions. Can I do that with Bubble? It acts very much like the new alignment settings on Bubble (see second screenshot)

Yes, I believe so. Never tried it but thinking off top of my head on how I would approach it.

  1. Set up option set that replicate the data fields you’d like to display in your columns.
  2. Create a group of format row. Add groups one for each columns you will have.
  3. In that group from step 2 which is table header, you’ll have a group for each column…make the group of the option set value which was created in step 1. Put onto that group a custom state of type number and make it a default value set to the position you want to order it within the header group.
  4. Set up so you know somehow and can reference dynamically the value which is column header value (ie: option set value) they want to reorder.
  5. When the user wants to move a selected group left, you will run a workflow to change the custom state sort order of the group by +1.

As I type this I imagine some issues to overcome based on this thought so far…likely you’ll want to find a better way to keep track of the relationship between the column header value (ie: option set) and the groups custom state value for sort order. If you can track those relationships easily it will be easier to change the other groups value (because if you change one group value by moving left or right, you’ll need to change the group to the right or left of it, by the equal amount in the opposite direction, which may be a bit difficult to keep track of without a plugin.

You could check out some of the plugins that do list manipulation actions that could make it simple to track the ‘current sort order’ and the ‘option value’ of a particular group and all other groups that represent column headers.

You’ll then need to have custom states on groups in a repeating group that display the value and make the field displayed equal to the values of the header.

It would take some time to get everything right, but it is doable.

Hi @boston85719 thanks for explaining. I didn’t really understand step 3. Do you mean each group in the header group should have a custom state?

Yes, there own custom state because they would have their own value to signal the sort order.

Essentially it boils down to needing to keep aligned the value of the header (option set value) and the sort order of the header (the position it is displayed from)…you are not actually changing the location of the group as you would with the layout editor, just changing what is the option set value for a particular group whose sort order value is of the ‘position’ you want that header value to be displayed in.

Definitely not an easy feature, definitely possible, most likely not worth the effort to implement, most assuredly would provide a great sense of achievement if implemented.

Hi @boston85719 since option sets values are not formatted as lists, how can they be moved around when the custom sate of their group is updated?

For example if I have an Option Set called Task Columns, with the values:

  • Due Date
  • Projects
  • Task Visibility
  • Collaborators

And I set the datasource of one of the groups like so:

Will I be able to change the datasource to a new value?

Please correct me if I misunderstood the solution you proposed.

To do this, you just need to change the ‘order’ property of the element…

Bubble doesn’t give access to that in the editor, so you’ll need to use some custom CSS, but you can just use a custom state (or group data variable) to set the order property.

Hi @adamhholmes thanks for contributing. What is the order property? How can I change it with custom states?

The ‘order’ property is a flexbox CSS property that defines the order (position) of an element within its parent container (in this case a row).

you can change it with a dynamic expression in some custom CSS (as it’s not a property Bubble gives us conditional control of in the editor).

Here’s a simple example of how you might do it (this doesn’t use custom states, but rather Group Data - but the concept is the same)

Change Row Order (bubbleapps.io)

2 Likes

@adamhholmes thank you! I understand what you mean now. That was helpful.

Here, do you mean I achieve the same thing with custom states alone? (no css or javascript needed?)

I mean just use a custom state instead of Group data (it really makes no difference).

okay, thanks @adamhholmes

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.