Hi,
I am trying to build a nested accordion in my web application. The outer accordion works fine, but the inner one doesn't. It does not respond on a mouse click, so doesn't toggle between open/close.
I tried to do this in one web screen. I tried it by putting the inner accordion in a web block, that I then use within the outer accordion. But nothing works.
Is there anybody out there who has experience with this?
Best regards,
Robert
Hello @Robert Smulders
Just to give you the heads-up that this issue was fixed in OutSystems UI Web version 1.10.1 under the code ROU-3770 released on October 3.
Cheers,GM
Hi Gonçalo,
Thanks for the update on my post. And for the provided solution.
I was a few days off, but while I was off my colleagues installed the newest version of OutSystems UI Web. It looks like a new problem has been introduced.
The accordeon doesn't work anymore when it is used inside the ListRecords pattern!!!
My colleague Joost Timmermans already posted a reaction, but I didn't see a OutSystems response yet.
I think this new bug will also impact other OutSystems users. So I hope this can be resolved soon.
Hi Robert,
We have the same issue on our environment. I have made a workaround by doing the following:
- create a boolian variable and set this at the IsOpen parameter on the accordion item
- enclose the accordion item in a container
- enclosing the title of an accordion item in a container
- set an On Click event on that container
- In that event check if the boolean is true, if so, set it the false, if false, set it to true
- Ajax refresh the container with the accordion item
It is a bit of a dirty workaround and the user will have to toggle an item bij clicking on the title of the item instead of the accordion symbol, but maybe it is something you can use in the meanwhile.
Can you provide a sample OML with that behaviour being reproducible so that we can take a look?
Hi think I was able to reproduce and by looking at the code it doesn't seem that the pattern is even prepared for that use case (from a UX perspective/best practices is actually a pattern that is not advised). Even though I created a task in the backlog to do some further analysis and to understand if this is a use case we'll cover. Please refer for future reference to the code ROU-3770 in the release notes.Thank you for your feedback!
Thanks for your investigation Gonçalo.
I was a bit afraid I would get this reaction ;-)
"from a UX perspective/best practices is actually a pattern that is not advised"
But still in our case it would be nice if we could get it to work properly.
We want to use this scenario in an application only used internally, so UX is little bit less important.
Hello Robert,
It is quite some time since I worked with traditional apps, but let me ask you something.
If I remember well, accordions work with two widgets:An outer Accordion widget, and one or more accordeon item widgets (they can be created with a list).The accordion is required for the accordeon items to work.So, if you have an accordeon item inside another accordeon item, the inner one will will not work, I think.The hierarchy would be something like:Accordean
|
|______ Accordeon Item 1
|______ Accordeon Item 2
|________Inner Accordeon (inside Accordeon Item 2)
|______ Inner Accordeon Item 1
|______ Inner Accordeon Item 2
Do you have an accordeon around your inner accordeon item?
Hi Eduardo,
Thanks for your reply.
I tried both scenario's (with and without an accordion for the inner items), result is little different, but both didn't work 100%.
With an inner accordion the items don't respond.
Without an inner accordion the items respond, but the icon doesn't toggle.
Regards, Robert
Hello,
We noticed that our solution with Accordion item in accordion item was not working anymore
Accordion Accordion Item Accordion Item I changed it to Accordion in Accordion ItemAccordion Accordion Item Accordion Accordion Item Accordion Item etcThis works as long as a list records widget is not used.We need this list record to dynamically build the accordion items.
I hope this can be fixed
I did also some research. And it seems the JS only selects accordion items that are direct descendants of the accordion container. Can you fix this so that the JS will select only the first elements with the class accordion item inside the accordion container no matter how deep the level is.
Extra note. Please only select the accordion items that really belong to the accordion item, don't select nested accordion items in case a new accordion is placed in a accordion item.