Labels

Overview

The Labels behavior will display labels (CollectionMember) rows based on an AJAX lookup of one or more records. It is designed to work with both select and search panels, using just one AJAX call regardless of the number of source objects being looked up.

Usage

For an Organization select panel, add a div tag like this:

<div class="control-group">
  <label>Labels</label>
  <div class="controls">
    <span>
      <div data-behavior="Labels" data-labels-options="{{'object': 'Organization'}}" data-label="{OrganizationID}"/>
    </span>
  </div>
</div>

Note that the div tag containing the behavior includes both data-labels-options and data-label attributes.

For an Organization search panel, add the label behavior to the tbody, and a data-label tag to each row:

<tbody data-behavior="Selectable Labels" data-labels-options="{{'object': 'Organization'}}" data-selectable-options="..." >
...
  <tr>
    ...
    <td>
      <div data-label="{OrganizationID}"/>
    </td>
    ...
  </tr>
...
</tbody>

Options

  • object: (required) the object the labels are bound to (e.g. Organization, Contact, Person, Loan, etc.)
  • selector: ('div[data-label]') the css selector used to determine what IDs to get labels for
  • tokenHtml: ('{Collection} <i class="icon-remove icon-white"></i>') the html to render inside the token create for a label
  • tokenCss: ('badge') the css class to add to the token
  • activeCss: ('badge-success') the css class to add to the token if the label is active
  • inactiveCss: the css class to add to the token if the label is not active
  • deleteSelector: ('i.icon-remove') the css selector triggering a delete



Comments