Feature request: Container event handler / Clickable containers

I've been sitting on this wishlist item for a while, but the more I work with Mobile, the more I find myself needing it.

Currently, the only way to have a clickable container is via Custom Collections, as part of a repeat item. However, when I have a single item, I cannot simply make a container clickable, unless I force it into an unneeded custom collection - and most often, in order to achieve this, I have to feed that custom collection a bogus array of one item.

I've been juggling this approach so far, until the other day when I found myself needing to have a clickable container inside a one-item custom collection, but without making all the elements in the custom collection clickable.

Here's the example layout:


In the screenshot above, the green area is a custom collection which serves several purposes:

  1. Allow for more control over the spacing and positioning of elements in it (as opposed to a normal List Collection)
  2. Allow for more flexibility in text styling (as opposed to a normal List Collection where the Title/Body/Caption text styles are forced)
  3. Simplify data references by providing a data object to the collection, which is then used to populate the inner elements via {{item.name}}, {{item.gate_number}}, etc. Without providing the data object to the collection, the individual elements would need to reference some other object or query and if that were to change (like if switching from a query data to a temp state value), I would need to go and update each element individually, instead of making the change once at collection level.

What I needed is to make the ETA shaded area clickable, so when pressed, it would allow the user to take certain actions, like entering a new ETA. Given the flow of the app in previous steps, I did not want for the entire green area to be clickable.

Naturally, I tried to add yet another custom collection inside the existing main custom collection. That didn't quite work and I spent quite a bit of time trying to figure it out, until I learned that custom collections inside custom collections are not supported.

There are also other scenarios where being able to make a container clickable without jumping through hoops and loops would be helpful:


Above, I have an exception message that alerts the user to an issue with an item. Ideally, the user would be able to click on it to see more details.

I considered implementing this as a button which does allow for event handlers, but as per some of the criteria above, I would have to give up flexibility over size/spacing/padding and text styling/alignment since buttons are also limited when it comes to those things.

Another example is when I wanted a larger area to act as a button, without restricting the user to "aim" for a certain icon or text and without having to manage the same event in multiple places:


Here, the user would be able to click anywhere on the container bounds to edit the article.

Again, for more control over the elements, I cannot implement this as a button, or even as an icon AND a button (with transparent background) to make them both clickable, for multiple reasons.

I had come up with the idea for this type of "button" as a workaround for the fact that screen actions icons do not have a hidden/visibility option, so I can't hide the "Edit article" option from some users with certain, more restrictive roles.

So these are just some examples where the ability to simply set an event handler for a container would make life so much easier.

I'll be happy to provide further insights as needed.


+1 to all the above!

1 Like

I came across some screenshots from the iOS Health app and I couldn't help notice how "buttons" are implemented:

In Retool Mobile, this "look" or layout for buttons could easily be achieved as containers (with attached event handlers), giving full control over all the elements: text size/color/position, overall padding, icon display/position/size/color, etc.

Food for thought :slight_smile: .

For the sake of it, I recreated some of those elements in Retool:

Now, if only we could make those containers clickable.... :thinking:

+1, would be useful, especially on small devices and people wearing gloves