Phase 5 / Customizing Field Templates through its properties

Let’s suppose your Field Template contains a DateTextBox, and you want to change its AutoHintStyle property.

<des:DateTextBox id=\"DateTextBox1\" runat=\"server\" AutoHintStyle=\"???\" />

While you can declare the property directly in the Field Template, it's not very flexible. Properties like this change based on the situation. So either you create different Field Template files for each situation, or have some way to assign its value from the code in your Web Form.

The Field Template base classes expose properties that let you customize them. This topic explores how the page developer can set them without editing the actual Field Template file.

Let's start with an example. The Date_Edit.ascx Field Template shown here allows editing DateTextBox’s AutoHintStyle property through its ancestor class as shown below.

<%@ Control Language="C#" Inherits="PeterBlum.DES.BLD.DateEditFieldTemplate" %>
<script runat="server">

   protected void Page_Init(object sender, EventArgs e)
   {
      SetUpEditableDataControl(DateTextBox1);
      SetUpBLDDataFieldValidators(BLDDataFieldValidators1);
   }
</script>

<des:DateTextBox ID="DateTextBox1" runat="server" />
<des:BLDDataFieldValidators ID="BLDDataFieldValidators1" runat="server" />

public class BaseDateTimeEditFieldTemplate : BaseDateTimeFieldTemplate
{
  [TemplateProperty()]
  public AutoHintStyle AutoHintStyle
  {
    get { return GetPropertyFromHost<AutoHintStyle>(
      "AutoHintStyle", fAutoHintStyle ?? DefaultAutoHintStyle()); }
    set { fAutoHintStyle = value; }
  }
  private AutoHintStyle? fAutoHintStyle;

  protected virtual void ApplyAutoHint()
  {
     fBaseDateTextBox.AutoHintStyle = AutoHintStyle;
  } 
}

Every Field Template has some properties like this. They were created to let you customize the Field Template without editing it.

You can change these properties at the global, page, and control levels.

• For a global setting, use the Themes and Skins feature in the [web app]\BLD Templates\FieldTemplates.config file.

  <theme name="MyTheme">
    <skin requested="Date" skinid="" >
      <TemplateProperties AutoHintStyle="ToolTip" />
    </skin>
  </theme>

• For a page-level setting, use the BLDCustomizer’s FieldTemplateProperties collection.

  <des:BLDCustomizer id="Customizer1" runat="server" >
    <FieldTemplateProperties>
      <des:DateTimeFieldTemplateProperties AutoHintStyle="ToolTip" />
    </FieldTemplateProperties>
  </des:BLDCustomizer>

• For field-level setting, use the TemplateProperties collection on the BLDDataField control, BLDField control, and DataFieldInPattern object.

  <des:BLDDataField id="BirthDate" runat="server" DataField="BirthDate">
    <TemplateProperties>
      <des:DateTimeFieldTemplateProperties AutoHintStyle="ToolTip" />
    </TemplateProperties>
  </des:BLDDataField>

In the Page-level and field-level cases, the property is set by adding a TemplateProperties object to a collection. BLD includes a number of TemplateProperties classes, which expose the properties of the Field Templates for which they are intended.

In the next topic, you will learn about Field Template Behaviors, which also customize how Field Templates work.