How would you do a Selection over different Tabs?

Ask us anything How do I?
1

Okay hear me out.

I am creating a selection that shall be able to determine ONE selected item out of a range of items that exist in three different tabs.

Screenshot_1
Screenshot_1974×532 135 KB

In the Screenshot you can see Three tabs.

  • I give my users the option to generate images. There I would have 4 images of which the user can select from. (still working on how to make them separately available. They are coming via API.
  • The user has also the option to upload an image.
  • The third tab holds a collection of images.

The end result shall be that the user is able to choose one singular image. I will use the URL of that particular image to save it in a database.

The selected image shall change the border to indicate that its selected. At the same time the image that was selected prior shall be deselected.

The selection shall be working through all 3 tabs, so the user can switch and select freely and images get selected, deselected.

There will at all times be only one selected image at a time.

I am trying to wrap my head around it, but am not 100% sure how I would trigger the selection, deselection as well as having a “on click” on every single image seems also very problematic.

2

Hi @LarsL :wave:

Apologies for the late reply.

Perhaps you could have a selectedItem object with different key/value pairs and, when someone clicks somewhere, you do a partial update of that object with the key value they just updated.

Does that make sense?

If not, could you maybe record a short video for us to show us the flow you’d like, what you tried already and where you’re stuck?

Feel free to jump into an Office Hour with Q and Flo as well. It might be easier to explain the use case live if that’s something you’re open to :slight_smile: