Content\SectionExpandable for Moibile App

Content\SectionExpandable for Moibile App

  

On a screen i use the widget Content\SectionExpandabe twice.

I want to realize the follow thing:if the user expand an section, and after that he expands another section (on the same screen) that the expanded section will be closed. So every time you see only one expanded section. I use it for a mobile app. What to do?

I don't think Silk's SectionExpandable would natively (without some customization) attend this requirement.

You should take a look at the Accordion component.

http://labs.outsystems.net/dublinpreview/Content.aspx#PatternAccordion

João Melo wrote:

I don't think Silk's SectionExpandable would natively (without some customization) attend this requirement.

You should take a look at the Accordion component.

http://labs.outsystems.net/dublinpreview/Content.aspx#PatternAccordion

First: thanks for the quick answer.

Sorry I'm total new, but the Accordion component is for webcontent.

But i want to use it in an app for mobile.

I can not inlcuded it in my module for app building.


Solution

Off course.. I didn't realize that accordion is not available on mobile. Sorry.

But, in fact, there is an easy way to accomplish this, once we're talking about react. Please find the images below, and hope it's clear... Any doubt, just post here..


Create a Client Action ust to assign to Expanded the value passed in the parameter Expand.

Assign this Client Action to the handler of the ExpandOrCollpased event or each SectionExpandable component, passing an identifier to each one.

Use a variable called Expanded to control which section is expanded at a time, over the property isExpanded.


I attached a little demo. Hope it helps.

Solution

Thanks very much. It's works  

Sorry to bring up an old thread but this doesn't work anymore. 

Any idea how to achieve this? 

Tom Ciullo wrote:

Sorry to bring up an old thread but this doesn't work anymore. 

Any idea how to achieve this? 

I made a word document how to do this. (The document was written in Dutch an I just translate it with google translate). But I hope it can help you,


Arent,

I might be missing something here but your solution isn't working for mobile apps? Setting the isExpanded property of the sections to a boolean or boolean expression doesn't seem to make a difference. When the variable is toggled, the section doesn't re-render?

Thanks

Tom

Tom Ciullo wrote:

Arent,

I might be missing something here but your solution isn't working for mobile apps? Setting the isExpanded property of the sections to a boolean or boolean expression doesn't seem to make a difference. When the variable is toggled, the section doesn't re-render?

Thanks

Tom


I just test it. And it works for mobile apps. But the solution is the combination of an variable, the boolean expression and the clientaction as decribe in the attachment