Display Caption above Field Value

This material pertains to version 4.0 of Blackbaud CRM SDK.

Starting with Blackbaud CRM 4.0 Service Pack 4, the bbui-forms-summarytile-caption CSS class is applied to div tags for field captions when the caption is placed above the field value.

For example, the out-of-the-box Contact Information tile displays the Primary phone caption above its field value, so it applies the bbui-forms-summarytile-caption CSS class within a div tag in the row that contains #MAP#PHONENUMBER_caption.

<div id="#MAP#ConstituentSummaryContactInfoTileViewForm">
    <div class="bbui-forms-fieldset-row bbui-forms-summarytile-headerlinkcontainer">
        <a id="#MAP#CONTACTINFOLINK_action" class="#MAP#BOLD"></a>
    </div>
    <div class="bbui-forms-fieldset-row #MAP#CAPTIONROW">
        <table>
            <tr>
                <td>
                    <div id="#MAP#PHONENUMBER_caption" class="bbui-nocolon #MAP#toolbar-headertext bbui-forms-summarytile-caption bbui-forms-fieldset-column">
                    </div>
                </td>
                <td id="#MAP#EDITPHONENUMBER_container">
                    <div class="bbui-forms-fieldset-column">
                        <a id="#MAP#EDITPHONENUMBER_action" class="bbui-forms-summarytile-editaction"></a>
                    </div>
                </td>
            </tr>
        </table>
    </div>

And since it also displays the Primary email caption above its field value, the out-of-the-box Contact Information tile also the bbui-forms-summarytile-caption CSS class within a div tag in the row that contains #MAP#EMAILADDRESS_caption.

    <div class="bbui-forms-fieldset-row #MAP#CAPTIONROW">
        <table>
            <tr>
                <td>
                    <div id="#MAP#EMAILADDRESS_caption" class="bbui-nocolon #MAP#toolbar-headertext bbui-forms-summarytile-caption bbui-forms-fieldset-column">
                    </div>
                </td>
                <td id="#MAP#EDITEMAILADDRESS_container">
                    <div class="bbui-forms-fieldset-column">
                        <a id="#MAP#EDITEMAILADDRESS_action" class="bbui-forms-summarytile-editaction"></a>
                    </div>
                </td>
            </tr>
        </table>
    </div>