Opening a Right Sidebar using a Button

Hi guys,

I am trying to use the sidebar function in OS 11 for my web app.

I want to click a button and for it to display the side bar to the right.

I have added the navigation\sidebar to my screen, but I don't see a property in this to identify if it opened or closed.

Can someone guide me through this please?

Thanks, Asha

Solution

Hi Asha,


There's an action called toggle sidebar in Outsystems UI Web. 


After that, the button to open the sidebar must have an action associated. In this action, you put the toggle sidebar action passing the widget id as input (you should give a name to the sidebar widget for the widget id be available), like the following:

The button should be with the method ajax submit to prevent the page to be reloaded.

To close the sidebar, you should use the same action again.


Regards!

Solution

Asha Vadher wrote:

Hi guys,

I am trying to use the sidebar function in OS 11 for my web app.

I want to click a button and for it to display the side bar to the right.

I have added the navigation\sidebar to my screen, but I don't see a property in this to identify if it opened or closed.

Can someone guide me through this please?

Thanks, Asha

I have created one demo. Please check.


Kavita wrote:

Asha Vadher wrote:

Hi guys,

I am trying to use the sidebar function in OS 11 for my web app.

I want to click a button and for it to display the side bar to the right.

I have added the navigation\sidebar to my screen, but I don't see a property in this to identify if it opened or closed.

Can someone guide me through this please?

Thanks, Asha

I have created one demo. Please check.



I am creating a web app so this doesn't help me!

Bruno Marques wrote:

Hi Asha,


There's an action called toggle sidebar in Outsystems UI Web. 


After that, the button to open the sidebar must have an action associated. In this action, you put the toggle sidebar action passing the widget id as input (you should give a name to the sidebar widget for the widget id be available), like the following:

The button should be with the method ajax submit to prevent the page to be reloaded.

To close the sidebar, you should use the same action again.


Regards!

Hi Bruno,

This didn't work. By default I could see the sidebar on the page. Clicking the button didn't open or close it. Am I missing something else? 

Thanks,

Asha


Hi,


I attached the .oml file that I used to test the example that I gave above. Please check.


Regards!