Microsoft Content Management Server Development : A Date-Time Picker Placeholder Control (part 1)

Have you ever tried getting authors to enter date and time values in a regular textbox? Even with well-placed instructions showing the proper format for the date (such as MM/DD/YYYY), you will often find that dates collected are invalid. Here are some real-life examples taken from a website that provided textboxes for entering the promotion start and end dates of a product:

Dates entered	Why it’s not valid
Start Date: Immediate! End Date: 31 February 2004 07:00 AM	The word “immediate” isn’t a valid date and 31 February 2004 does not exist, not even in a leap year!
Start Date: 1 January 2005 :00:00 AM End Date: 31 December 2005 (or while stocks last!)	While the start date is valid, the start time is missing the hour component. The end date appears valid, but it has extra text, or while stocks last, appended to it—making it invalid.
Start Date: 1 January 2005 End Date: 31/05/2005	In the start date, the word “January” is misspelled. The month and day fields in the end date are mixed up.

To ensure that date and time fields are entered correctly, authors can be provided with a date-time picker control, instead of a textbox. The date-time picker control includes a single-line, read-only textbox that displays the selected date and time. As the textbox is read-only, authors can’t amend its contents—making it impossible for authors to enter invalid dates.

Dates are selected by clicking on a Pick Date button, located next to the textbox. When it is clicked, a dialog for picking a date and time opens. The dialog contains a calendar for selecting the date and two dropdowns for choosing the time values.

In presentation view, the selected date and time appears on screen.

To make it almost impossible for invalid dates to be saved in the database, the contents of date-time picker control are usually validated before being saved.

MCMS does not ship with a date-time picker placeholder control, so let’s build one from scratch.

The DateTimePickerPlaceholderControl Class

Let’s begin building the date-time picker placeholder control by adding a class file named DateTimePickerPlaceholderControl.cs to the UsefulPlaceholderControls project.

The control requires the use of methods from the namespaces highlighted below, so add them to the class file.

using System;

using System.Web.UI.HtmlControls;
						using System.Web.UI.WebControls;
						using Microsoft.ContentManagement.Publishing;
						using Microsoft.ContentManagement.Publishing.Extensions.Placeholders;
						using Microsoft.ContentManagement.WebControls.Design;
						using Microsoft.ContentManagement.WebControls;
						namespace UsefulPlaceholderControls
{
  . . . code continues . . .
}

As the selected date and time is a single-line value, it will be easiest to store it as text within an HtmlPlaceholder (alternatively, you could store it in an XmlPlaceholder—however, that also means that you will have to extract the information from the saved XML later, which requires a little more code). The control will therefore support HtmlPlaceholderDefinitions. In addition, as none of the placeholder controls that ship with MCMS resembles a date-time picker, we will build the control from the ground up and have it inherit from the BasePlaceholderControl class:

namespace UsefulPlaceholderControls
{
  [SupportedPlaceholderDefinitionType(typeof(HtmlPlaceholderDefinition))]
						public class DateTimePickerPlaceholderControl : BasePlaceholderControl
  {
    public DateTimePickerPlaceholderControl()
    {
    }
  }
}

					  

Loading the Controls for Authoring

In authoring mode, the date-time picker placeholder will include:

• A textbox for displaying the selected date and time.

• A button for picking the date. When the button is clicked, a dialog appears for the author to pick the date and time.

We will use a table to arrange the TextBox and Button controls side by side. Below the table, we will add a Label for showing any exceptions that may occur during the loading process. Here’s the completed control in authoring mode:

Let’s start by adding the table to the authoring container. Override the CreateAuthoringChildControls() method as shown below. The table consists of a single row with two cells.

protected override void CreateAuthoringChildControls
                    (BaseModeContainer authoringContainer)
{
  // Add a table to help in the layout of the controls
  Table table = new Table();
  TableRow tr = new TableRow();
  table.Rows.Add(tr);

  TableCell td1 = new TableCell();
  TableCell td2 = new TableCell();
  tr.Cells.Add(td1);
  tr.Cells.Add(td2);

  // Add the table to the authoring container
  authoringContainer.Controls.Add(table);
}

Now, let’s add the read-only TextBox control to the cell on the left-hand side. The TextBox control will be given an ID of SelectedDateTime. We define the instance of the TextBox as a class-wide variable as we will be accessing it from other methods within the class.

private TextBox txtAuthoring;
protected override void CreateAuthoringChildControls
                    (BaseModeContainer authoringContainer)
{
  . . . code continues . . .
  // Add a Textbox
						txtAuthoring = new TextBox();
						txtAuthoring.ID = "SelectedDateTime";
						txtAuthoring.ReadOnly = true;
						td1.Controls.Add(txtAuthoring);
}

Next, we will add the Pick Date button. When the button is clicked, it calls up the dialog for selecting the date and time. Attached to the dialog’s URL are a couple of querystring parameters:

• CallingControl stores the name of the TextBox control to which the dialog will write the selected date and time. This is the client ID of the TextBox, as dynamically generated by ASP.NET when the page is displayed. If you actually run the control, you will find that its client ID is the concatenation of all the parent controls’ IDs:

  DateTimePickerPlaceholderControl1_AuthoringModeControlsContainer_SelectedD
  ateTime

• InitialValue stores the previously selected date and time values that will be used as default values by the dialog.

The code snippet below assumes that the URL of the date-time picker dialog is /tropicalgreen/dialogs/datetimepicker.aspx. If you plan to store the dialog somewhere else, simply adjust this value accordingly.

protected override void CreateAuthoringChildControls
                    (BaseModeContainer authoringContainer)
{
  . . . code continues . . .
  // Add a Button that shows a pop up when clicked
						HtmlButton b = new HtmlButton();
						b.ID = "SelectedDateTime";
						b.InnerText = "Pick Date";
						string url = "";
						url = "/tropicalgreen/dialogs/datetimepicker.aspx?"
						+ "CallingControl=" + txtAuthoring.ClientID + "&"
						+ "InitialValue=\' + document.all. " + txtAuthoring.ClientID
						+ ".value +\'";
						b.Attributes.Add("onclick","window.open('" + url + "');");
						td2.Controls.Add(b);
}

Finally, we add a Label control to the authoring container. The Label will be used to display error messages that may occur along the way. Like the TextBox, we will make it a class-wide variable as we will be using it within other methods.

private TextBox txtAuthoring;
private Label lblMessage;

protected override void CreateAuthoringChildControls
                    (BaseModeContainer authoringContainer)
{
  . . . code continues . . .

  // Add a label for displaying messages
						lblMessage = new Label();
						authoringContainer.Controls.Add(lblMessage);
}