Creating a time picker property for Episerver using a Dojo dijit

Episerver by default doesn't have a built in time property. However I was speaking to a customer recently who wanted just that. I know that Episerver uses Dojo for the UI behind the scenes so started to investigate if there was anything we could use to help us.

I read Steve Celus's post on creating a colour picker using Dojo in the past: http://world.episerver.com/blogs/Steve-Celius/Dates/2015/5/simple-color-picker-property/.  So I used it as inspiration for this post.

It turns out that we can use the built in Dojo widget "dijit/form/TimeTextBox" to create a time picker in the Episerver UI. To create a property that allows users to input a time add the following ClientEditor attribute to your model:

[SiteContentType(GUID = "28849B18-AECC-4AFE-BF6B-901EA8DA1853")]
public class EventPage : StandardPage
{
    [Display(GroupName = "Event times", Name = "Start time")]
    [ClientEditor(ClientEditingClass = "dijit/form/TimeTextBox")]
    public virtual string StartTime { get; set; }

    [Display(GroupName = "Event times", Name = "End time")]
    [ClientEditor(ClientEditingClass = "dijit/form/TimeTextBox")]
    public virtual string EndTime { get; set; }

}

This instructs Dojo to use the time UI widget. This widget is called a dijit in Dojo speak. The result is that editors are presented with a time input when working in Episerver:

Not bad for a single line of code?

Further learning

There are a number of pre-built Dojo dijits that can be used to enhance the data input in Episerver which can be seen here: https://dojotoolkit.org/reference-guide/1.10/dijit/index.html#miscellaneous-widgets.

I am also personally going through the Dojo Fundamentals course on Pluralsight. This does help introduce the core concepts in Dojo and terms such as dijit, widget and Dojox suddenly don't feel as foreign!

Conclusion

Using a single line of code it's possible to add powerful validated inputs into Episerver. This uses core Dojo functionality so there is no custom coding required and also means it should be supported through future upgrades.

Comments