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:
Inputs
The widget has four inputs:
Opening the sidebar
This component works in conjunction with a Client Action:
The user can also close the sidebar by using the ESC key.
Events
This component has one event:
Customization
If you need the sidebar to have a different size you can use the following CSS classes on the ExtendedClass input:
In this example, we added a CSS class to the ExtendedClass input which was "sidebar-l"
This input resulted in the sidebar 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.
The widget has three 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.
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.
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:
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:
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: