[Silk UI Web] Silk UI SectionExpandable

Forge Component
Published on 25 Mar by OutSystems R&D
87 votes
Published on 25 Mar by OutSystems R&D
I am using SilkUI SectionExpandable component to hold some containers. 
From within an action, I need to know whether or not the component is expanded.
Is there any way to do this?
Good afternoon,

From the default SILK Expandable you wont be able to know that information on a server side action, because the expand and collapse is only done on client side.

However you could change the Section Expandable to notify the server when you expand and collapse and then store that information on a variable.

If you want to make a client side action (through javascript) you tell if a section is expanded by the expanded class.

Best regards,
Thank you.
My operations are happeneing on the client side, so I assumend that this would need to be done through javascript. However, I am somewhat new to the the platform and I am struggling to understand exactly how to implement javascript. Is there an article or tutorial that you could recommend to get me started? 




The only javascript related help that I've found is this one:


But If you're more specific on your problem maybe I can help you : )

Best regards
Thank you. I have seen that article, but I can also be more specific.

I've implmented something I found on the forge (jQuery UI Drag and Drop) to use for drag-drop operations.
I'm also using the Silk UI expandable widget so that users  can hide content to save real estate.
Now, if the expandable component is collapsed (hidden really), and a user drops an item on an area that is DIRECTLY ON TOP of the hidden expandable widget, both items receive a drop notification (the visible area and the hidden area). 

What I need to do is make sure that the expandable component is not hidden when it receives the notification.
So basically, when I receive a notify event from the droppable area, I want to call a function that tells me whether the container is hidden.

Does  that make sense?



So through some trial and error, I figured out a way to do this.

I put a javascript even handler on the page to capature all clicks and then determine if the event came from the "clickable" elements of the expandable control (by name).

I then toggle a hidden input from the value "OPEN" to "CLOSED" respectively.

From my action that handles drag & drop, I check that variable assigned to the hidden input which tells me whether or not the expandable control is expanded. 

It seems to be reliable, although feels like a bit of a hack.

Any feedback would be appreciated.



Good morning,

Usually in that case I use the "Accept" from the droppable jquery constructor.

That allows me to insert a Class or Id that will trigger the droppable function.


Anyway, I think your code is a workaround for what the function does, but well, thats javascript :p there are plenty of ways of doing the same thing.

If you need anything else let me know.

Hi Cristiano,

I'd the same issue and I found a solution.

Probably, you don't need it anymore but others can need it.

Insert a name in SectionExpandable webblock and use "RunJavaScript" with the following code:

SyntaxEditor Code Snippet

"$('#" + SectionExpandable.Id + "').children().children().click()"