[OutSystems UI] Accordion Widget - Show/Hide doesn't work anymore
outsystems-ui
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive
Service Studio Version
11.14.15 (Build 60242)

Hello All,

in my app, I'm using the Accordion widget. Before the Service Studio Version was updated it works fine.

There is a button Show Details/ Hide Details. When you clicked to the button Show Details all accordion items was expanded. This works fine with a boolean variable. 



Now there is a new Accordion widget (the old one is deprecated) and I have to use an action instead of a boolean variable. AccordionExpandAll/AccordionCollapseAll. So far so good.

I used this actions which need as an input parameter the widgetId. The name of the Widget is Accordion_Taxo.

And for your information, the accordion is in a table:


But when I take a look for the inputParameter WidgetId of the action AccordionCollapseAll:

I don't find the WidgetId for this Accordion:

The RowCell with the Accordion is not visible in this widget list.

When I use an event for the rowCell, like onClick, the accordion widget id is available:

I would like to have the same possibility as I have bevor. It was so easy to implement. Just a variable. And now, I'm looking for a solution. Is there anybody who can help me?

Thanks in advance.

mvp_badge
MVP

Hi Pamela,

I too agree with your feedback. To get better help from the OutSystems team and to notify about this use case, I have linked the post to the OutSystemsUI. 

BTW, I do have an ugly workaround to suggest for your use case.

See this demo: AccordionInsideTableDemo

Implementation Steps:

1) Add ExtendedClass (dynamic) to the Accordion as shown below

2) On Show Details Button click execute the below mentioned JS

var accId = document.querySelector('.' + $parameters.jsClass).parentNode.id;

if (accId) {
    OutSystems.OSUI.Patterns.AccordionAPI.ExpandAllItems(accId);
} else 
    console.error('Accordion not found!');


3) On Hide Details Button click execute the below mentioned JS

var accId = document.querySelector('.' + $parameters.jsClass).parentNode.id;

if (accId) {
    OutSystems.OSUI.Patterns.AccordionAPI.CollapseAllItems(accId);
} else 
    console.error('Accordion not found!');

Note: The item defined inside Table/List gets assigned with id based on the table row count due to this reason during development (in service studio) you won't be able to reference the item Id property.

Refer to the attached oml file.

I hope this helps you!


Kind regards,

Benjith Sam

RWA_Lab_AccordionInsideTable.oml

Thanks for your fast answer. 

But it doesn't work for me. 

My Button Show/Hide is not in the table. Just the accordion. And unfortunately I haven't a JS knowledge... :-(


Hi @Pamela Teutschländer,

This is indeed a side-effect of how the platform works. You dan't have access to the ID, because it's on a dynamic context (a list widget would have the same problem).

@Benjith Sam solution is valid and it seems to work. You can use the same approach with a button outside of the table.

As an alternative, I used his oml to propose a different solution. It doesn't require JavaScript, uses only OutSystems logic and some more advanced usage of the React events available (componentDidMount):

  1. Use event componentDidMount on Accordion's wrapper container, where you will pass the AccordionId as parameter and Append it to a local variable that hold a list of AccordionId's.
  2. Then, on the close/open actions, you can simply use AccordionId[CurrentRowNumber] on a Cycle, to close or open all accordionItems.


I attached an oml with this implementation. 

Let me know if it helped! 


Best regards,

Bernardo Cardoso

OSLogicSolutionButtonOutside.oml

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