Warning Image
This material pertains to version 4.0 of Blackbaud CRM SDK.
With the TILEWARNINGNOCOLORIMAGEANDTEXT CSS class, you can define image and display settings for a warning image in a tile. This class is available in span tags or a tags.
For example, to display a warning image beside certain phone numbers, the out-of-the-box Contact Information tile specifies the TILEWARNINGNOCOLORIMAGEANDTEXT CSS class within the span tag that contains PHONENUMBERWITHWARNING_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-warning-imageandtext, bbui-valuestyles-warning-imageonly, and bbui-valuestyles-warning-nocolor-imageandtext CSS classes, you can define image and display settings for a warning image in a tile.
Note: For Blackbaud CRM 4.0 Service Pack 4, the bbui-valuestyles-warning-imageandtext, bbui-valuestyles-warning-imageonly, and bbui-valuestyles-warning-nocolor-imageandtext CSS classes replace the TILEWARNINGNOCOLORIMAGEANDTEXT 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 warning image beside the address type when addresses are marked as "Do not mail," then you can apply the bbui-valuestyles-warning-imageandtext CSS class in the logic for an ADDRESSTYPE field in the VB class.
If Me.ADDRESSTYPE.HasValue Then
If address.DoNotMail Then
Me.ADDRESSTYPE.ValueDisplayStyle = ValueDisplayStyle.WarningImageAndText
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-warning-imageandtext, bbui-valuestyles-warning-imageonly, and bbui-valuestyles-warning-nocolor-imageandtext value styles directly to the HTML to define image and display settings for warning images in tiles. These classes are available in span tags or a tags.
For example, to display a warning image beside certain phone numbers, the out-of-the-box Contact Information tile specifies the bbui-valuestyles-warning-nocolor-imageandtext CSS class within the span tag that contains PHONENUMBERWITHWARNING_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>