2.2 Configure enumerations
In this lesson you'll learn how to configure enumerations that we will later use as parts of component fields.
When we create product entries for our e-commerce, we want to be able to select values - such as product size or color - from a dropdown menu. This makes sense for our project because we want to be able to only publish products in certain colors & sizes. Making this a dropdown in our content creation screen ensures that only the values we predefine will be used for those product characteristics.
In Hygraph, you do this by adding a dropdown menu to your model. This dropdown gets the list of values from an enumeration that you need to configure before you create the dropdown field.
An enumeration is a predefined set of values that represents a list of possible options. We can use enumerations to group values within a type and then use them when we add a dropdown field.
We will be using enumerations for the components that we are going to create in our next lesson. Let's configure them.
Adding enumerations is very simple.
We always add them in the same way:
- In the Schema editor, we click on
- We then type in a
Display name, which is the name that we will see in the Schema.
- We also add an
API ID, which we can use later to access the enumeration through the API Playground.
- Next, we add enumeration values by typing them in the
Valuesfield and then clicking on
+Add to list. We will need to do this for each value.
- To save our enumeration, we simply click
For this tutorial, we will add 4 enumerations: separate sizes for shoes and clothes, and separate colors for wearables and decor.
Use the following information to add them:
|Display name||Clothes size|
|Enumeration values||One by one, add the following: XS, S, M, L, XL|
Clothes size enumeration
|Display name||Shoes size|
|Enumeration values||One by one, add the following: Size_35, Size_36, Size_37, Size_38, Size_39, Size_40, Size_41, Size_42, Size_43, Size_44|
Shoes size enumeration
Wearable items color
|Display name||Wearable items color|
|Enumeration values||One by one, add the following: Red, Green, Blue, Black, White|
Wearable items color enumeration
Decor items color
|Display name||Decor items color|
|Enumeration values||One by one, add the following: Gold, Silver, Bronze, Cobalt|
Decor items color enumeration
After adding your Enumerations the left sidebar should look like this:
Your enumerations listed in the schema
Once you've created all enumerations, move on to our next lesson:3.1 Build components