-
Notifications
You must be signed in to change notification settings - Fork 84
BuildFire ListView Component
This sdk documentation is deprecated and will not be updated. Check out our new docs at https://sdk.buildfire.com/docs/listview/
The listView component provides a simple, consistent tool to display lists of items.
This component only functions on the widget!
The following must be included in the index.html file of the widget or service.
<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>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
The following options are available:
-
enableAddButton: If true, A floating add button is rendered.
The following methods are available:
Takes in an array of items, and loads them into the list view. See item structure. This method replaces all existing items
Appends a single item to the List View. See item structure.
The following event handlers can be assigned:
Triggered when the add button is clicked.
Triggered when an item is clicked. Passes the item in as the parameter.
Triggered when an item's action is clicked. Passes the item in as the parameter.
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.
An item's data can be changed. Once a change is made, calling item.update() will update the item.
// <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();
});
}
};