Created on 16 June 2020
icon_unfollowing
Login to follow
reactive-sidebar-with-overlay

Reactive Sidebar with Overlay

Stable version 2.0.0 (Compatible with OutSystems 11)
Uploaded on 06 September 2023 by 
reactive-sidebar-with-overlay

Reactive Sidebar with Overlay

Documentation
2.0.0

After installing the component, you need to place the block SidebarWithOverlay in the page in which you wish to have the sidebar. There are no limitations on where on the page you should place the widget, but we recommend placing it as low as possible in the widget tree. For example:


Download.aspx.png


Inputs


The widget has four inputs:

  • StartOpen - This input is non mandatory and controls the state of the sidebar when the page loads. If the input is True the sidebar will start open, if False, it will be closed. The default state of the sidebar is closed. To open or close the sidebar programatically use the client action ToggleSidebarWithOverlay
  • IsOverlayClickable - This input is non mandatory and controls if the gray overlay that appears when the sidebar is open, is clickable or not. If True, clicking on the overlay will close the sidebar, if False, clicking on the overlay will do nothing. The default value is True, so, by default, clicking on the overlay will result in the sidebar closing.
  • Direction - This input is non mandatory and defines from which side of the screen the sidebar opens from. This is based on the OutSystemsUI Static Entity Direction. The default value is Entities.Direction.Right;
  • ExtendedClass - This is a standard non mandatory field, so that you can add your own style to the sidebar via CSS. This input will be passed directly into the OutSystemsUI Sidebar, so any CSS code that works on the OutSystemsUI Sidebar will also work on this component.


Opening the sidebar


This component works in conjunction with a Client Action:

  • ToggleSidebarWithOverlay - This Client Action allows you to toggle between the open or close state of the sidebar. The only input of the action, WidgetId, is mandatory and should contain the Id of the SidebarWithOverlay widget.


The user can also close the sidebar by using the ESC key.


Events

This component has one event: 

  • OnToogle - This event will be triggered whenever the sidebar is opened or closed.


Customization

If you need the sidebar to have a different size you can use the following CSS classes on the ExtendedClass input:

  • sidebar-xs
  • sidebar-s
  • sidebar-m
  • sidebar-base
  • sidebar-l
  • sidebar-xl
  • sidebar-100vw


In this example, we added a CSS class to the ExtendedClass input which was "sidebar-l"


Download.aspx_1.png


This input resulted in the sidebar having a larger width, as you can see in the following image:


Download.aspx_2.png



It is also possible to have multiple instances of this component on the same page, as well as having two side bars opened at the same time. Please check the example bellow:

Download.aspx_3.png


To achieve the behavior of having one or more sidebars on top of each other you need to use the ExtendedClass input to make the sidebar on the bottom larger. In the example we used ExtendedClass = "sidebar-l".



Please open the Demo in your Service Studio to see a live example of how to use the component.


1.0.6

After installing the component, you need to place the block SidebarWithOverlay in the page in which you wish to have the sidebar. There are no limitations on where on the page you should place the widget, but we recommend placing it as low as possible in the widget tree. For example:


The widget has three inputs:

  1. StartOpen - This input is non mandatory and controls the state of the sidebar when the page loads. If the input is True the sidebar will start open, if False, it will be closed. The default state of the sidebar is closed. To open or close the sidebar programatically use the client action ToggleSidebarWithOverlay
  2. IsOverlayClickable - This input is non mandatory and controls if the gray overlay that appears when the sidebar is open, is clickable or not. If True, clicking on the overlay will close the sidebar, if False, clicking on the overlay will do nothing. The default value is True, so, by default, clicking on the overlay will result in the sidebar closing.
  3. ExtendedClass - This is a standard non mandatory field, so that you can add your own style to the sidebar via CSS. This input will be passed directly into the OutSystemsUI Sidebar, so any CSS code that works on the OutSystemsUI Sidebar will also work on this component.


This component works in conjunction with a Client Action:     

  1. ToggleSidebarWithOverlay - This Client Action allows you to toggle between the open or close state of the sidebar. The only input of the action, WidgetId, is mandatory and should contain the Id of the SidebarWithOverlay widget.
The user can also close the sidebar by using the ESC key or gestures on mobile phones.

This component has one event: 

  1. OnToogle - This event will be triggered whenever the sidebar is opened or closed.
If you need the sidebar to have a different size, or if you want the sidebar to be on the left hand side of the screen, you can use the following CSS classes on the ExtendedClass input: 
  • sidebar-xs
  • sidebar-s
  • sidebar-m
  • sidebar-base
  • sidebar-l
  • sidebar-xl
  • sidebar-100vw
  • sidebar-left


You can check the example bellow:

In this example, we added two CSS classes to the ExtendedClass input which where "sidebar-left sidebar-l"


This input resulted in the sidebar being on the left hand side of the screen and having a larger width, as you can see in the following image:

It is also possible to have multiple instances of this component on the same page, as well as having two side bars opened at the same time. Please check the example bellow:

To achieve the behavior of having one or more sidebars on top of each other you need to use the ExtendedClass input to make the sidebar on the bottom larger. In the example we used ExtendedClass = "sidebar-l".


Please open the Demo in your Service Studio to see a live example of how to use the component.


Support options
This asset is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from  who created this asset.
Dependencies
See all 1 dependencies