Element: <oj-drawer-popup>

Oracle® JavaScript Extension Toolkit (JET)
17.1.0
G12196-01

Since:
  • 11.0.0
Module:
  • ojdrawerpopup

Note: This component is in maintenance mode. Suggested alternative: <oj-c-drawer-popup>. For help updating an existing application, see the migration section.

Note: This component is not supported in the following themes: Alta

QuickNav

Slots

Attributes

Events

Methods

Other Topics


JET Drawer Popup

Description: A drawer popup is an isolated element. A drawer is a panel that slides into the viewport.


<oj-drawer-popup>
   Start drawer content
</oj-drawer-popup>

<oj-drawer-popup edge="end" opened="true">
   End drawer content
</oj-drawer-popup>

<oj-drawer-popup edge="bottom">
   Bottom drawer content
</oj-drawer-popup>

Main section content

JET DrawerPopup and DrawerLayout look similar, but are intended to be used for different purposes.

Use DrawerPopup when you need to always show 'overlay' drawers.

Use DrawerLayout when you need to switch from 'reflow' display mode (big screens) to 'overlay' (small screens).

Migration

Read about current Core Pack limitations to decide when to migrate.
Please make note of the following:

To migrate from oj-drawer-popup to oj-c-drawer-popup, you need to revise the import statement and references to oj-c-drawer-popup in your app. In addition, please note the changes between the two components below.
role attribute

The role attribute custom value is no longer supported and the drawer will always have the ‘dialog’ role.

Keyboard End User Information

Target Key Action
Drawer element Esc Close the drawer

Accessibility

role

By default, the 'dialog' role will be set to Drawer Popup. The dialog role is used to mark up an application window that separates content from the rest of the page. This can be changed using custom role attribute.

However, adding role="dialog" alone is not sufficient to make a drawer accessible. It must be properly labeled. It is developer’s responsibility to define respective aria properties to meet accessibility requirements.

aria-labelledby

If a drawer already has a visible title bar, the text inside that bar can be used to label the dialog itself. Set the value of the aria-labelledby attribute to be the id of the element used to title the drawer. If there isn't appropriate text visible in the DOM that could be referenced with aria-labelledby use the aria-label attribute to define the accessible name of an element.

aria-describedby

If the drawer contains additional descriptive text besides the drawer title, this text can be associated with the drawer using the aria-describedby attribute.


Usage

Signature:

interface DrawerPopupElement

Typescript Import Format
//To typecheck the element APIs, import as below.
import { DrawerPopupElement } from "ojs/ojdrawerpopup";

//For the transpiled javascript to load the element's module, import as below
import "ojs/ojdrawerpopup";

For additional information visit:

Note: Application logic should not interact with the component's properties or invoke its methods until the BusyContext indicates that the component is ready for interaction.


Slots

JET components that allow child content support slots. Please see the slots section of the JET component overview doc for more information on allowed slot content and slot types.

Default

Specifies the default slot.

Attributes

auto-dismiss :("focus-loss"|"none")

Controls the close auto-dismiss behaviour to close the drawer. Click or tap on the scrim closes the drawer.
Default Value:
  • 'focus-loss'
Names
Item Name
Property autoDismiss
Property change event autoDismissChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-auto-dismiss-changed

close-gesture :("swipe"|"none")

Controls the close gesture to close the drawer.
Default Value:
  • 'swipe'
Names
Item Name
Property closeGesture
Property change event closeGestureChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-close-gesture-changed

edge :("start"|"end"|"bottom")

Specifies at what edge the drawer opens.
Default Value:
  • 'start'
Names
Item Name
Property edge
Property change event edgeChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-edge-changed

modality :("modal"|"modeless")

Controls the modality of the drawer.
Default Value:
  • 'modal'
Names
Item Name
Property modality
Property change event modalityChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-modality-changed

opened :boolean

Specifies the 'opened' state of the drawer.
Default Value:
  • false
Supports writeback:
  • true
Names
Item Name
Property opened
Property change event openedChanged
Property change listener attribute (must be of type function, see Events and Listeners for additional information.) on-opened-changed

Events

ojBeforeClose

Triggered immediately before the drawer closes. Call event.preventDefault() in the event listener to veto the event synchronously, which prevents the drawer from closing. Call event.detail.accept(Promise.reject()); in the event listener to veto the event asynchronously, which prevents the drawer from closing.
Properties:

All of the event payloads listed below can be found under event.detail. See Events and Listeners for additional information.

Name Type Description
accept (acceptPromise:Promise<void>) => void This method can be called with an application-created Promise to cancel this event asynchronously. The Promise should be resolved or rejected to accept or cancel the event, respectively.

ojClose

Triggered immediately after the drawer closes.

Methods

getProperty(property) : {any}

Retrieves a value for a property or a single subproperty for complex properties.
Parameters:
Name Type Description
property string The property name to get. Supports dot notation for subproperty access.
Returns:
Type
any

setProperties(properties) : {void}

Performs a batch set of properties.
Parameters:
Name Type Description
properties Object An object containing the property and value pairs to set.
Returns:
Type
void

setProperty(property, value) : {void}

Sets a property or a single subproperty for complex properties and notifies the component of the change, triggering a [property]Changed event.
Parameters:
Name Type Description
property string The property name to set. Supports dot notation for subproperty access.
value any The new value to set the property to.
Returns:
Type
void