Version:

Paging Arrows and Record Count for Repeater Tiles

This material pertains to version 4.0 of Blackbaud CRM SDK.

With the TILEPAGINGLEFTARROW, and TILEPAGINGRIGHTARROW, TILEPAGINGARROWCONTAINER, and TILERECORDCOUNTTEXTCONTAINER CSS classes, you can display arrow buttons in a tile header to page through records and add spacing between the header, arrow buttons, and record count.

  • The TILEPAGINGLEFTARROW CSS class adds the image for a left-facing arrow button and specifies the behavior for hover and down button events. This class is available in a tags.

  • The TILEPAGINGRIGHTARROW CSS class adds the image for a right-facing arrow button and specifies the behavior for hover and down button events. This class is available in a tags.

  • When arrow buttons are included in the tile header for a repeater tile, the TILEPAGINGARROWCONTAINER CSS class specifies the spacing between the arrow buttons and anything else in the header. This class is available in div tags.

  • When a record count is included in the tile header for a repeater tile, the TILERECORDCOUNTTEXTCONTAINER CSS class specifies the spacing between the record count and anything else in the header. This class is available in div tags.

For example, to add spacing for a record count, the out-of-the-box Memberships tile specifies the TILERECORDCOUNTTEXTCONTAINER CSS class within the div that contains the MEMBERSHIPCOUNTTEXT_value field that displays the record count. Then to add spacing for the arrow buttons, it specifies the TILEPAGINGARROWCONTAINER CSS class within the div tags that contain the PREVIOUSACTION_action and NEXTACTION_action actions that page through memberships. And to insert the arrow buttons in the header, it specifies the TILEPAGINGLEFTARROW and TILEPAGINGRIGHTARROW CSS classes within the a tags for those actions.

<div id="#MAP#ConstituentSummaryMembershipsTileViewForm" class="#MAP#TILEIMPLEMENTATION">
    <div class="bbui-forms-fieldset-row">
        <div class="bbui-forms-fieldset-column TILEHEADERLINKCONTAINER">
            <a id="#MAP#MEMBERSHIPSLINK_action" class="#MAP#BOLD"></a>
        </div>
        <div class="bbui-forms-fieldset-column">
            <a id="#MAP#ADDMEMBERSHIP_action" class="TILEADDACTION"></a>
        </div>
        <div id="#MAP#MEMBERSHIPCOUNTTEXT_value" class="bbui-forms-fieldset-column TILERECORDCOUNTTEXTCONTAINER">
        </div>
        <div class="bbui-forms-fieldset-column TILEPAGINGARROWCONTAINER">
            <a id="#MAP#PREVIOUSACTION_action" class="TILEPAGINGLEFTARROW">&nbsp;</a>
        </div>
        <div class="bbui-forms-fieldset-column TILEPAGINGARROWCONTAINER">
            <a id="#MAP#NEXTACTION_action" class="TILEPAGINGRIGHTARROW">&nbsp;</a>
        </div>

With the bbui-forms-summarytile-pagingleftarrow, and bbui-forms-summarytile-pagingrightarrow, bbui-forms-summarytile-pagingarrowcontainer, and bbui-forms-summarytile-recordcounttextcontainer CSS classes, you can display arrow buttons in a tile header to page through records and add spacing between the header, arrow buttons, and record count.

  • The bbui-forms-summarytile-pagingleftarrow CSS class adds the image for a left-facing arrow button and specifies the behavior for hover and down button events. This class is available in a tags.

  • The bbui-forms-summarytile-pagingrightarrow CSS class adds the image for a right-facing arrow button and specifies the behavior for hover and down button events. This class is available in a tags.

  • When arrow buttons are included in the tile header for a repeater tile, the bbui-forms-summarytile-pagingarrowcontainer CSS class specifies the spacing between the arrow buttons and anything else in the header. This class is available in div tags.

  • When a record count is included in the tile header for a repeater tile, the bbui-forms-summarytile-recordcounttextcontainer CSS class specifies the spacing between the record count and anything else in the header. This class is available in div tags.

Note: For Blackbaud CRM 4.0 Service Pack 4, the bbui-forms-summarytile-pagingleftarrow, and bbui-forms-summarytile-pagingrightarrow, bbui-forms-summarytile-pagingarrowcontainer, and bbui-forms-summarytile-recordcounttextcontainer CSS classes replace the TILEPAGINGLEFTARROW, and TILEPAGINGRIGHTARROW, TILEPAGINGARROWCONTAINER, and TILERECORDCOUNTTEXTCONTAINER CSS classes. The old CSS classes still work as before for constituent tiles, but we recommend that you update custom tiles to reference the new styles so that as new features come in, you can take advantage of them in your tiles.

For example, to add spacing for a record count, the out-of-the-box Memberships tile specifies the bbui-forms-summarytile-recordcounttextcontainer CSS class within the div that contains the MEMBERSHIPCOUNTTEXT_value field that displays the record count. Then to add spacing for the arrow buttons, it specifies the bbui-forms-summarytile-pagingarrowcontainer CSS class within the div tags that contain the PREVIOUSACTION_action and NEXTACTION_action actions that page through memberships. And to insert the arrow buttons in the header, it specifies the bbui-forms-summarytile-pagingleftarrow and bbui-forms-summarytile-pagingrightarrow CSS classes within the a tags for those actions.

<div id="#MAP#ConstituentSummaryMembershipsTileViewForm">
    <div class="bbui-forms-fieldset-row">
        <div class="bbui-forms-fieldset-column bbui-forms-summarytile-headerlinkcontainer">
            <a id="#MAP#MEMBERSHIPSLINK_action" class="#MAP#BOLD"></a>
        </div>
        <div class="bbui-forms-fieldset-column">
            <a id="#MAP#ADDMEMBERSHIP_action" class="bbui-forms-summarytile-addaction"></a>
        </div>
        <div id="#MAP#MEMBERSHIPCOUNTTEXT_value" class="bbui-forms-fieldset-column bbui-forms-summarytile-recordcounttextcontainer">
        </div>
        <div class="bbui-forms-fieldset-column bbui-forms-summarytile-pagingarrowcontainer">
            <a id="#MAP#PREVIOUSACTION_action" class="bbui-forms-summarytile-pagingleftarrow">&nbsp;</a>
        </div>
        <div class="bbui-forms-fieldset-column bbui-forms-summarytile-pagingarrowcontainer">
            <a id="#MAP#NEXTACTION_action" class="bbui-forms-summarytile-pagingrightarrow">&nbsp;</a>
        </div>