Skip to main content

Drawer

buildfire.components.drawer#

The drawer component provides a contextual modal that slides up from the bottom of the app. It will appear above any plugins, along with a backdrop that will dismiss the modal.

This component supports multiple tabs, which can be populated with either fully custom markup, or a list of actions and it also supports multi-selection mode, where users can select muliple items.

Requirements#

Widget#

<head>
<!-- JS -->
<script src="../../../scripts/buildfire.js"></script>
<script src="../../../scripts/buildfire/components/drawer/drawer.js"></script>
</head>

Methods#

open()
#

buildfire.components.drawer.open(options, callback)

This method takes an options object and builds the drawer UI. The callback will be executed with information (would be a single item or multiple items) on actions taken by the user.

buildfire.components.drawer.open(
{
header: "List of Contacts",
content: 'Pick Contacts',
multiSelection: true,
allowSelectAll : true,
multiSelectionActionButton: {text: 'Save', type: 'success'},
enableFilter : true,
isHTML: true,
triggerCallbackOnUIDismiss: false,
autoUseImageCdn: true,
listItems: [
{text:'John Doe', secondaryText: '+69128564795', imageUrl:'', selected: false},
{text:'Jane Doe', secondaryText: '+40197454359', imageUrl:'', selected: false},
{text:'John Doe', secondaryText: '+32134468726', imageUrl:'', selected: true}
]
},
(err, result) => {
if (err) return console.error(err);
console.log("Selected Contacts", result);
}
);

options#

NameTypeRequiredDescriptionDefault
headerstringnoText or HTML to be rendered as the drawer's header
contentstringnoText or HTML to be rendered in the drawer's body
multiSelectionbooleannoEnable multi-selection modefalse
allowSelectAllbooleannoAllow users to select/deselect all the items in the drawertrue
multiSelectionActionButtonobjectnoA button to get the selected items in the multi-selection mode
enableFilterbooleannoAllow users to search items in the drawertrue
isHTMLbooleannoSpecifies whether the provided strings for (header, content, listItems...) should be rendered as sanitized HTML instead of plaintexttrue
triggerCallbackOnUIDismissbooleannoTrigger a callback when users dismiss the drawer by clicking outside the drawer (in the backdrop)false
autoUseImageCdnbooleannoUse an image CDN to process and optimize imagestrue
listItems[object]noArray of listItems. In multi-selection mode, the user can select and get multiple items through the callback, otherwise (not multi-selection mode) when a listItem is clicked the callback executes with that item
tabs[object]noArray of tabs, which used to render multiple tabs in the drawer
notes

If you provide both listItems and tabs, only listItems will appear.

Multi-selection mode is not supported for tabs.

options.multiSelectionActionButton#
NameTypeRequiredDescriptionDefault
textstringnoText of the button'OK'
typestringnoType of the button (primary, success, info, danger, warning, default)'primary'
options.listItems#

Array of actions presented to the user.

NameTypeRequiredDescriptionDefault
idstringnoUnique identifier to differentiate actions taken by the user, which is sent back through the callback
textstringyesText presented to the user
secondaryTextstringnoAdditional text presented to the user
imageUrlstringnoImage of the listItem
selectedbooleannoTo specify if this listItem is already selected when the drawer openfalse
options.tabs#
NameTypeRequiredDescriptionDefault
textstringyesText to be used as the tab header
contentstringnoText or HTML to be rendered in tab
listItems[object]noArray of listItems. When a listItem is clicked the callback will execute with that item
note

If you provide both tab's content and tab's listItems, only tab's listItems will appear.

callback(err, result)#

Callback function after selection is complete or without selection and having the option triggerCallbackOnUIDismiss set to true

NameTypeDescription
errstringError string, null when operation is successful
result[object] or objectArray of listItems, which would be selected by users in (multi-selection mode), a single listItem if not (multi-selection mode) or null if the drawer is dismissed

More examples#

buildfire.components.drawer.open(
{
header: "List of Contacts",
content: 'Pick Contacts',
enableFilter : false,
isHTML: true,
tabs:[
{
text:'<span class="glyphicon glyphicon-user"></span>',
listItems: [
{id:'profile', icon:'glyphicon glyphicon-circle-arrow-right', text:'Open Profile'},
{id:'delete', icon:'glyphicon glyphicon-remove-circle', text:'delete'}]
},
{
text:'<span class="glyphicon glyphicon-tags"></span>',
content:'<div>Rich HTML here</div>'
}
]
},
(err, result) => {
if (err) return console.error(err);
console.log("Selected Contacts", result);
}
);

closeDrawer()
#

buildfire.components.drawer.closeDrawer()

Programatically closes the drawer.

buildfire.components.drawer.closeDrawer();

warning

The following section of components.drawer is deprecated and should not be used

openBottomDrawer() - Deprecated
#

buildfire.components.drawer.openBottomDrawer(options, callback)

This method takes an options object and builds the drawer UI. The callback will be executed with information on actions taken by the user.

buildfire.components.drawer.openBottomDrawer(
{
listItems: [
{
id: "item1",
text: "Item 1",
},
],
},
(err, result) => {
if (err) return console.error(err);
console.log("Action selected:", result.id);
}
);

options#

NameTypeRequiredDescriptionDefault
headerstringnoText or HTML to be rendered as drawer header
contentstringnoText or HTML to be rendered in drawers body
listItems[object]noArray of listItems. When listItem is clicked the callback executes with that items data
tabs[object]noArray of tabs used to render multiple tabs in the drawer.
options.listItem#

Array of actions presented to the user.

NameTypeRequiredDescriptionDefault
idstringyesUnique identifier to differentiate actions taken by the user
textstringyesText presented to the user
options.tabs#
NameTypeRequiredDescriptionDefault
textstringyesText to be used as the tab header
contentstringnoText or HTML to be rendered in tab
listItems[object]noArray of listItems. When a listItem is clicked the callback will execute with that item
note

If you provide both tab's content and tab's listItems, only tab's listItems will appear.

callback(err, result)#

Callback function after something is done

NameTypeDescription
errstringError string, null when operation is successful
resultobjectThe selected listItem

More examples#

buildfire.components.drawer.openBottomDrawer(
{
header: `
<div class="avatar">
<img src="https://s3-us-west-2.amazonaws.com/imagelibserver/52a3afae-f77c-11ea-b714-067610557690/8.png" />
</div>
`,
enableFilter: false,
tabs: [
{
text: `<span class="glyphicon glyphicon-user"></span>`,
listItems: [
{
id: "profile",
icon: "glyphicon glyphicon-circle-arrow-right",
text: "Open Profile",
},
{
id: "delete",
icon: "glyphicon glyphicon-remove-circle",
text: "delete",
},
],
},
{
text: `<span class="glyphicon glyphicon-tags"></span>`,
content: `<div>Rich HTML here</div>`,
},
],
},
(error, result) => {
if (error) return console.error(error);
console.log("Selected action", result.id);
}
);

openBottomListDrawer() - Deprecated
#

buildfire.components.drawer.openBottomListDrawer(options, callback)

This method takes an options object and builds the drawer UI. Only supports header, content, and listItems. The callback will be executed with information on actions taken by the user.

buildfire.components.drawer.openBottomListDrawer(
{
listItems: [
{
id: "item1",
text: "Item 1",
},
],
},
(err, result) => {
if (err) return console.error(err);
console.log("Action selected:", result.id);
}
);

options#

NameTypeRequiredDescriptionDefault
headerstringnoText or HTML to be rendered as drawer header
contentstringnoText or HTML to be rendered in drawers body
listItems[object]noArray of listItems. When listItem is clicked the callback executes with that items data
options.listItem#

See listItem;

callback(err, result)#

Callback function after something is done

NameTypeDescription
errstringError string, null when operation is successful
resultobjectThe selected listItem

openBottomTabDrawer() - Deprecated
#

buildfire.components.drawer.openBottomTabDrawer(options, callback)

This method takes an options object and builds the drawer UI. Only supports header, content, and tabs. The callback will be executed with information on actions taken by the user.

buildfire.components.drawer.openBottomTabDrawer(
{
tabs: [
{
text: `<span class="glyphicon glyphicon-user"></span>`,
listItems: [
{
id: "profile",
icon: "glyphicon glyphicon-circle-arrow-right",
text: "Open Profile",
},
{
id: "delete",
icon: "glyphicon glyphicon-remove-circle",
text: "delete",
},
],
},
{
text: `<span class="glyphicon glyphicon-tags"></span>`,
content: `<div>Rich HTML here</div>`,
},
],
},
(err, result) => {
if (err) return console.error(err);
console.log("Action selected:", result.id);
});

options#

NameTypeRequiredDescriptionDefault
headerstringnoText or HTML to be rendered as drawer header
contentstringnoText or HTML to be rendered in drawers body
tabs[object]noArray of tabs used to render multiple tabs in the drawer.
options.tabs#

See tabs

callback(err, result)#

Callback function after something is done

NameTypeDescription
errstringError string, null when operation is successful
resultobjectThe selected listItem