Add ability for renderers to toggle the visibility of rendered elements

[dclaux]

Implementation status

• TypeScript (Add ability for renderers to toggle the visibility of rendered elements #494)
• UWP
• WPF
• iOS
• Android
• Documentation

Problem

Multiple scenarios call for dynamically showing/hiding areas of a card as the user clicks a button. Currently, the closest way to do this is by using Action.ShowCard. However, Action.ShowCard is tied to an action set (be it an explicit ActionSet or the actions collection of a card) which make it impossible, for instance, to toggle the visibility of a portion of the card via a Container's selectAction.

Design

All renderers should make it possible to do the following:

• Find an element by Id within a card (Add Id property to all elements and actions #493)
• Parse custom properties on existing element types
• Toggle the visibility of any given element after it's been rendered.

In turn, the above capabilities make it possible for hosts to implement a custom Action.ToggleVisibility action that can be used as the selectAction on a container (for instance) to toggle the visibility of one or more elements in the card.

This issue doesn't call for any specific way the above capabilities should be exposed in the various renderers. What matter is that the capabilities exist.

In the TypeScript HTML renderer however, they will be exposed as follows:

• onParseElement event invoked every time any element is parsed. This allows a host to parse additional properties, such as, in this case, an isVisible property. This is necessary so a card author can set the initial visibility of a particular element.
• isVisible boolean property on the CardElement class

[andrewleader]

Would we want targetElementId to actually be an array of ids? A.k.a would any scenarios need to toggle the visibility of multiple separate elements? Or is just one id enough?

Feels like there'll be requests to toggle multiple, although I haven't thought through the scenarios to know for sure.

[dclaux]

That would make it possible to toggle the visibility of non-contiguous elements, and I am not sure that's desirable. The target scenario really is "show more details" and it seems to me it's better if we constrain to making it possible to show/hide a single element. Plus I think that if we do see an array of Ids is desirable in the future we could definitely support it as well; I would however start with a single Id.

[andrewleader]

But you could do some really neat things with toggling multiple. For example, you could have two images in the left column, one hidden and one visible, and then when you click the main area, it toggles those images and also shows the area below. Thus you can have an "expand" and "collapse" image

[dclaux]

True and great example. Unfortunately this feature is a hard sell already, and I fear making it even more powerful will make it even harder.

[andrewleader]

Was a decision made about toggling one vs multiple ids?

[dclaux]

At this stage it looks like the only thing we'll actually do will be to add the isVisible property and an API in renderers to get an element by Id. With that, Action.ToggleVisibility can be achieved via extensibility, and at that point the decision to support multiple target element Ids or not belongs to the host.

[dclaux]

The issue has been updated to only call for renderers to have the ability to toggle the visibility of rendererd elements at runtime. With what's proposed in this issue, Action.ToggleVisibility can be implemented through extensibility.

The issue was discussed and approved today.