Version:

Add Action in Header

This material pertains to version 4.0 of Blackbaud CRM SDK.

With the TILEADDACTION and TILEADDACTIONCONTAINER CSS classes, you can display an Add action in a tile header and add spacing between the action and the header.

  • The TILEADDACTION CSS class adds the image for an add action to a header and specifies the behavior for hover and down button events. This class is available in a tags.

  • When an add action is included in a tile header, the TILEADDACTIONCONTAINER CSS class specifies the spacing between the add action and the header. This class is available in div tags.

For example, to add spacing for an add action, the out-of-the-box Addresses tile specifies the TILEADDACTIONCONTAINER CSS class within the div that follows the div that contains the ADDRESSLINK_action that opens the Contact tab on the Constituent page. Then to insert the add action in the header, it specifies the TILEADDACTION CSS class within the a tag that contains the ADDADDRESS_action that opens the Add an address screen.

<div id="#MAP#ConstituentSummaryAddressesTileViewForm" class="#MAP#TILEIMPLEMENTATION">
<div class="bbui-forms-fieldset-row">
<div id="#MAP#ADDRESSLINK_container" class="bbui-forms-fieldset-column TILEHEADERLINKCONTAINER">
<a id="#MAP#ADDRESSESLINK_action" class="#MAP#BOLD"></a>
</div>
<div class="bbui-forms-fieldset-column TILEADDACTIONCONTAINER">
<a id="#MAP#ADDADDRESS_action" class="TILEADDACTION"></a>
</div>
<div id="#MAP#EDIT_container" class="bbui-forms-fieldset-column">
<a id="#MAP#EDIT_action" class="TILEEDITACTION"></a>
</div>

With the bbui-forms-summarytile-addaction and bbui-forms-summarytile-addactioncontainer CSS classes, you can display an Add action in a tile header and add spacing between the action and the header.

  • The bbui-forms-summarytile-addaction CSS class adds the image for an add action to a header and specifies the behavior for hover and down button events. This class is available in a tags.

  • When an add action is included in a tile header, the bbui-forms-summarytile-addactioncontainer CSS class specifies the spacing between the add action and the header. This class is available in div tags.

Note: For Blackbaud CRM 4.0 Service Pack 4, the bbui-forms-summarytile-addaction and bbui-forms-summarytile-addactioncontainer CSS classes replace the TILEADDACTION and TILEADDACTIONCONTAINER 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 an add action, the out-of-the-box Addresses tile specifies the bbui-forms-summarytile-addactioncontainer CSS class within the div that follows the div that contains the ADDRESSLINK_action that opens the Contact tab on the Constituent page. Then to insert the add action in the header, it specifies the bbui-forms-summarytile-addaction CSS class within the a tag that contains the ADDADDRESS_action that opens the Add an address screen.

<div id="#MAP#ConstituentSummaryAddressesTileViewForm">
<div class="bbui-forms-fieldset-row">
<div id="#MAP#ADDRESSLINK_container" class="bbui-forms-fieldset-column bbui-forms-summarytile-headerlinkcontainer">
<a id="#MAP#ADDRESSESLINK_action" class="#MAP#BOLD"></a>
</div>
<div class="bbui-forms-fieldset-column bbui-forms-summarytile-addactioncontainer">
<a id="#MAP#ADDADDRESS_action" class="bbui-forms-summarytile-addaction"></a>
</div>
<div id="#MAP#EDIT_container" class="bbui-forms-fieldset-column">
<a id="#MAP#EDIT_action" class="bbui-forms-summarytile-editaction"></a>
</div>