Issue with OS10 MobilePatterns Interaction Sidebar

Hi All,

I tried to use two Interaction/Sidebar. 1 for menu and 1 for utilities. However, when I tried to close the Utilities sidebar I wasn't able to hide it. After digging the javascript implementation of closing logic for the sidebar I found this ( see attached ).

I think this code is the one that causing the issue.


Hi Jovvy,

You're absolutely right, this is preventing you from using two sidebars.

We'll fix this for the next version of Silk UI Mobile.

Meanwhile, have you done any fix on your side? By using an ID instead of a class selector, you'll be able to target the right sidebar.


I'm about to develop my own sidebar. But, maybe I'll wait for the new version to come.

Something that you might also do without changing the sidebar: display the content with an If widget.

Same sidebar but different content, depending on the button that was pressed.


But what about the transition animations when you are opening the sidebar?

The Open action should control the visibility of the Sidebar and the right content to be displayed. When the Sidebar opens, the content should be already there. I've done this in the past, should work for you unless I'm not exactly following your use case.


So sorry if this is hijacking. I think it might be the same issue, if not then apologies and please let me know and I will delete and start a new thread.

I believe there is an issue with the sidebar in that if opened with a swipe then buttons which try to close it don't work.

In the todo demonstration application in the learning materials a sidebar is created for searching purposes. That sidebar has the 'IsOpen' property set to a Boolean screen-variable. That bool is switched by a couple of buttons set to flip the true/false value. The buttons work perfectly UNLESS the sidebar was opened by swiping - under that circumstance it can only be closed by swiping again, the flipping of the bool doesn't work.

I have tested both the version I created under instruction and the version in the 'quickstart' from the next lesson and that has the same issue (if it is an issue). I have tried both in the webbrowser and on my Android phone.

Please bear in mind I am very much a newbie with Outsystems so I could very well be wrong, this might be the expected behaviour or I might be just wrong! Thought I should mention it though.


Hi Danny,

You can use the event that the sidebar triggers to assign your local variable to the same value that the sidebar has, meaning that you'll be able to open using a button after closing with a swipe.


Hi Dinis,

Really sorry for naivety, but where would I find that event?




Sorry I gave you an incorrect answer to the problem :(

The event is not yet available, although it's planned to be released soon. Since adding events is a breaking change, we need to do it with a bit more planning. 

Unfortunately, at the moment the only way is to clone the Block and add the event manually.


I have tried to clone the block but was unable to save the application after the clone action. 

Is there any update on this issue, being solved permanently in Outsystems


Hetwich Hop wrote:


I have tried to clone the block but was unable to save the application after the clone action. 

Is there any update on this issue, being solved permanently in Outsystems



Opening a clone of the MobilePatterns espace allows you to copy the Block to your own espace and then perform the necessary changes.

Adding the event to the Sidebar Pattern will cause a breaking change and require developers to republish the whole factory, that's why it was not yet released in recent versions. This feature will be released in the next major release of Silk UI Mobile, also for other Patterns.

Thank you.


I have tried to copy the clone the sidebar block to my espace but after the copy action I was unable to save my application and therefore could not test it. What could be the reason for the error after the copy action.

This was very helpful. 

It worked for me, a few changes to references are needed to make it publish without error.

- copy sidebar block from cloned eSpace into your eSpace

- create the event etc as in above post

- copy 'MoveElement' action to your global client actions and ensure the 'Init' JS (in OnReady) references this one

- in your Sidebar block change the reference to use the 'Utilities/TouchEvents' from your eSpace

- remove cloned eSpace from dependencies 

Thats it!