Skip to main content

ListView

buildfire.components.listView#

The listView component provides a simple, consistent tool to display lists of items.

This component only functions on the widget!

Requirements#

The following must be included in the index.html file of the widget or service.

html
<head>
<-- required script tags -->
<script src="../../../scripts/buildfire.min.js"></script>
<script src="../../../scripts/buildfire/components/listView/listView.js"></script>
<-- required style tags -->
<link rel="stylesheet" href="../../../styles/components/listView.css" />
</head>
<body>
<-- target container -->
<div id="listViewContainer"></div>
</body>

How to initialize the List View#

Before assigning behavior or loading items, the component must be initialized. Be sure to include a target container with a unique ID. This ID is passed to the listView constructor.

See examples

Options#

The following options are available:

  • enableAddButton: If true, A floating add button is rendered.

Methods#

The following methods are available:

loadListViewItems(items)#

Takes in an array of items, and loads them into the list view. See item structure. This method replaces all existing items

addItem(item)#

Appends a single item to the List View. See item structure.

Handlers#

The following event handlers can be assigned:

onAddButtonClicked#

Triggered when the add button is clicked.

onItemClicked(item)#

Triggered when an item is clicked. Passes the item in as the parameter.

onItemActionClicked(item)#

Triggered when an item's action is clicked. Passes the item in as the parameter.

Item Structure#

Each item has the following properties:

  • id - Unique ID
  • title - Title of the item
  • imageUrl - Renders as the item's image
  • subtitle - Renders as a subtitle below the title
  • description - Optional description
  • action
    • icon - Icon classList to render as the action icon
  • data - Optional item data, does not render.

Updating items#

An item's data can be changed. Once a change is made, calling item.update() will update the item.

Examples#

// <div id="listViewContainer"></div> <-- this is included in the body
const listView = new buildfire.components.listView('listViewContainer', { enableAddButton: true });
listView.onAddButtonClicked =() => {
showJoinDialog();
};
listView.onItemClicked = item => {
buildfire.auth.openProfile(item.data.userId);
};
listView.onItemActionClicked = item => {
if (item.data.isFavorite) {
Favorites.remove(item.data.userId, () => {
item.data.isFavorite = false;
item.action.icon = 'icon glyphicon glyphicon-star-empty';
item.update();
});
} else {
Favorites.add(item.data.userId, () => {
item.data.isFavorite = true;
item.action.icon = 'icon glyphicon glyphicon-star';
item.update();
});
}
};