Skip to content
Get help on Slack

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.

Get started for freeExplore the demo

Was this answer helpful?