Tags

, , , , , ,

As already mentioned in a previous article, the otherwise very decent Webforms for Marketers module of Sitecore is in need of an update. The release of HTML5 has had an especially great impact on how we build forms on the web. This is the reason why I have made some HTML5 extensions to the WFFM module.

In this article I will show how to add a textbox with an expandable dropdown list underneath it. It is still a textbox, so the user is able to enter free text. But at the same time it has a list of suggestions that expands when the users focusses on the form or begins typing.

textboxdropdownlist

This constellation makes use of an <input> element, that is linked to a <datalist> element. The example has been taken from W3schools.com, where you can also tinker with it.

<input type="text" list="browsers" name="browser" />
<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

In the basis the control is the same as the Textbox with Placeholder, that we discussed in the previous article. It also inherits from the Sitecore.Form.Web.UI.Controls.SingleLineText class, and it also requires to add a custom field type item to the Sitecore tree.

The difference is that we add two new property the class: “Items” and “ListName”. The Items property is results in a field in the Form Editor in which you can construct a list, in the same way as you are used to in the DropDown list or the RadioButton list fields. The ListName property is used as the id for the <datalist> element, which enables the user to add more than one datalist forms fields to the page.

In the override of the DoRender() method, we read this Items property, and construct the correct HTML string with it. Also, we insert the selected ListName as the id of the <datalist>. Then, we let the HtmlTextWriter object write it to the page.

internal class TextBoxWithDataList : SingleLineText
{
[VisualFieldType(typeof(ListField))]
[TypeConverter(typeof(ListItemCollectionConverter))]
[DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
[VisualCategory("List")]
[PersistenceMode(PersistenceMode.InnerProperty)]
[VisualProperty("Items:", 100)]
public Sitecore.Form.Web.UI.Controls.ListItemCollection Items { get; set; }

[VisualCategory("List")]
[VisualFieldType(typeof(EditField)), Localize]
[VisualProperty("List name:", 100)]
public string ListName { get; set; }

protected override void DoRender(HtmlTextWriter writer)
{
   this.textbox.Attributes.Add("list", ListName);

   StringBuilder optionsElements = new StringBuilder();

   foreach (var item in Items)
   {
      string optionElement = string.Format("<option value='{0}'>", item.ToString());      

      optionsElements.Append(optionElement);   
   }   
   string dataListHtmlTemplate = "<datalist id='{0}'>{1}</datalist>";   
   dataListHtmlTemplate = string.Format(dataListHtmlTemplate, ListName, optionsElements);   

   writer.Write(dataListHtmlTemplate);   

   base.DoRender(writer);
}
}

There, the textbox with dropdown is ready to use. Please also note that the result is rendered differently in different browsers. The image in this article is taken from Firefox.

Advertisements