Skip to main content

The Drawer frame

A container that slides in from the side of the viewport.

Version: Cloud and 3.234 Edge

The Drawer frame is a container that slides into view when visible. You can add multiple instances of the Drawer frame that operate independently.

Demo

Properties​

All properties for this object with supported data types or values. You can write JavaScript almost anywhere in Retool to manipulate or read property values.

enableFullBleed​

Whether to expand the contents to fill available space.

Type boolean
Format True/False
Configurability Inspector > Appearance > Expand contents to fit
Default
false
Examples
true

footerPadding​

The amount of padding used within the footer.

Type string
Format Plain Text
Configurability Inspector > Content > Add-ons > Footer > Padding
Allowed Values
ValueUI OptionDescription
8px 12pxNormal

8px top and bottom, 12px left and right.

0None

No padding.

Default
8px 12px
Examples
"8px 12px"

headerPadding​

The amount of padding used within the header.

Type string
Format Plain Text
Configurability Inspector > Content > Add-ons > Header > Padding
Allowed Values
ValueUI OptionDescription
8px 12pxNormal

8px top and bottom, 12px left and right.

0None

No padding.

Default
8px 12px
Examples
"8px 12px"

hidden​

Whether this object is hidden from view.

Type boolean
Format True/False
Configurability Inspector > Appearance > Hidden
Default
false
Examples
true

hideOnEscape​

Whether to toggle hidden to true when the Esc key is pressed.

Type boolean
Format True/False
Configurability Inspector > Interaction > Advanced > Hide on escape
Default
true
Examples
true

loading​

Whether to display a loading indicator.

Type boolean
Format True/False
Configurability Inspector > Interaction > Loading
Default
false
Examples
true

overlayInteraction​

Whether to toggle hidden to true if the user clicks outside of the content area.

Type boolean
Format True/False
Configurability Inspector > Interaction > Close when clicking outside
Default
true
Examples
true

padding​

The amount of padding to render inside.

Type string
Format Plain Text
Configurability Inspector > Spacing > Padding
Allowed Values
ValueDescription
4px 8px

Normal padding.

0

No padding.

Default
4px 8px
Examples
4px 8px

showBorder​

Whether to show a border.

Type boolean
Format True/False
Configurability Inspector > Appearance > Show border
Default
false
Examples
true

showFooter​

Whether to show the footer area.

Type boolean
Configurability Inspector

showFooterBorder​

Whether to show a border above the footer.

Type boolean
Format True/False
Configurability Inspector > Content > Add-ons > Footer > Appearance > Show separator
Examples
true

showHeader​

Whether to show the header area.

Type boolean
Format True/False
Configurability Inspector > Content > Add-ons > Header > Appearance > Show header
Default
false
Examples
true

showHeaderBorder​

Whether to show a border under the header.

Type boolean
Format True/False
Configurability Inspector > Content > Add-ons > Header > Appearance > Show separator
Default
true
Examples
true

showOverlay​

Whether to display a darkened overlay when visible.

Type boolean
Format True/False
Configurability Inspector > Appearance > Show overlay
Examples
true

tooltipText​

The tooltip text to display next to the label on hover.

Type string
Format Markdown
Configurability Inspector > Content > Add-ons > Helper text
Default
null
Examples
Submit

Methods​

JavaScript API methods for this object. You can write JavaScript almost anywhere in Retool and use methods to manipulate data and property values.

drawer.hide()​

Hide the component.

Definition
drawer.hide()
Examples

Hide drawer.

drawer.hide();

drawer.scrollIntoView()​

Scrolls the canvas or parent container so that the selected component appears in the visible area.

Definition
drawer.scrollIntoView(options)
Parameters

options​

The scroll options.

Type object
Object Properties

behavior​

The scroll behavior.

Type string
Allowed Values
ValueDescription
auto

Scroll immediately to the specified position.

smooth

Scroll gradually to the specified position.

block​

The scroll position relative to the component.

Type string
Allowed Values
ValueDescription
nearest

Scrolls only the minimum amount required for the component to appear in the visible area. Scrolling does not occur if the component is already in view.

start

Scrolls to position the component at the top of the visible area.

center

Scrolls to position the component in the middle of the visible area.

end

Scrolls to position the component at the bottom of the visible area.

Examples

Scroll the minimum amount to immediately bring drawer into view.

drawer.scrollIntoView({behavior: 'auto', block: 'nearest'});

drawer.setHidden()​

Set the hidden value to toggle whether the component is visible. Defaults to true without a parameter.

Definition
drawer.setHidden(hidden)
Parameters

hidden​

Whether this object is hidden from view.

Type boolean
Format True/False
Default
false
Examples
true
Examples

Hide drawer.

drawer.setHidden(true);

Unhide drawer.

drawer.setHidden(false);

drawer.show()​

Show the component.

Definition
drawer.show()
Examples

Show drawer.

drawer.show();

drawer.showFooter()​

Set the showFooter value to toggle whether the component footer is visible.

Definition
drawer.showFooter(showFooter)
Parameters

showFooter​

Whether to show the footer area.

Type boolean
Examples

Show the footer of drawer.

drawer.setShowFooter(true);

Hide the footer of drawer.

drawer.setShowFooter(false);

drawer.showHeader()​

Set the showHeader value to toggle whether the component header is visible.

Definition
drawer.showHeader(showHeader)
Parameters

showHeader​

Whether to show the header area.

Type boolean
Format True/False
Default
false
Examples
true
Examples

Show the header of drawer.

drawer.setShowHeader(true);

Hide the header of drawer.

drawer.setShowHeader(false);

drawer.toggleHidden()​

Toggle the hidden value between true and false.

Definition
drawer.toggleHidden()
Examples

Toggle the hidden value of drawer.

drawer.toggleHidden();