Enum Drop Down

This section will cover how do you create Enumeration Type & Drop Down list.

How to create Enum name and value list?

  • I am assume that you are following our directory structure of User Interface.

  • Let’s call the module name notification

  • We have to add the enum filed type called notificationType & values will be

    • SMS

    • Push

    • Email

Step by Step Create Enum file and add list

  • Create file Structure :feature-enum-dropdown.ts Name notification-enum-dropdown.ts. Under user-interface/src/data/notification-enum-dropdown.ts. If the file already exist then just add the list to the existing file.

  • Added the type and value list like below

export default class NotificationEnumDropdown {

    public static readonly notificationType = [
        {name: "SMS", value: "SMS"},
        {name: "Email", value: "Email"},
        {name: "Push", value: "Push"},


Step by Step Create Enum Drop Down into view.

  • Assume that you already have a create edit form, now you want to add the dropdown. so the code will be

  • Field name is type, label and other is there,

  • Important

    • Make sure optionLabel & optionValue matched with your map keys. For example here in our notification list of map has one key is name and other key was value that’s why here we specified optionLabel="name" and optionValue="value"

<TRReactSelect name="type" label="Type" options={NotificationEnumDropdown.notificationType} optionLabel="name" optionValue="value" {...this.handleInputDataChange("type")}/>