Creating Dropdown Lists in Optimizely CMS 12 with Enum and Database

This blog will help to create single or multiple list options in CMS 12. Dropdown lists play an important role whenever we give the user to select a single value from the list.

In CMS 12, single or multiple selection lists populate using “SelectOne” and “SelectMany” attributes. This attribute is in the “EPiServer.Shell.ObjectEditing” namespace. You can define these attributes on a property and require a reference to a class implementing the “ISelectionFactory” interface. I referred to the Optimizely developer site.

Creating Dropdown Lists using Enum

1. Create Enum Region.
   
2. Create property Region with Enum type Region.
   
3. Create a class named “SelectOneEnumAttribute” and inherit it from “SelectOneAttribute.”
4. Also, implement this class with “IDisplayMetadataProvider.” In CMS 11, we need to implement with interface “IMetadataAware.” But in CMS 12, we need to implement “IDisplayMetadataProvider.”
   
5. The method “CreateDisplayMetadata” is not virtual; hence we need to write a new keyword to override this method from SelectOneAttribute. Note that we were calling the base method as well.
   
6. After writing all the code, we will get the below output
   
7. If we decorate a property “Region” with “SelectManyEnum,” then we will get below output
   

Create Dropdown Lists using Database

1. Create a property “OtherCities” of string type.https://blogs.perficient.com/files/Property.png
2. Decorate this property with “SelectMany” and give the selection factory type as “CitySelectionFactory”
3. Create a class “CitySelectionFactory” and implement it with the “ISelectionFactory” interface.
4. In this class, we need to get all cities from the Database. Write the logic in the “GetSelection” method and return the list to do that.
5. Create the “SelectManyEnumAttribute” Class and inherit it with the “SelectManyAttribute” class, and the same as Select Single Attribute implements with the “IDisplayMetadataProvider” interface.
6. The method “CreateDisplayMetadata” is not virtual; hence we need to write a new keyword to override this method from SelectManyAttribute. Note that we were calling the base method as well.
7. After writing all code, we will get the following output.
   
8. If we decorate a property “OtherCities” with “SelectOne,” we will get below output.
   

Revolutionize Your Business With Generative AI

From product design and software development to virtual agents, content creation, and reporting, GenAI is transforming business. Our AI experts help you unlock GenAI’s full potential and drive growth.

Let’s Get Started

__PRESENT

__PRESENT

__PRESENT