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:
- Allow for more control over the spacing and positioning of elements in it (as opposed to a normal List Collection)
- Allow for more flexibility in text styling (as opposed to a normal List Collection where the Title/Body/Caption text styles are forced)
- 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.
.
