Calling artistic types....how do you use "Tiles"? My app looks dull and I want to use them

My app was built for monitors and mouse clicks. It’s therefore quite text based and I want to make it look less dull and be easier to use on phones, tablets etc. I also want them to look like it’s 2023 and not 1999.

Currently to choose a person in my app you’re faced with this…

Screenshot 2023-05-10 142724

It works but if you’ve got big fingers and a small screen it’s not all that nice. I want to present the data on “tiles”…a bit like this that I grabbed off a YouTube…

But I have a really basic question…What object is used to create the tile? Is it a shape with Text over the top of it? Or a button or a plugin or a formatted group? I want it to act in a way that when a tile is selected, it looks like it’s selected too…I can’t find a Youtube or any resource on how to do this. Can anyone point me in the right direction or tell me what to use so I can convert my boring, text based inputs etc into something that looks better?

Many thanks in advance.

Hi there, @joefarrowsmith… just food for thought, but it could be as simple as having a repeating group with no styling and having a group inside the repeating group that is styled to look like a tile (whatever that means to you). When it comes to making a selected tile look like it’s selected, what we covered in your topic from yesterday should do the trick… just change the styling of the group when a custom state’s value is the current cell’s index.

Again, just food for thought, and I hope it helps.

Best…
Mike

1 Like

Yeah… just change the styling of the parent container group (i.e. round the corners, make it a slightly different colour from the page background, and give it a slight shadow etc.)

1 Like

Thank you again Mike.
I’ve been playing with doing that today but just kept messing it up. However, I’ll not be defeated! It was yesterday’s success (entirely thanks to you!) that led me into believing I could make this look really cool. I’ll go and walk the dogs and will see if I can find my muse out there in the rain.
Thanks again.

1 Like

Many thanks for this Adam. I’m going to give it another stab this afternoon as per Mike’s suggestion of styling groups within Repeating Groups.
I think I was headed there but I confused myself by starting with a relatively complicated block of data and I’m deeply scared about breaking it all because I’m so stunned it works! Your and Mike’s confirmation is much appreciated though.
Thanks again
All the best

Here’s a simple example (based on the screenshot example you shared above), showing how you might go about reproducing something along those lines.

User Tile (bubbleapps.io)

This is really cool. Thank you. I’m kind of heading along those lines but mine’s, well…not quite there yet shall we say?! This is quite inspiring.
I’m just having a tiny issue with something when pressing on the tile and accidentally hitting text or an image that are contained within the tile…do I need to add the workflows to each element within the tile that could, potentially be pressed or can I just create a shape over the top of the tiles and make it, say, 0% opaque and attach my workflow to that? I may have just answered my own question there…
Thank you so much for going to the trouble to mock up that image though. It’s really helpful (and I’m still very much in awe of your Bubbling skills!)

You just need to run the workflow when the parent group itself (the ‘tile’) is clicked. (no need for any additional elements)

I’ve updated the example I did to include an on-click workflow (show alert), and an on-hover change in styling.

You can click anywhere within the tile to trigger the worklfow.

1 Like

Ahhh…that’s spectacular! Thank you. For some reason, unknown to anybody, I was displaying text in Inputs so I wasn’t able to “click” them. I’ve converted them to texts now and it’s working superbly and I’m going to look like I work in the 21st century now thanks to your assistance. And I won’t be creating 5 sets of workflows on things I don’t need! This is a big win (for me!).

1 Like