Get help on Discord

How to display field value in Sanity schema preview section?

19 replies
Last updated: Dec 5, 2022
Can I return the title that is given in the field section and put that in the preview section and how should I do that?
fields: [
            {
              title: 'Title',
              name: 'title',
              type: 'string',
            },
],
preview: {
            prepare() {
              return {
                icon: MdTextFields,
                title: 'how to get the above title ???',
              }
            }
          }
        },
AI Update

Yes, absolutely! You need to use the select property to pass the field value to your prepare function. Here's how to fix your code:

fields: [
  {
    title: 'Title',
    name: 'title',
    type: 'string',
  },
],
preview: {
  select: {
    title: 'title'  // This selects the 'title' field
  },
  prepare({title}) {  // The selected value is passed here as a parameter
    return {
      icon: MdTextFields,
      title: title,  // Now you can use it!
    }
  }
}

The key is understanding how Sanity's preview configuration works:

  1. select - Tells Sanity which fields to extract from your document
  2. prepare - Receives those selected fields as parameters and returns what to display

You can also simplify this if you're just passing the title through without transformation:

preview: {
  select: {
    title: 'title'
  }
  // No prepare needed - Sanity will automatically use the title
}

This pattern works for any field in your schema. You can select multiple fields too:

preview: {
  select: {
    title: 'title',
    subtitle: 'description',
    media: 'image'
  },
  prepare({title, subtitle, media}) {
    return {
      title: title,
      subtitle: subtitle,
      media: media ?? MdTextFields  // Use icon as fallback
    }
  }
}

The select object uses the field names from your schema, and those values become available in the prepare function parameters.

Show original thread
19 replies
you target a field with the name of a field. etc if my object looks like this you can target the preview title with 
title: "objectName"


{
              title: Title of Object',
              name: 'objectName',
              type: 'string',
            },
I dont think I fully understand it yet.this is what my schema object looks like.

{
      title: 'Components',
      name: 'components',
      type: 'array',
      of: [
        {
          title: 'Content',
          name: 'content',
          type: 'document',
          icon: MdTextFields,
          fields: [
            {
              title: 'Title',
              name: 'title',
              type: 'string',
            },
            {
              name: 'text',
              type: 'localeMarkdown',
              description: 'A Github flavored markdown field with image uploading',
            },
          ],
          preview: {
            prepare() {
              return {
                icon: MdTextFields,
                title: 'content',
              }
            }
          }
        },
What I ment is if I fill the title with some random text in sanity how do I fetch that and show it in the preview?
ohhhh, have you tried 
content.title
?
haha sorry I might be a bit unclear.Right now it show me "content" see image below. I want to be able to let it grab what I have writen in the title section of that and display it instead of "content" inside sanity
so basicly now that it has this . that should be displayed instead of content
yes, but have you tried 
title: 'content.title'
as your preview title?
yes but that wont work
preview: {
    select: {
      title: 'content.title',
      icon: MdTextFields,
    },
    prepare(selection) {
      const {title, icon} = selection
      return {
        title: title,
        media: icon,
      
      }
    }
  },
let me check what im doing
export default {
    title: 'Components',
    name: 'components',
    type: 'array',
    of: [
      {
        title: 'Content',
        name: 'content',
        type: 'document',
        fields: [
          {
            title: 'Title',
            name: 'title',
            type: 'string',
          },
        ],
        preview: {
            select: {
              title: 'title',
            },
            prepare(selection) {
              const {title} = selection
              return {
                title: title
              
              }
            }
          },
      }
      ]
};
This should do the trick, note that i removed one field and some icons since i didnt bother to download and fix imports
copy paste the preview
ah yeah that works in sanity. thanks !
never used the select property
so how should I add the icon for instance? because the icon is a fucntion it seems
Oh I got it its actualy way simpler
preview: {
            select: {
              title:'title',
            },
            prepare(selection){
              const {title, icon} = selection
              return {
                title: title,
                icon: MdTextFields,
              }
            }
          }

Thanks
user U
yep, no worries

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Was this answer helpful?