Log in to AnswerLog in to Follow
Ma. Joy Aropon
347Views
15Comments
Solved
[OutSystems UI] Accordion IsExpanded only closes the Title but not the content
Question
Forge
OutSystems UI
Forge component by OutSystems R&D

Hi, I am currently using an accordion item inside a List, I set the value of the IsExpanded property to a variable with a boolean datatype and default value of false. On initial load, the accordion items are collapsed which is right since the value of IsExpanded is false. Now a created a client function that updates the value of isExpanded to true or false. When clicked, the accordion items were expanded all, however when clicked again to collapse, the content of the accordion is still in collapsed state. I am not sure if it is a bug that should be fixed on the widget. By the way, this is a reactive project. Thanks. 

1
0
on 2019-12-16
Bernardo Cardoso
Staff
Solution

Hi Ma. Joy Aropon,


This issue was fixed on the last release of OutSystems UI (2.3.0):

https://www.outsystems.com/forge/component-overview/1385/outsystems-ui


Best regards,

Bernardo Cardoso

See solution in context
0
0
on 2020-01-21

Have you try to  Ajax Refresh the container or the accordion itself?

0
0
on 2019-12-17

Joseph Omas wrote:

Have you try to  Ajax Refresh the container or the accordion itself?

Hi Joseph,


Reactive apps don't have ajax refresh.


Best regards,

Ricardo


0
0
on 2019-12-17
Leandro Correa
mvp_badge
MVP

Yeah, I got the same behavior here!

0
0
on 2019-12-17

Hi all,

it's not necessarily a bug in the accordeon widget itself, but in the outsystems react code that handles updating the accordeon when the underlying variable changes.  


You can see when you inspect the html, that using the toggle icon of the widget will update the section-expandable div between is--open and is--closed classes, and also update the section-expandable-content div between is--expanded and is-collapsed classes.

When you change a local IsExpanded variable, it will update the section-expandable div, but NOT the section-expandable-content div.  You can for example see that it does change the border and the title text boldness.


I can find a collapse and a expand function in OutsystemsUI.Content.AccordeonItem.mvc.js that look right to me, and when debugging, those are the ones executed when using the toggle icon on the widget.  These contain code for a transition animation, rolling the content up or down over a small amount of time.  When I change the local variable to influence the widget, this animation doesn't happen, that leads me to think some other code is executed, and that has the bug.  I'm not familiar with React.js, so I don't know really where to look for this.  


But here for the good news : as a work around, you could tweak the css for your module, applying the "collapsed" style to any section-expandable-content that is inside a section-expandable is--closed div. 

/* ================================================

Fix for Section Expandable

  ================================================ */

.section-expandable.is--closed .section-expandable-content {
    height: 0;
    padding: var(--space-none) var(--space-m);
    visibility: hidden;
    -servicestudio-height: auto;
    -servicestudio-padding: var(--space-none) var(--space-m) var(--space-m);
}


See attached oml.

If you really need this for professional project, might be worth to report a bug to OS.


Regards,

Dorine 


ReactAccordeonFix.oml

0
0
on 2019-12-17

Dorine Boudry wrote:

Hi all,

it's not necessarily a bug in the accordeon widget itself, but in the outsystems react code that handles updating the accordeon when the underlying variable changes.  


You can see when you inspect the html, that using the toggle icon of the widget will update the section-expandable div between is--open and is--closed classes, and also update the section-expandable-content div between is--expanded and is-collapsed classes.

When you change a local IsExpanded variable, it will update the section-expandable div, but NOT the section-expandable-content div.  You can for example see that it does change the border and the title text boldness.


I can find a collapse and a expand function in OutsystemsUI.Content.AccordeonItem.mvc.js that look right to me, and when debugging, those are the ones executed when using the toggle icon on the widget.  These contain code for a transition animation, rolling the content up or down over a small amount of time.  When I change the local variable to influence the widget, this animation doesn't happen, that leads me to think some other code is executed, and that has the bug.  I'm not familiar with React.js, so I don't know really where to look for this.  


But here for the good news : as a work around, you could tweak the css for your module, applying the "collapsed" style to any section-expandable-content that is inside a section-expandable is--closed div. 

/* ================================================

Fix for Section Expandable

  ================================================ */

