🔮 Sanity Create is here. Writing is reinvented. Try now, no developer setup

Issue with previewing a predefined list in Sanity schema

3 replies
Last updated: Jun 23, 2023
Hey all, I am unsure if this is correct (from Previewing from predefined string lists ):
If you wish to use that value in your preview, Sanity will default to providing the
title
I have a predefined list and the “preview” insists on using the
value
instead of the
title
. Here is my schema:
export default {
    name: 'bigGulp',
    title: 'Big Gulp',
    type: 'object',
    fields: [
        {
            name: "Type",
            type: "string",
            options: {
                list: [
                    {
                        title: 'Small',
                        value: 'small'
                    },
                    {
                        title: 'Regular',
                        value: 'regular'
                    }
                ],
                layout: 'dropdown'
            }
        }
    ],
}
Jun 21, 2023, 10:22 AM
Here is how it is “previewed”
Jun 21, 2023, 10:35 AM
Hey Yousef,
There are a few things.

1. You'll need a
preview
object to customize the preview2. Change the
name
to
type
(although, a better choice in this case might be
size
), and add a
title
of
Type
(although, I would suggest
size
here as well)I have updated your code based on the
Previewing from predefined lists documentation.
Here's the updated code, and for fun, I gave you an icon (to see it, you might need to install
react-icons
), and included some TypeScript.

import { BsCupStraw as icon } from 'react-icons/bs'
import { defineField, defineType } from 'sanity'

const TYPES = [
    {
        title: 'Small',
        value: 'small'
    },
    {
        title: 'Regular',
        value: 'regular'
    }
]

export default defineType({
    name: 'bigGulp',
    title: 'Big Gulp',
    type: 'object',
    icon,
    fields: [
        defineField({
            title: "Type",
            name: "type",
            type: "string",
            options: {
                list: TYPES,
                layout: 'dropdown'
            }
        })
    ],
    preview: {
        select: {
          type: 'type',
        },
        prepare({ type }) {
            const typeName = type && TYPES.flatMap(option => option.value === type ? [option.title] : [])
          return {
            title: `${typeName}`
          }
        },
      },
})
Jun 21, 2023, 6:32 PM
Thanks for that KJ, I think I got side-tracked by the quote from that page in my original message (and the fact that it references “the second example above”). I thought that using the preview object without the prepare function would give me the title as it says on the page. Thanks for the help and also showing me how to do the icons 😉
Jun 23, 2023, 9:27 AM

Sanity– build remarkable experiences at scale

Sanity is a modern headless CMS that treats content as data to power your digital business. Free to get started, and pay-as-you-go on all plans.

Was this answer helpful?