One of the principals of the Redwood Design philosophy is to reduce clutter on a page, for example try not to overload the user with too much information up front, only show the information when needed. This is especially important if your user interface is going to be used on mobile phones with limited screen real estate. One easy way to reduce the amount of data on a page is to use drawers to show additional data just when needed. I blogged about using the off-canvas capability to do this in the past, but newer versions of Oracle JET and the Redwood components introduced the drawer component and several drawer templates and patterns. In the video below I show how to work with the drawer popup, a drawer template, and the design time experience for these components.
In general you add an oj-drawer-popup component to your page (some Redwood templates have specific slots for hosting drawers), and in it you add one of the Redwood drawer templates (general, bottom, or create and edit). You use a boolean variable tied to the drawer-popup's opened attribute to control whether the drawer is shown or hidden.
An important part in the demo shows the use of the oj-defer component to surround the drawer template – this helps you reduce the initial load of the page and only fetch and render information when you actually need it. (Note that in the demo I added the defer around the bind-if, the better location is around the drawer template itself).
For the general drawer you get an event (on-sp-close) that is invoked when you click the little x to close the drawer. In the bottom drawer layout the click on the x is going to set the variable tied to the drawer-state attribute to be closed – and you can add an event listener on it to handle the actual closing.
Here is a quick demo showing the functionality you get.
You can find more information about the Redwood drawer templates here.