Version: This material pertains to version 3.0 of Blackbaud CRM SDK.
When the List Builder column is displayed, the ColumnTemplates HTML that you author is used by the system to create an ExtJS XTemplate. The HTML provides markup for our columns. When a List Builder is displayed the XTemplate is used to process the markup. With XTemplate values are inserted dynamically into the HTML. This is accomplished with special placeholder tags within your HTML markup. In the example below, we see HTML markup with a {SOCIAL_FACEBOOKIMAGEKEY} placeholder tag. This tag references a column within the List Builder/QueryViewSpec. When the List Builder is displayed within the UI, the system processes the template and replace sthe placeholder tags with actual values retrieved by the SQL defined within the QueryViewSpec.
<img class="bbui-pages-datalistgrid-withimagekey-image" style="margin-top:0px" src="{SOCIAL_FACEBOOKIMAGEKEY}"/>
Dynamically Hide Composite Columns
With XTemplate, you can do things such as performing conditional processing with basic comparison operators, such as an IF statement. In this example we are displaying a composite column. We use <tpl if="SOCIAL_TWITTERUSERID"> to conditionally display a twitter image and twitter account if the constituent has a twitter user id. In the SQL for the QueryViewSpec which defines the business logic, we determine a value for a column named SOCIAL_TWITTERUSERID. If the value is blank the div tag containing the twitter account is not displayed.
Tip: Avoid placing complex business logic within the column template via XTemplate. Within the concept of a List Builder column template, the programming capabilities of ExtJS XTemplate are limited. The best place for business logic is the SQL that defines the QueryViewSpec for the List Builder. This includes the logic for determining whether a column should be displayed.
<div id="#MAP#SOCIALSUMMARY">
<tpl if="SOCIAL_TWITTERUSERID">
<div title="{SOCIAL_TWITTERUSERID_raw:htmlEncode}" class="bbui-pages-datalistgrid-withimagekey-wrapper" style="margin-top:1px">
<img class="bbui-pages-datalistgrid-withimagekey-image" style="margin-top:0px" src="{SOCIAL_TWITTERIMAGEKEY}"/>
<span class="bbui-pages-datalistgrid-withimagekey-value" title="{SOCIAL_TWITTERUSERID_raw}" ><a href="{SOCIAL_TWITTERURL_raw}">{SOCIAL_TWITTERUSERID}</a></span>
</div>
</tpl>
<tpl if="SOCIAL_FACEBOOKUSERID">
<div title="{SOCIAL_FACEBOOKUSERID_raw:htmlEncode}" class="bbui-pages-datalistgrid-withimagekey-wrapper" style="margin-top:1px">
<img class="bbui-pages-datalistgrid-withimagekey-image" style="margin-top:0px" src="{SOCIAL_FACEBOOKIMAGEKEY}"/>
<span class="bbui-pages-datalistgrid-withimagekey-value" title="{SOCIAL_FACEBOOKUSERID_raw}" ><a href="{SOCIAL_FACEBOOKURL_raw}">{SOCIAL_FACEBOOKUSERID}</a></span>
</div>
</tpl>
</div>
Tip: Be sure to review the composite column and column template code samples in both the Food Bank and Kitchen Sink SDK samples. In the food bank sample shown here, the FoodBankListBuilderColumnTemplates.html provides an example of column layout. After downloading and extracting zip file containing the food bank source code, the HTML file is located within the Blackbaud.CustomFx.FoodBank.UIModel project within the htmlforms\custom\blackbaud.customfx.foodbank folder. The food bank list builder with composite columns code sample is located within the Blackbaud.CustomFx.FoodBank.Catalog project within the \ListBuilder\Final\FoodBankListBuilderCompositeColumn.Query.xml spec file. For an additional example of column templates, See KitchenSinkListBuilder.Query.xml within the Kitchen Sink code samples that ship with the SDK. The code sample can be found within the catalog project within the \SDK\Samples\WebShellKitchenSink.Catalog\DataForms\Charts folder. See the Kitchen Sink Videos for more details on setting up the kitchen sink.
Use the template above, the constituent has both a Twitter account and a Facebook account. As a result, both account types are displayed in the composite column.
If we remove Twitter account from the constituent's record. The composite column will not display the div containing the twitter account information:
Tip: For more ideas on what is possible with XTemplate, check out the "new Ext.XTemplate" constructor method within Sencha's EXT JS XTemplate API documentation.