How can I keep an accordionto open after refresh?

I have an accordion inside of a web block which has a web block inside which has a button that refreshe the screen and all opened accordions will close. How to prevent that accordions which are opened, close? I man, how to keep open accordions still open after refresh?

Hi Andi,

On the OutsystemsUiWeb from the Forge, you have the accordion and accordion time with that possibility.


You just need to do the logic to know the items you want to be opened when the refresh happens.

Hope it helps.


Best regards,

Ricardo Pisco.

Hi Andi,

Are you building a Reactive application or Traditional?

Ossama

Hello Andi,

You have to develop a logic to pass a boolean value to the parent using events on the click of Refersh Button and reinitialize your Accordian Items with the new boolean value recevied, so that they can stay opened even after refreshing.

Assign the received boolean value to the IsOpen property of respective accordian items you want to keep open.


Hope this helps!


Regards,

Nikhil Purohit

Hi Andi,

Further expanding on Ricardo's solution, you can determine what accordion is opened by default by using a screen input parameter (e.g. called accordionNumber which is an integer indicating the accordion number that needs to be expanded once the page loads.)

Your button action would need to navigate to the current page at the end and pass in the accordion number you need to be expanded into the input parameter of the page.

Finally, you can configure the IsOpen parameters of your accordions to something like

Accordion 1: 

accordionNumber = 1

Accordion 2:

accordionNumber = 2

etc.

Ossama

Ossama Ghanem wrote:

Hi Andi,

Are you building a Reactive application or Traditional?

Ossama

 

 Traditional

Nikhil Purohit wrote:

Hello Andi,

You have to develop a logic to pass a boolean value to the parent using events on the click of Refersh Button and reinitialize your Accordian Items with the new boolean value recevied, so that they can stay opened even after refreshing.

Assign the received boolean value to the IsOpen property of respective accordian items you want to keep open.


Hope this helps!


Regards,

Nikhil Purohit

 Thanks! I'm gonna try this. 

 

Ossama Ghanem wrote:

Hi Andi,

Further expanding on Ricardo's solution, you can determine what accordion is opened by default by using a screen input parameter (e.g. called accordionNumber which is an integer indicating the accordion number that needs to be expanded once the page loads.)

Your button action would need to navigate to the current page at the end and pass in the accordion number you need to be expanded into the input parameter of the page.

Finally, you can configure the IsOpen parameters of your accordions to something like

Accordion 1: 

accordionNumber = 1

Accordion 2:

accordionNumber = 2

etc.

Ossama

 But I have the accordions inside of a list. Maybe the list current will give me my accordion?

 

Andi wrote:

Ossama Ghanem wrote:

Hi Andi,

Further expanding on Ricardo's solution, you can determine what accordion is opened by default by using a screen input parameter (e.g. called accordionNumber which is an integer indicating the accordion number that needs to be expanded once the page loads.)

Your button action would need to navigate to the current page at the end and pass in the accordion number you need to be expanded into the input parameter of the page.

Finally, you can configure the IsOpen parameters of your accordions to something like

Accordion 1: 

accordionNumber = 1

Accordion 2:

accordionNumber = 2

etc.

Ossama

 But I have the accordions inside of a list. Maybe the list current will give me my accordion?

 

 

 Hi Andi,

Potentially, however the list size might increase or decrease and so using the current row number might be unreliable.

In that case, I would suggest passing in the record ID in the accordionNumber parameter instead of a normal integer and your "IsOpen" parameter of your accordion would be something like

accordionNumber = List.Current.ID


Ossama

Ossama Ghanem wrote:

Andi wrote:

Ossama Ghanem wrote:

Hi Andi,

Further expanding on Ricardo's solution, you can determine what accordion is opened by default by using a screen input parameter (e.g. called accordionNumber which is an integer indicating the accordion number that needs to be expanded once the page loads.)

Your button action would need to navigate to the current page at the end and pass in the accordion number you need to be expanded into the input parameter of the page.

Finally, you can configure the IsOpen parameters of your accordions to something like

Accordion 1: 

accordionNumber = 1

Accordion 2:

accordionNumber = 2

etc.

Ossama

 But I have the accordions inside of a list. Maybe the list current will give me my accordion?

 

 

 Hi Andi,

Potentially, however the list size might increase or decrease and so using the current row number might be unreliable.

In that case, I would suggest passing in the record ID in the accordionNumber parameter instead of a normal integer and your "IsOpen" parameter of your accordion would be something like

accordionNumber = List.Current.ID


Ossama

 Where should I put the accordionNumber? In the action that gives me the boolean? And what is that for? Should I have an assign to one accordionNumber and than verify the boolean and if it is open it should be open? Something like this? Can you be more specific?

 

Hi Andi,

I've put together the following example which mimics your situation but with a list of users:

1. The screen has an input parameter called accordionNumber. Since I'm going to be listing users, accordionNumber is of type User Identifier.

2. On the page, I set up an accordion list driven by the ListRecords component. The ListRecord is pointing to my user aggregate defined in the preparation of my screen. 

3. The "IsOpen" parameter of the AccordionItem component checks if the accordionNumber matches the current UserID of the list. If true, the accordion will be expanded by default when the page loads.

4. In the action which refreshes the page, I pass in the required UserID in the accordionNumber parameter of the current page. This will ensure that the accordion for that ID is expanded when the page reloads. You should be able to pass the required ID into your action by adding an input parameter of that ID type in your action.

Solution

Ossama Ghanem wrote:

Hi Andi,

I've put together the following example which mimics your situation but with a list of users:

1. The screen has an input parameter called accordionNumber. Since I'm going to be listing users, accordionNumber is of type User Identifier.

2. On the page, I set up an accordion list driven by the ListRecords component. The ListRecord is pointing to my user aggregate defined in the preparation of my screen. 

3. The "IsOpen" parameter of the AccordionItem component checks if the accordionNumber matches the current UserID of the list. If true, the accordion will be expanded by default when the page loads.

4. In the action which refreshes the page, I pass in the required UserID in the accordionNumber parameter of the current page. This will ensure that the accordion for that ID is expanded when the page reloads. You should be able to pass the required ID into your action by adding an input parameter of that ID type in your action.

 

 Thanks, Ossama! It worked!

Solution