[Silk UI Framework] Close SectionExpandable widget after action

[Silk UI Framework] Close SectionExpandable widget after action

  
Forge Component
(45)
Published on 10 May by OutSystems Labs
45 votes
Published on 10 May by OutSystems Labs
Hello,

I have a SectionExpandable with a TableRecords in it. After the widget there's another list that will be visible after clicking on a record of the table.

What I'm trying to do is after I click on one of the records of the table, the second list becomes visible and then at the end of the action close the SectionExpandable making it return to the state when the page is loaded (where in the properties of the widget I have isExpanded = False).

Tried to put the widget inside a container and then refresh the container but it stays in the expanded state.

Any ideias?

Thanks in advance!
I am wanting to acheive the same thing so if anyone can help I would really appreciate this.

Solution
Hello Carlos,

I'm not entirely sure if I managed to replicate what you are trying to do, but here is an example on how you can do it (sorry for the big reply, but it was the best way to show you everything):

  • I created a new page, with a SectionExpandable (containing a TableRecord) and with a container (also containing a TableRecord inside it (See image below)
  • The SectionExpandable has the property IsExpanded = False, and the container ("MySecondList") has the Display property defined with a variable. This variable (ShowSecondList), has a default value = False
  • I added 2 buttons: the first Button (ShowSecondList) will toggle the Container, and the second (Hide List) will close the container and the SectionExpandable


  • Now, each buttons calls a different action.
  • The ShowSecondList action will set the variable "ShowSecondList" = true, and will do an ajax refresh to the container itself.
  • The HideList action will set the variable "ShowSecondList" = false, will do an ajax refresh to the second list container, and another one to the SectionExandable, so that you can close it.


This would be the final result of this implementation:

http://screencast.com/t/Xf6YthUD

Hope this answers your questions, and please let us know if you need more help.

Cheers,
Samuel Jesus
Solution