EPiServer provides a build-in SelectionFactory for enums and SelectOne attribute for selecting single value. But for flags enum we want to have a checkbox list and be able to select more than one value. In this article I’d like to show how to use SelectMany attribute for editing flags enum property.
property enum flags using SelectMany attribute

Available days example

On the StartPage I will show list of available days. The list will be configurable and editor can select more than one day. I preapred new enum type, DayOfWeekFlags with the following definition:

Then I implemented a selection factory. It inherits from standard EnumSelectionFactory and use DaysOfWeekFlag as enum type. SelectionFactory will be used by SelectMany attribute to define the property.

CheckboxList widget works on coma separated strings, so property definition has PropertyString as a backing type and custom getter and setter responsible for converting string to DayOfWeekFlags.

The string conversion logic was moved to a separate class with static methods.

Now we can edit property in Forms Editing mode and use AvailableDays property through code.

On-Page edit renderer

The functionality can be improved by possibility of editing AvailableDays property in On-Page edit mode. It can be done by implementing property renderer. I added a simple view under ~\Views\Shared\DisplayTemplates\DaysOfWeek.cshtml

To use the renderer I had to add UIHint attribute with “DaysOfWeek” hint on the property.

The On-Page edit client editor should use CheckBoxListEditor (same as Forms editing). To configure the overlay I created new SelectManyOverlayAttribute attribute which implements IMetadataAware interface. In the OnMetadataCreated method I set “uiType” in overlay settings.

The CheckboxList works on coma separated values, so I had to inject ObjectSerializer and deserialize data in a proper way.

Now the property definition with UIHint and SelectOverlaytAttribute looks like:

After running appliction the property can be edited directly from the page.

on-page edit renderer

And here is a demo of using the property:
using enum flags property