By default Episerver use dijit checkbox when rendering boolean property. I wanted to add a possibility of defining labels for true and false values. That’s why I prepared a switch button property that displays configurable label for the selection. It can be useful to highlight the selected value.
switch button property

Using switch button property

To use new editor simply add “Switch” UIHint on boolean property in the model (or use SwitchEditorDescriptor.UIHint const).

New editor has few configurable settings. I added new custom SwitchSettings attribute that allows to set label, shape, description and background color of switch. Those settings are not required.

Custom labels

Labels representing True and False values can be changed. Defaults are ON for true and OFF for false. Labels are useful to describe the selection. For example for “Use custom layout” boolean property it can be “Default layout” for False and “Custom layout” for True. For other properties it can be “Show/Hide”, “Yes/No”, “Started/Stopped” etc.

switch button property custom labels

To set labels you can use TrueText and FalseText properties. Unfortunately switch doesn’t calculate width automatically. For long labels it has to be set manually using Width property.

switch button property labels

Custom shapes

Dojox.switch has few predefined shapes. I allowed to select one of them when displaying the editor:

  • Arc
  • Arc2
  • Round
  • Round2
  • Square

switch button property shapes

To change the shape use Shape property. Predefined shape constants can be found in “Shapes” class.

Custom colors

You can also change background color for True and False labels. I preapred few predefined clases based on deafult Episerver colors style guide. Editor can see warning or success color when selecting value.

switch button property colors

To set colors classes you can use TrueStateClass and FalseStateClass attributes. Predefined classes constants can be found in “StateClasses” class.

Custom selection description

Both True and False value can have description displayed next to the editor. It can be useful for Editor to explain selection value. For example, if Editor decided to use “Custom Layout” instead of “Default layout” he should be aware that to make site working properly he needs to configure additional system settings. The description can be used together with label color, so when switch is ON he will see warning label and the information text.

switch button property description

To change the description you should use TrueDescriptionText or FalseDescriptionText properties.

switch button property description change


To create an editor I used dojox/mobile/switch widget. Now I’m not sure if that was the best choice. The “dojox/mobile” is not available in EPiServer, so I had to add this part of Dojo library manually. Also library doesn’t support updating some values (like shape). I think that simple CSS based switch could have modern look and be easier to customize.

The code is avialable on Github