Checklist

The checklist directive allows you to build a filterable checkbox list. The bb-checklist-columns element allows you to specify multiple columns for the rows in the checkbox list. You can display items in a list view where each row displays a title and description. The list view is preferred to the grid view because it is mobile-responsive.

Checklist settings

  • bb-checklist — Creates a filterable checkbox list.
    • bb-checklist-items — An array of objects that represents the rows to display in the list.
    • bb-checklist-selected-items — An array that represents the selected items in the list.
    • bb-checklist-include-search — Provides a Boolean value to indicate whether to include a search text box to filter the checkbox list. A callback function can be used to filter the list based on search text. Search text is highlighted within the list.
    • bb-checklist-focus-search(Optional.) Instructs the checklist directive to apply the autofocus attribute to the checklist search input.
    • bb-checklist-search-placeholder — Specifies placeholder text to display in the search text box.
    • bb-checklist-filter-callback — Specifies the function to be called when a user modifies the search text. The consumer uses this to update the bb-checklist-items array based on the search text. A single object is passed to the function as a parameter that contains the searchText and category, and subsetSelected properties. This is useful to load items remotely or to filter items with custom logic other than simple case-insensitive string matching.
    • bb-checklist-filter-local — Instructs the checklist directive to filter items in the list by making sure the properties of each item match a specified category or search text.
    • bb-checklist-search-debounce — Specifies the number of milliseconds to debounce changes to the search text. When making web requests in bb-checklist-filter-callback, this avoids new requests after each character that users type.
    • bb-checklist-no-items-message — Specifies a message to display when the list displays no items. (Default: No items found)
    • bb-checklist-mode — Specifies whether to display the checklist as a list or grid. List mode is preferred because it is mobile-responsive, but grid mode is the default for backwards-compatibility. (Default: grid)
      • list — Displays items in a list with titles and descriptions. Items are expected to have title, description, and category properties. This view is preferred to grid mode because it is mobile-responsive.
      • grid — Displays items in a grid with columns specified by bb-checklist-column elements. For backwards-compatibility reasons, this view is the default, but list mode is preferred because it is mobile-responsive.
    • bb-checklist-categories — An array of category names to build category filters at the top of the list.
    • bb-checklist-all-categories-label(Optional.) Specifies text for the category that includes all checklist items. (Default: All categories)
    • bb-checklist-select-style(Optional.) When set to single, the checklist will only allow selection of one item in the checklist.
    • bb-checklist-is-loading(Optional.) User can set to true to give indication that the checklist is loading items. Useful for when using remote search.
    • bb-checklist-subset-label(Optional.) Specifies a label for a checkbox to include or exclude a subset of the checklist items.
    • bb-checklist-subset-property(Optional.) Specifies a property name that will be used to filter by subset on the checklist items when using local search. The property will be set to true if it is a member of the subset.
    • bb-checklist-subset-exclude(Optional.) When using local search, instructs the checklist directive to exclude items with the bb-checklist-subset-property set to true when the subset checkbox is selected. When this attribute is not present, the checklist directive includes items with the bb-checklist-subset-property when the subset checkbox is selected.
    • bb-checklist-only-selected(Optional.) Instructs the checklist to include a checkbox which hides unselected items when checked.

Checklist column settings

  • bb-checklist-columns — Allows you to specify multiple columns of data for the checkbox list.
    • bb-checklist-column — Allows you to specify an individual column of data for the checkbox list.
      • bb-checklist-column-caption — Specifies caption text for the column header.
      • bb-checklist-column-field — Specifies the name of the property that contains the text to display in the column.
      • bb-checklist-column-class — Specifies a CSS class to apply to the column header and cells.
      • bb-checklist-column-width — Sets the width of the column.

Demo

List example


  • {{item.title}}

Single select example


  • {{item.title}}

Grid example


  • {{item.column}}

Markup