.section-expandable.is--closed .section-expandable-content {
    height: 0;
    padding: var(--space-none) var(--space-m);
    visibility: hidden;
    -servicestudio-height: auto;
    -servicestudio-padding: var(--space-none) var(--space-m) var(--space-m);
}


See attached oml.

If you really need this for professional project, might be worth to report a bug to OS.


Regards,

Dorine 


Hi Dorine,

I have check your .oml file it it working fine.

In your .olm  UserAccordeon you apply accordion widget under list records and assign IsExpanded variable to each accordion that's why when you change value of IsExpanded variablew then all accordion id effected....

Thanks

Nik

0
0
on 2019-12-18

Nikhil Gondane wrote:

Hi Dorine,

I have check your .oml file it it working fine.

In your .olm  UserAccordeon you apply accordion widget under list records and assign IsExpanded variable to each accordion that's why when you change value of IsExpanded variablew then all accordion id effected....

Thanks

Nik


Hi Nikhil,

you are missing the point, just remove the fix css from my oml and try again, you'll see that collapsing with a button or switch don't work properly.


Dorine


And yes, my oml is working fine because it's what I'm proposing as a solution to the problem ;-)

0
0
on 2019-12-18

Dorine Boudry wrote:

Nikhil Gondane wrote:

Hi Dorine,

I have check your .oml file it it working fine.

In your .olm  UserAccordeon you apply accordion widget under list records and assign IsExpanded variable to each accordion that's why when you change value of IsExpanded variablew then all accordion id effected....

Thanks

Nik


Hi Nikhil,

you are missing the point, just remove the fix css from my oml and try again, you'll see that collapsing with a button or switch don't work properly.


Dorine


And yes, my oml is working fine because it's what I'm proposing as a solution to the problem ;-)

Hi Dorine ,

I  removed css from your oml after that published and check it work fine . Also I have add new Accordion without css  in same oml it is work fine .

0
0
on 2019-12-18

Ma. Joy Aropon wrote:

Hi, I am currently using an accordion item inside a List, I set the value of the IsExpanded property to a variable with a boolean datatype and default value of false. On initial load, the accordion items are collapsed which is right since the value of IsExpanded is false. Now a created a client function that updates the value of isExpanded to true or false. When clicked, the accordion items were expanded all, however when clicked again to collapse, the content of the accordion is still in collapsed state. I am not sure if it is a bug that should be fixed on the widget. By the way, this is a reactive project. Thanks. 

Hi,

What was the exact issue with Accordian....


0
0
on 2019-12-18

Hi Nikhil,

for me there is a bug without the extra CSS, so there must be a difference between us in either OS version or the browser we are using. 

Both Leandro and Ma.Joy also experienced this problem, can you tell us what OS version and what browser you are using ?


Dorine
0
0
on 2019-12-18

Dorine Boudry wrote:

Hi Nikhil,

for me there is a bug without the extra CSS, so there must be a difference between us in either OS version or the browser we are using. 

Both Leandro and Ma.Joy also experienced this problem, can you tell us what OS version and what browser you are using ?


Dorine

Hi Dorine, 

I am using OS 11.6.1 and Chrome browser.


0
0
on 2019-12-18

Hi Ma. Joy Aropon,

Thank you for the feedback! I'm sorry you encountered these issues.

This is indeed a defect on the AccordionItem pattern. We will work on a fix for a future release of OutSystems UI.

Meanwhile, I used Dorine Boudry oml to run some tests. Here's an updated one, with a cloned AccordionItem, with the fix. This way you don't need the css, it should all work as intended.


Let me know if it worked for you!


Best regards,

Bernardo Cardoso


ReactAccordeonCloneFix.oml

1
0
on 2019-12-18
Bernardo Cardoso
Staff
Solution

Hi Ma. Joy Aropon,


This issue was fixed on the last release of OutSystems UI (2.3.0):

https://www.outsystems.com/forge/component-overview/1385/outsystems-ui


Best regards,

Bernardo Cardoso

0
0
on 2020-01-15
Leandro Correa
mvp_badge
MVP

Nice!

0
0
on 2020-01-15

Hi team, there is no solution for tradicional web ? 

0
0
on 12th Mar

Hi Leonel.

I think you might have a different problem. This is a topic for reactive screens, maybe it will be better if you create a new topic for traditional and describe what exactly is your problem.

Cheers.

0
0
on 18th Mar
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.