Easily restore your project to a previous version with our new Instant One-click Backup Recovery
Hygraph
Docs
You are currently reading the Studio Docs. If you were looking for the Classic Docs check here

2.2 Configure enumerations

#Overview

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.

#Configure enumerations

Adding enumerations is very simple.

Adding enumerationsAdding enumerations

We always add them in the same way:

  1. In the Schema editor, we click on +Add next to Enumerations.
  2. We then type in a Display name, which is the name that we will see in the Schema.
  3. We also add an API ID, which we can use later to access the enumeration through the API Playground.
  4. Optionally, you can add a Description.
  5. Under enumeration values, you can add a list of values by manually entering the Display name, which autocompletes the API ID field, and then clicking + Add. Your values will display on a list below.
  6. Once you have added all the enumeration values, click Add Enumeration at the bottom of the screen to finish the process.

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:

Clothes size

FieldInput
Display nameClothes size
API IDClothesSize
Enumeration valuesOne by one, add the following: XS, S, M, L, XL

Clothes size enumerationClothes size enumeration

Shoes size

FieldInput
Display nameShoes size
API IDShoesSize
Enumeration valuesOne 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 enumerationShoes size enumeration

Wearable items color

FieldInput
Display nameWearable items color
API IDWearableItemsColor
Enumeration valuesOne by one, add the following: Red, Green, Blue, Black, White

Wearable items color enumerationWearable items color enumeration

Decor items color

FieldInput
Display nameDecor items color
API IDDecorColor
Enumeration valuesOne by one, add the following: Gold, Silver, Bronze, Cobalt

Decor items color enumerationDecor items color enumeration

After adding your Enumerations the left sidebar should look like this:

Your enumerations listed in the schemaYour enumerations listed in the schema