Using enums in PCF

While developing a custom grid component I wanted to provide the ability to configure behavior based on a selectable preset of options. After a quick look at the component framework documentation I chose the Enum type to be a good bet. Sadly the documentation stops at the information that this type exists so I had to research it myself.

In my case I wanted the user to pick a selection mode for the grid and I had three possibilities. None, Single and Multiple. This is how it looks when you define an enum type property in the ControlManifest.input.xml.

<property 
  name="tableSelectionMode"
  display-name-key="Table_SelectionMode_Display_Name"
  description-key="Table_SelectionMode_Description"
  of-type="Enum" usage="input" required="false">
    <value 
      name="None"
      display-name-key="Table_SelectionMode_None_Display_Name">0</value>
    <value
      name="Single"
      display-name-key="Table_SelectionMode_Single_Display_Name">1</value>
    <value 
      name="Multiple"
      display-name-key="Table_SelectionMode_Multiple_Display_Name">2</value>
</property>

You have to set the of-type attribute to Enum and usage to input. Inside that node you can add your single values, always with a name and display-name-key attribute. Inside of the node (so to speak as innerText) you put the value you will later get.

In code you will receive your your set value/innerText as string and you should cast it to a number or your custom enum type. In my example is simply use Number().

Number(context.parameters.tableSelectionMode.raw)

Hope that helps.