Hello,
I've been struggling lately with 2 different implementation wher I keep running into the same problem.I have the concept of a master-detail screen that I wanted to be implemented as a "grid within a grid"
In the first approach I used a section expandable integrated in a table, as the first column of a row but it turns out quite messy in terms of responsiveness , and then i switched to a record list with accordions.
The thing is, in both implementations, if I expand a section/an accordion, when i switch to the next page, the content AT THE SAME INDEX as the previously opened item is kept as extended.
Has somebody else ran into this problem?
PS: I already tried javascript fixes in the following form ( this on the Accordion implementation) :
( the section expandable has an .expanded class when expanded, and the accordion an .open one) :
SyntaxEditor Code Snippet
"$('.AccordionVertical_item').each( function() { $(this).removeClass('open'); });"
P.S. I just tested.
You can add a RunJavaScript before the Ajax Refresh of the table, with the following code:
"$('.AccordionVertical_item.open .AccordionVertical__header').click();"
Hopefully this will be enough to solve it.
Cheers.
Hello Lorena,
Try to "click" the accordion instead of removing the tag, before refreshing the list, as I think (may be wrong), the active item is stored in a session variable (internal to SilkUI), as this would explain this behavior after the refresh.
In that case, remove the class would not work, as after the refresh, the item is build again with the class.
Hi Eduardo,
Thank you so much for your suggestion. It works indeed.
The only thing that is quite annoying is that the ajax refresh is running in paralel with the javascript (I guess), because the transition looks like this (I moved the script as the first node of the action but it didn't help):
Hi Lorena.Yes, I feared that.Contrary to what I thought, there is no "session" variable involved. It is just javascript controlling this (at first).If you wanna get your hands "dirt", you can clonse the Accordion and the AccordionVertical blocks from the WebPatterns, and change this small piece of code:
This code (the commented part) is the one responsible for keeping the accordion opened.If you replace with the code ai put there, it will not keep the accordion opened on refresh.Be careful, because this can have undesirable side effects...But It will solve this problem in this situation.
P.S: I never did this, but maybe another option would be to "replace" the javascript code, when building the page, using JavaScript, like, removing the listeners and reinitializing with a custom code like this. But I think this is even worse in terms of maintenability.
Thank you for your effort, Eduardo. Much appreciated !
You are right in terms of solutions and risks, I think the current behavior is acceptable and the code is easier to maintain as well.
Cheers, have a nice day !
Lorena Sabou wrote:
Cheers! :)
Hi Eduardo/Lorena,
I am facing similar issue with section expandable widget which is inside a list record.
Any lead would help.
Thanks,
Aditya
Hi Aditya,
What platform version are you using and what UI framework (OutSystems UI/Silk UI)? As far as I can tell, current implementation of AccordionItem (OutSystems UI) has an input parameter to determine if it will be rendered open or closed.
Jorge Martins wrote:
I am using V10 Silk UI patterns(section expandable not accordion item), the problem is when i switch to the next page, the content AT THE SAME INDEX as the previously opened item is kept as extended since it is inside list record widget.
I tried to remove the class: expandable but somehow it is overwriting.
Below image is when collapsed:
Below image is when expanded:
Hello Aditya,
The solution is basically the same as with the accordion.
Dinis posted an OML with a workaround for Expandable Section here: https://www.outsystems.com/forums/discussion/21533/issue-refreshing-section-expandable/
Cheers
Eduardo Jauch wrote:
That solution is feasible when we have multiple section expandable used but here i am using a single widget which is inside a list records and section expandable used then depends upon no. of records in side records.
Hi,
I am pretty sure that with some effort you can adapt the solution provided using also the solutions already given in this thread :)
Isn't something like this working for you?
In the action triggered when you switch to the next page, add a RunJavascript node with this code:
"$('.SectionExpandable.expanded .SectionExpandable_header').click();"
This will force all opened sections to close.
Regards,
Lorena
It Worked like a magic !! Thanks Lorena/Eduardo