<div ng-controller="ChecklistTestController as checklistCtrl">
  <h3>List example</h3>
  <bb-checklist
                bb-checklist-items="checklistCtrl.listItems"
                bb-checklist-selected-items="checklistCtrl.selectedListItems"
                bb-checklist-include-search="checklistCtrl.includeSearch"
                bb-checklist-search-placeholder="Search for columns"
                bb-checklist-no-items-message="No columns found"
                bb-checklist-categories="['Constituent', 'Giving', 'Miscellaneous']"
                bb-checklist-mode="list"
                bb-checklist-subset-label="'Hide inactive'"
                bb-checklist-subset-property="inactive"
                bb-checklist-subset-exclude
                bb-checklist-only-selected
                bb-checklist-filter-local>
  </bb-checklist>
  <p></p>
  <label>
    <input bb-check type="checkbox" ng-model="checklistCtrl.includeSearch" /> Include search text box
  </label>
  <p></p>
  <hr>
  <p></p>
  <div>
    <label>Selected items:</label>
    <ul>
      <li ng-repeat="item in checklistCtrl.selectedListItems">{{item.title}}</li>
    </ul>
  </div>
  <h3>Single select example</h3>
  <bb-checklist
                bb-checklist-items="checklistCtrl.listItemsSingle"
                bb-checklist-selected-items="checklistCtrl.selectedSingleItem"
                bb-checklist-include-search="checklistCtrl.includeSearch"
                bb-checklist-search-placeholder="Search for columns"
                bb-checklist-no-items-message="No columns found"
                bb-checklist-categories="['Constituent', 'Giving', 'Miscellaneous']"
                bb-checklist-mode="list"
                bb-checklist-select-style="single"
                bb-checklist-subset-label="'Show inactive'"
                bb-checklist-subset-property="inactive"
                bb-checklist-filter-local>
  </bb-checklist>
  <p></p>
  <hr>
  <p></p>
  <div>
    <label>Selected item:</label>
    <ul>
      <li ng-repeat="item in checklistCtrl.selectedSingleItem">{{item.title}}</li>
    </ul>
  </div>
  <h3>Grid example</h3>
  <bb-checklist
                bb-checklist-items="checklistCtrl.items"
                bb-checklist-selected-items="checklistCtrl.selectedItems"
                bb-checklist-filter-callback="checklistCtrl.onSearch"
                bb-checklist-include-search="checklistCtrl.includeSearch"
                bb-checklist-search-placeholder="Search for columns"
                bb-checklist-no-items-message="'No columns found'">
    <bb-checklist-columns>
      <bb-checklist-column
                           bb-checklist-column-caption="'Column Name'"
                           bb-checklist-column-field="'column'"
                           bb-checklist-column-width="'30%'">
      </bb-checklist-column>
      <bb-checklist-column
                           bb-checklist-column-caption="'Column Description'"
                           bb-checklist-column-field="'description'"
                           bb-checklist-column-width="'70%'">
      </bb-checklist-column>
    </bb-checklist-columns>
  </bb-checklist>
  <br>
  <div>
    <label>Selected items:</label>
    <ul>
      <li ng-repeat="item in checklistCtrl.selectedItems">{{item.column}}</li>
    </ul>
  </div>
</div>

JavaScript

/* global angular */

(function () {
    'use strict';

    function ChecklistTestController() {
        var items,
            listItems,
            listItemsSingle,
            self = this;

        function loadItems(searchText) {
            var filteredItems = [],
                i;

            for (i = 0; i < items.length; i++) {
                if (!searchText || items[i].column.toLowerCase().indexOf(searchText.toLowerCase()) >= 0 || items[i].description.toLowerCase().indexOf(searchText.toLowerCase()) >= 0) {
                    filteredItems.push({ column: items[i].column, description: items[i].description });
                }
            }

            self.items = filteredItems;
        }

        items = [
            { column: 'Constituent summary', description: 'Summary information about the constituent who gave the gift' },
            { column: 'Soft credits', description: 'Soft credits for the gift' },
            { column: 'Amount', description: 'Amount of the gift' }
        ];

        listItems = [
            {
                title: 'Constituent summary',
                description: 'Summary information about the constituent who gave the gift',
                category: 'Constituent'
            },
            {
                title: 'Soft credits',
                description: 'Soft credits for the gift',
                category: 'Giving'
            },
            {
                title: 'Amount',
                description: 'Amount of the gift',
                category: 'Giving'
            },
            {
                title: 'Sweatshirt',
                description: 'This column has nothing to do with the other ones',
                category: 'Miscellaneous',
                inactive: true
            }
        ];

        listItemsSingle = listItems.slice();

        self.selectedItems = [];
        self.includeSearch = true;
        self.listItems = listItems;
        self.listItemsSingle = listItemsSingle;

        self.onSearch = function (args) {
            loadItems(args.searchText);
        };

        loadItems();
    }

    angular.module('stache')
      .controller('ChecklistTestController', ChecklistTestController);

}());