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:

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: