Version:

Padlock Image

This material pertains to version 4.0 of Blackbaud CRM SDK.

With the TILEPADLOCKIMAGEANDTEXT CSS class, you can define image and display settings for a padlock image in a tile. This class is available in span tags.

For example, to display a padlock image beside certain phone numbers, the out-of-the-box Contact Information tile specifies the TILEPADLOCKIMAGEANDTEXT CSS class within the span tag that contains PHONENUMBERWITHPADLOCK_value.

    <div class="bbui-forms-fieldset-row">
        <table>
            <tr>
                <td id="#MAP#PHONENUMBERVALUETEXT_container">
                    <div id="#MAP#PHONENUMBERVALUETEXT_value">
                    </div>
                </td>
                <td id="#MAP#PHONENUMBERWITHWARNING_container">
                    <span id="#MAP#PHONENUMBERWITHWARNING_value" class="TILEWARNINGNOCOLORIMAGEANDTEXT">
                    </span>
                </td>
                <td id="#MAP#PHONENUMBERWITHPADLOCK_container">
                    <span id="#MAP#PHONENUMBERWITHPADLOCK_value" class="TILEPADLOCKIMAGEANDTEXT"></span>
                </td>
                <td id="#MAP#ADDPHONENUMBER_td">
                    <a id="#MAP#ADDPHONENUMBER_action" class="TILENEWIMAGEANDTEXT"></a>
                </td>
            </tr>
        </table>

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

Note: For Blackbaud CRM 4.0 Service Pack 4, the bbui-valuestyles-padlock-imageandtext and bbui-valuestyles-padlock-imageonly CSS classes replace the TILEPADLOCKIMAGEANDTEXT 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 padlock image beside the address type when addresses are marked as "Confidential," then you can apply the bbui-valuestyles-padlock-imageandtext CSS class in the logic for the ADDRESSTYPE field in the VB class.

        If Me.ADDRESSTYPE.HasValue Then
            If address.IsConfidential Then
                Me.ADDRESSTYPE.ValueDisplayStyle = ValueDisplayStyle.PadlockImageAndText
            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-padlock-imageandtext and bbui-valuestyles-padlock-imageonly value styles directly to the HTML to define image and display settings for padlock images in tiles. These classes are available in span tags or a tags.

For example, to display a padlock image beside certain phone numbers, the out-of-the-box Contact Information tile specifies the bbui-valuestyles-padlock-imageandtext CSS class within the span tag that contains PHONENUMBERWITHPADLOCK_value.

    <div class="bbui-forms-fieldset-row">
        <table>
            <tr>
                <td id="#MAP#PHONENUMBERVALUETEXT_container">
                    <div id="#MAP#PHONENUMBERVALUETEXT_value" class="bbui-forms-summarytile-nowrap">
                    </div>
                </td>
                <td id="#MAP#PHONENUMBERWITHWARNING_container">
                    <span id="#MAP#PHONENUMBERWITHWARNING_value" class="bbui-forms-summarytile-nowrap bbui-valuestyles-warning-nocolor-imageandtext">
                    </span>
                </td>
                <td id="#MAP#PHONENUMBERWITHPADLOCK_container">
                    <span id="#MAP#PHONENUMBERWITHPADLOCK_value" class="bbui-forms-summarytile-nowrap bbui-valuestyles-padlock-imageandtext"></span>
                </td>
                <td id="#MAP#ADDPHONENUMBER_td">
                    <a id="#MAP#ADDPHONENUMBER_action" class="bbui-valuestyles-new-imageandtext"></a>
                </td>
            </tr>
        </table>