Add Image in Tile Body

With the TILENEWIMAGEANDTEXT CSS class, you can define an image and display settings for an Add action within a tile's body. This class is available in a tags.

For example, to insert an Add action beside the Notes field in the tile, the out-of-the-box Documentation and Interactions tile specifies the TILENEWIMAGEANDTEXT CSS class within the a tag that contains the ADDNOTE_action that opens the Add a note screen.

<div id="#MAP#ConstituentSummaryDocumentationandInteractionsTileViewForm" class="#MAP#TILEIMPLEMENTATION">
    <div class="bbui-forms-fieldset-row TILEHEADERLINKCONTAINER">
        <a id="#MAP#DOCUMENTATIONLINK_action" class="#MAP#BOLD"></a>
    </div>
    <div id="#MAP#DOCUMENTATIONTABLE" class="bbui-forms-fieldset-row">
        <table cellspacing="0">
            <tr>
                <td id="#MAP#NOTELINK_container">
                    <a id="#MAP#NOTELINK_action"></a>
                </td>
                <td id="#MAP#ADDNOTE_container">
                    <a id="#MAP#ADDNOTE_action" class="TILENEWIMAGEANDTEXT"></a>
                </td>

With the bbui-valuestyles-new-imageandtext and bbui-valuestyles-new-imageonly CSS classes, you can define an image and display settings for an Add action within a tile's body.

Note: For Blackbaud CRM 4.0 Service Pack 4, the bbui-valuestyles-new-imageandtext and bbui-valuestyles-new-imageonly CSS classes replace the TILENEWIMAGEANDTEXT 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 Primary Relationships tile and want to display an Add action when constituents do not have spouses, then you can apply the bbui-valuestyles-new-imageandtext CSS class in the logic for ADDSPOUSEACTION in the VB class.

        If Not Me.SPOUSELINK.Enabled Then
            Me.ADDSPOUSEACTION.Visible = Blackbaud.AppFx.UIModeling.Core.Security.FeatureSecurity.UserGrantedForm(Me.GetRequestContext(), Me.ADDSPOUSEACTION.DataFormInstanceId)
            Me.ADDSPOUSEACTION.ValueDisplayStyle = ValueDisplayStyle.NewImageAndText
        Else
            Me.ADDSPOUSEACTION.Visible = False
            Me.ADDSPOUSEACTION.Enabled = False
        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-new-imageandtext and bbui-valuestyles-new-imageonly value styles directly to the HTML to define image and display settings for Add actions in tiles. These classes are available in span tags or a tags.

For example, to insert an Add action beside the Notes field in the tile, the out-of-the-box Documentation and Interactions tile specifies the bbui-valuestyles-new-imageandtext CSS class within the a tag that contains the ADDNOTE_action that opens the Add a note screen.

<div id="#MAP#ConstituentSummaryDocumentationandInteractionsTileViewForm">
    <div class="bbui-forms-fieldset-row bbui-forms-summarytile-headerlinkcontainer">
        <a id="#MAP#DOCUMENTATIONLINK_action" class="#MAP#BOLD"></a>
    </div>
    <div id="#MAP#DOCUMENTATIONTABLE" class="bbui-forms-fieldset-row">
        <table cellspacing="0">
            <tr>
                <td id="#MAP#NOTELINK_container">
                    <a id="#MAP#NOTELINK_action"></a>
                </td>
                <td id="#MAP#ADDNOTE_container">
                    <a id="#MAP#ADDNOTE_action" class="bbui-valuestyles-new-imageandtext"></a>
                </td>