Unlock seamless workflows and faster delivery with our latest releases- get the details

How to display the title field in Sanity 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 ???',
              }
            }
          }
        },
Dec 5, 2022, 10:06 AM
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',
            },
Dec 5, 2022, 12:18 PM
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?
Dec 5, 2022, 12:38 PM
ohhhh, have you tried
content.title
?
Dec 5, 2022, 12:39 PM
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
Dec 5, 2022, 12:42 PM
so basicly now that it has this . that should be displayed instead of content
Dec 5, 2022, 12:43 PM
yes, but have you tried
title: 'content.title'
as your preview title?
Dec 5, 2022, 12:44 PM
yes but that wont work
Dec 5, 2022, 12:44 PM
preview: {
    select: {
      title: 'content.title',
      icon: MdTextFields,
    },
    prepare(selection) {
      const {title, icon} = selection
      return {
        title: title,
        media: icon,
      
      }
    }
  },
Dec 5, 2022, 12:45 PM
let me check what im doing
Dec 5, 2022, 12:45 PM
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
              
              }
            }
          },
      }
      ]
};
Dec 5, 2022, 12:55 PM
This should do the trick, note that i removed one field and some icons since i didnt bother to download and fix imports
Dec 5, 2022, 12:55 PM
copy paste the preview
Dec 5, 2022, 12:55 PM
ah yeah that works in sanity. thanks !
Dec 5, 2022, 12:58 PM
never used the select property
Dec 5, 2022, 12:58 PM
so how should I add the icon for instance? because the icon is a fucntion it seems
Dec 5, 2022, 12:59 PM
Oh I got it its actualy way simpler
Dec 5, 2022, 1:01 PM
preview: {
            select: {
              title:'title',
            },
            prepare(selection){
              const {title, icon} = selection
              return {
                title: title,
                icon: MdTextFields,
              }
            }
          }

Dec 5, 2022, 1:01 PM
Thanks
user U
Dec 5, 2022, 1:01 PM
yep, no worries
Dec 5, 2022, 1:02 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.

Was this answer helpful?