Skip to content
Unlock seamless workflows and faster delivery with our latest releases – get the details
Get help on Slack

Discussion on generating a preview subtitle based on selected option from a string list in Sanity schema.

14 replies
Last updated: Aug 12, 2021
Hi there! I have what feels to me a fairly simple schema, and I’m trying to generate a preview subtitle based on the selected option from a string list.
I’ve read the Previews/List Views documentation page and I’ve tried a number of different syntaxes, but I can’t seem to land on the proper one.

Here’s the schema, with one of my attempts:


name: 'landmark',
type: 'document',
title: 'Landmark',
fields: [
  {
    name: 'title',
    type: 'string',
    title: 'Name of the landmark'
  },
  {
    name: 'country',
    type: 'string',
    title: 'Country',
    options: {
      list: [
        { title: 'United States', value: 'usa' },
        { title: 'France', value: 'fr' }
      ]
    }
  }
],
preview: {
  select: {
    title: 'title',
    subtitle: 'country.title'
  }
}
I would like the list preview to say something like:


Eiffel Tower
France
Statue of Liberty
United States
Jul 29, 2021, 5:28 PM
Hi!If I remember correctly, you can only retrieve list values inside the preview, not titles.
In my case I define the list options in a separate variables above.
Jul 29, 2021, 5:33 PM
const countries = [...]
then
list: countries
and in prepare
prepare: { select: { title: 'title', country: 'country'}, prepare({title, country}) 
return {
 title,
subtitle: countries[country]
}
}
Jul 29, 2021, 5:38 PM
(might also be worth to check for 
undefined
)
Jul 29, 2021, 5:38 PM
Thanks! I’ve given it a try, but it doesn’t seem to be working quite yet. Here is my new schema:
const countries = [
  { title: 'United States', value: 'usa' },
  { title: 'France', value: 'fr' }
]
export default {
  name: 'landmark',
  type: 'document',
  title: 'Landmark',
  fields: [
    {
      name: 'title',
      type: 'string',
      title: 'Name of the landmark'
    },
    {
      name: 'country',
      type: 'string',
      title: 'Country',
      options: {
        list: countries
      }
    }
  ],
  preview: {
    select: {
      title: 'title',
      country: 'country'
    },
    prepare ({ title, country }) {
      return {
        title,
        subtitle: countries[country]
      }
    }
  }
}
Jul 29, 2021, 5:54 PM
ah oups, I made a mistake. Here's I did it in a real live project:
Jul 29, 2021, 6:07 PM
https://github.com/mornir/terminofeu-studio/blob/master/schemas/objects/illustration.js#L51
In your case, it would be something like
prepare({ 
countryCode, title, media }) {      const subtitle = countries.find((
country) => country.value === countryCode).title
Jul 29, 2021, 6:10 PM
you need to use array.find to get the right country
Jul 29, 2021, 6:10 PM
Apologies if I’m slow to catch on… where does 
countryCode
come from?
Jul 29, 2021, 6:57 PM
Ah. Looks like it’s a bug. 🤷‍♂️ I’ll stop trying to figure this out and wait for the fix. https://github.com/sanity-io/sanity/issues/2631
Jul 30, 2021, 3:17 PM
Thanks again for your patience on this one, Matt. Please let us know if 2.14.0 doesn't settle this for you.
Aug 11, 2021, 2:31 PM
Hooray!
I tried so many things before I figured out it was a bug, and I’m still not sure what the syntax should be. Here is my (simplified) current attempt, which doesn’t seem to work:

documents/landmark.js

export default {
  name: 'landmark',
  type: 'document',
  title: 'Landmark',
  fields: [{
      name: 'title',
      type: 'string',
      title: 'Name of the landmark'
    },
    {
      name: 'countryAndRegion',
      type: 'countryAndRegion',
      title: 'Country and Region',
    }
  ],
  preview: {
    select: {
      title: 'title',
      subtitle: 'countryAndRegion.country.title'
    }
  }
}
objects/countryAndRegion.js

export default {
  name: 'countryAndRegion',
  type: 'object',
  title: 'Country and Region',
  fields: [{
      name: 'country',
      type: 'string',
      title: 'Country',
      options: {
        list: [
          { title: 'United States', value: 'usa' },
          { title: 'France', value: 'fr' }
        ]
      }
    },
    {
      name: 'region',
      type: 'string',
      title: 'Region'
    }
  ]
}
This does not return anything. If I just do 
subtitle: 'countryAndRegion.country'
it returns the 
value
.
I’m sure it will seem obvious when you tell me, but I’m a little stumped.
Aug 11, 2021, 6:32 PM
Hold on. I might not have updated properly.
Aug 11, 2021, 6:34 PM
I hadn’t updated properly. But now that I have, the above still doesn’t seem to work. I assume it’s user error and not that it isn’t fixed.
Aug 11, 2021, 7:14 PM
Update: It occurred to me that I don’t really need the country codes. So I’ve simplified it to just a list of keyless country name strings, and that works more smoothly. I think I added them because all of the examples I saw had key:value combinations in list fields.
I love to learn, so I’m still curious how to accomplish the proper list preview given a list of objects.
Aug 12, 2021, 6:05 PM

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?