Check Mark Image

With the TILEGOODIMAGEONLY CSS class, you can define image and display settings for a green check mark image in a tile. This class is available in span tags.

For example, to display a green check mark image beside certain phone numbers, the out-of-the-box Education tile specifies the TILEGOODIMAGEONLY CSS class within the span tag that contains ISPRIMARY_value.

    <div class="bbui-forms-fieldset-row">
        <table class="#MAP#DATATABLE">
            <tr id="#MAP#ISPRIMARY_container">
                <td>
                    <span id="#MAP#ISPRIMARY_value" class="TILEGOODIMAGEONLY"></span>
                </td>
                <td>
                    <span id="#MAP#ISPRIMARYTEXT_value" class="#MAP#BOLD"></span>
                </td>
            </tr>
        </table>
    </div>

With the bbui-valuestyles-good-imageandtext and bbui-valuestyles-good-imageonly CSS classes, you can define image and display settings for a green check mark image in a tile.

Note: For Blackbaud CRM 4.0 Service Pack 4, the bbui-valuestyles-good-imageandtext and bbui-valuestyles-good-imageonly CSS classes replace the TILEGOODIMAGEONLY CSS class. The old CSS class still works 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, if you create custom version of the out-of-the-box Addresses tile and want to display a green check mark image beside the address type for primary addresses, then you can apply the bbui-valuestyles-warning-imageandtext CSS class in the logic for the ADDRESSTYPE field in the VB class.

        If Me.ADDRESSTYPE.HasValue Then
            If address.IsPrimary Then
                Me.ADDRESSTYPE.ValueDisplayStyle = ValueDisplayStyle.GoodImageAndText
            Else
                Me.ADDRESSTYPE.ValueDisplayStyle = ValueDisplayStyle.Empty
            End If
        End If

We recommend that you apply value styles to the UI Model VB code rather than the UI Model HTML just like you would for any other custom view data form. However, you still have the option to apply the bbui-valuestyles-good-imageandtext and bbui-valuestyles-good-imageonly value styles directly to the HTML to define image and display settings for green check mark images in tiles. These classes are available in span tags or a tags.

For example, to display a green check mark image beside certain phone numbers, the out-of-the-box Education tile specifies the bbui-valuestyles-good-imageonly CSS class within the span tag that contains ISPRIMARY_value.

    <div class="bbui-forms-fieldset-row">
        <table class="#MAP#DATATABLE">
            <tr id="#MAP#ISPRIMARY_container">
                <td>
                    <span id="#MAP#ISPRIMARY_value" class="bbui-valuestyles-good-imageonly"></span>
                </td>
                <td>
                    <span id="#MAP#ISPRIMARYTEXT_value" class="bbui-forms-summarytile-subtleemphasis bbui-forms-summarytile-nowrap"></span>
                </td>
            </tr>
        </table>
    </div>