[Question] Collapsing and Expanding views in perspective

Here is the behavior I would like:

I have been playing with perspective and haven’t figured out a view type to accomplish this yet. Is it possible with the current tool set? Any direction would be great.

1 Like

Hmm… I think this would probably be best done on our end as a new type of accordion component. Great idea, we’ll add this to our list.


Could this component be flexible in how the different sections are expanded/collapsed? e.g. @mattn1 wants to be able to click on sections to expand or collapse them, but could you also have them automatically expand or collapse based on a tag/expression binding?

I can see this being very useful for e.g. collapsing manual speed controls when a motor is switched to auto and the manual controls no longer apply, or automatically expanding a “detailed drive information” section when a drive is faulted, but just showing a high-level summary when things are normal. Effectively, be able to set a view up to show only the most relevant things in a dynamic manner, but still have all the other information accessible if the user wants to look at it, without having to resort to a lot of complex x and y position bindings

While it’s a lot of work, you could get this working with the existing Flex container, as long as you stay away from the Tag binding (as it would affect users in other sessions as well).

Essentially, you would set the FlexContainer.props.direction to “column”, and then place a Button and an Embedded View for each View you want to have in the “accordion” into the Flex Container.

The Button would have an onCLick event which toggles the visibility of the Embedded View. The Embedded View must also have an Expression binding on the EmbeddedView.position.basis property a la if({../<embedded_view_name>.meta.visible}, "<desired expanded_size>", "0px")

Any way to do this and nest the views without getting scroll bars?

I haven’t actually tested it, but in the style information for your embedded views, set the overflowX and overflowY to Hidden. If I understand you correctly, I think that will have the effect you want.

Carl, Is this feature available at this time?

Amusingly, the accordion component actually just became available in nightly builds...yesterday:

1 Like

Wonderful! Thanks @PGriffith