Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Create a dropdown list of options with the Select field in Keystone

    Simon VrachliotisSimon Vrachliotis
    graphqlGraphQL
    javascriptJavaScript
    nodeNode.js

    In this lesson, we take a list of Dogs created in Keystone, and use the "Select" field type to add a "breed" field for each dog. We look at three different syntaxes to pass a list of options to the Select field, and how they affect the Admin UI.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Lecturer: We have a blank Keystone starter project here with a single list, a list of dogs, with a single field, a name with a type of text. If we look at our admin UI, we can see that we have four dogs. Let's now go and add a breed field for these dogs.

    Up here in my file, I'll import the select field type from Keystone. I'll add a new field called Breed. This one is going to be a type of select. Select takes options for the different values.

    As we will see, there's different ways to pass these options. The simplest one is to pass a series of comma-separated values. If we go and restart our server, we should now have a new field type called Breed. Let's go and assign Billy. Billy is Labrador. Save that. We'll quickly update the other dogs.

    Let's take a look at our GraphQL playground. We can now query all dogs. We can ask for the name as well as the breeds. Here we go. We got a list of dogs.

    We've seen we can pass a list of comma-separated values. There are other ways to pass options. You can also pass an array of strings like that.

    Finally, there's a third way of passing options, which is an array of objects. We could have a label and then value. Let's grab this, put it there. Maybe start the labels with an uppercase. Voila, that's the third way of passing options.

    If we look at our admin UI, we can see here in the breed column that the uppercase labels are being used. However, the data coming back from the query uses the value with lower case.