The Magic Inline List that thinks it's a Choice Component šŸ˜±

I just had to share this, because Iā€™m so damned excited that we (@SantiagoPerez and myself) actually made it work. :joy: :joy: :partying_face: :partying_face:

So whatā€™s going on there??

  • Itā€™s an Inline List using a Tiles Layout, but each row of tiles is behaving like an individual choice component
  • The tiles are arranged in ā€œpairsā€ where the words in the left column of tiles have opposite meanings to the words in the right column
  • As each tile is tapped, the word in the tile is added to the list shown at the top
  • Tap the tile again, and the word is removed from the list
  • The use case is we want the user to be able to select either one of each pair, or neither - but NOT both
  • And thatā€™s where the ā€œmagicā€ kicks inā€¦ because selecting a tile where the opposing tile is already selected will cause that opposing tile to be de-selected and removed from the list.
  • Why is that magic? Because each word is in a different spreadsheet rowā€¦

HUGE kudos to @SantiagoPerez for helping me to get this working. Weā€™ve been bouncing ideas off each other for a couple of days, and finally cracked it on a marathon hangout call earlier today. It was a lot of fun :joy: (And also @Jeff_Hager - we used your Reset Multiple Rows example as a starting point)

Edit: oh, and @Lucas_Pires or @Robert_Petitto weā€™d love some CSS that we could apply to change the background colour of ā€œselectedā€ tiles. Thatā€™s the one bit we havenā€™t figured out yet. The bit of research Iā€™ve done leads me to believe it may not be possible without javascript. Especially flipping the colour of opposing tilesā€¦ scratch that, not necessary :grin:

18 Likes

Magic! another work of art this month. Congratulations @Darren_Murphy & @SantiagoPerez ! Okay, when am I getting my free copy :rofl: :rofl: :rofl:

3 Likes

:+1: This is fantastic

2 Likes

Rather than CSS, could you have a IF column to display a different image based on if an item is selected or not?

6 Likes

Ooh, thatā€™s a thought. Weā€™re not using any images at the moment. But we couldā€¦

3 Likes

Thatā€™s what I do in my calculator. The background images changes based on certain conditions.

1 Like

Do you actually need CSS for thatā€¦can you not achieve that via an ITEā€¦if selected one colour, if not another colourā€¦?

edit

like jeff mentioned.

2 Likes

Congrats @Darren_Murphy!

1 Like

los odio a los 2: @SantiagoPerez & @Darren_Murphy !!

Now, I have more work to do and learn :rofl:

Great solution!

3 Likes

Sometimes the simplest option is right in front of your nose :rofl: :joy:

https://www.loom.com/share/cdc64dce251a442694b7d01cd656fa4c

7 Likes

@Wiz.Wazeer,

Here you go.

I hope it is what you were expecting. :rofl:

Edit: if you get to improve it. Please, share it with us.

8 Likes

Awwwww my brothers! Thank you so much :blush::star_struck::star_struck::star_struck::star_struck: Great job!

Iā€™ll try to improve but I doubt I could !

1 Like

Damn salute you guys :cold_sweat: