BuildFire Drawer Component

⚠️⚠️⚠️

This sdk documentation is deprecated and will not be updated. Check out our new docs at https://sdk.buildfire.com/docs/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.

How to use the Drawer Component

The drawer component supports the following methods.

Requirements

This component only works on the widget. Include the following in the index.html:

<script src="../../../scripts/buildfire/components/drawer/drawer.js"></script>

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.

options

• header
  • String, optional
  • This can be text or stringified HTML
  • Renders as a header for the drawer
• content
  • String, optional.
  • This can be text or stringified HTML
  • Renders as the body of the drawer
• listItems
  • Array, optional
  • Renders as the body of the drawer
  • When an item is clicked, the callback executes with that item's data
  • See How to Use List Items
• tabs
  • Array, optional
  • Renders as the body of the drawer
  • Supports both content and listItems
  • See How to Use Tabs

callback(error, result)

• error
  • Returns any errors that occur
• result
  • id
    • Boolean. Returns id of the listItem selected.

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.

options

• header
  • String, optional
  • This can be text or stringified HTML
  • Renders as a header for the drawer
• content
  • String, optional.
  • This can be text or stringified HTML
  • Renders as the body of the drawer
• listItems
  • Array, optional
  • Renders as the body of the drawer
  • When an item is clicked, the callback executes with that item's data
  • See How to Use List Items

callback(error, result)

• error
  • Returns any errors that occur
• result
  • id
    • Boolean. Returns id of the listItem selected.

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.

options

• header
  • String, optional
  • This can be text or stringified HTML
  • Renders as a header for the drawer
• content
  • String, optional.
  • This can be text or stringified HTML
  • Renders as the body of the drawer
• tabs
  • Array, optional
  • Renders as the body of the drawer
  • Supports both content and listItems
  • See How to Use Tabs

callback(error, result)

• error
  • Returns any errors that occur
• result
  • id
    • Boolean. Returns id of the listItem selected.

closeDrawer(callback)

This method closes the drawer UI. The callback will be executed when the drawer closes.

How to use listItems

listItems is an array of actions presented to the user. Each item has the following structure:

• item
  • id
    • String, required
    • Unique ID to differentiate actions taken by the user
  • text
    • String, required
    • Text presented to the user
  • icon
    • String, optional
    • Icon that renders alongside the item

When an action is clicked, its data is passed to the callback.

How to use tabs

tabs is an array of tab data used to render multiple tabs in the drawer. Tabs can either be content or listItems. Both options act identically to their counterparts above.

• tab
  • header
    • String, required.
    • Appears as the tab header
  • content
    • String, optional.
    • Rich content to render in the tab
• listItems
  • Array, optional.
  • List of actions (see above)

Example

const options = {
  header: `
    <div class="avatar">
      <img src="${imageUrl}" onerror="this.src=window._appRoot+'media/avatar.png'" />
    </div>
  `,
  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>`
  }]
};

const callback = (error, result) => {
  if (error) return console.error(error);

  switch (result.id) {
    //...
  }
};

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