Get help on Discord

How to display custom titles for array objects in Sanity?

5 replies
Last updated: Jul 16, 2021
Hi! I am starting with Sanity and so far it is quite a nice ride.
I have a question about 
array
type that I haven’t found the answer too in [docs](https://www.sanity.io/docs/array-type ). My array of objects works as expected, but I want to print a title for each value (and not show just stringified object itself). Is that possible?
AI Update

Great to hear you're enjoying Sanity! Yes, you can absolutely customize how array items display their titles instead of showing the stringified object. You'll want to use the preview configuration on your array item's object type.

Here's how to do it:

{
  name: 'myArray',
  type: 'array',
  of: [
    {
      type: 'object',
      fields: [
        {
          name: 'title',
          type: 'string'
        },
        {
          name: 'description',
          type: 'text'
        }
        // ... other fields
      ],
      preview: {
        select: {
          title: 'title',
          subtitle: 'description'
        },
        prepare({title, subtitle}) {
          return {
            title: title,
            subtitle: subtitle
          }
        }
      }
    }
  ]
}

The preview configuration works in two parts:

  1. select - Specifies which fields you want to use in the preview
  2. prepare - Transforms those selected fields into what's displayed

You can also add a media property if you want an icon or image thumbnail:

preview: {
  select: {
    title: 'title',
    media: 'image'
  },
  prepare({title, media}) {
    return {
      title: title,
      subtitle: 'My custom subtitle',
      media: media ?? MyDefaultIcon  // Fallback icon if no image
    }
  }
}

The preview configuration also works great for creating richer array item previews - you can show things like status indicators, dates, percentages, or any other contextual info that helps editors quickly understand what each array item contains.

If you need to access fields from referenced documents in your preview, you can use dot notation in the select: authorName: 'author.name' will pull the name field from a referenced author document.

Show original thread
5 replies
So ideally from each item I would show 
Object.values(item.title)[0]
(which is the i18ned title field, its first value which is my default language).
This is the relevant part of my schema:

{
      name: "list",
      title: "Features",
      type: "array",
      of: [
        {
          title: "Quick features",
          type: "object",
          fields: [
            {
              name: "title",
              title: "Title",
              type: "localeString"
            },
            {
              name: "icon",
              title: "Icon",
              type: "object",
              fields: [
                {
                  name: "Icon",
                  type: "string",
                  layout: "dropdown",
                  options: {
                    list: getIcons()
                  }
                }
              ]
            },
            {
              name: "description",
              title: "Description",
              type: "localeString"
            }
          ]
        }
      ]
    },
localeString is object (czech and english string field)
Also unfortunately I’m getting a value 
null
in FE for this field. 😞 Am I doing wrong something obvious?
Hi Petr. You can show the correct field using a preview . It’s a bit of a different syntax, but I expect you can print the title with something like this, which should be a sibling of your document’s 
fields[]
array:

  preview: {
    select: {
      title: 'list.0.title.en',
    }
  }
It might need some adjusting based on what 
localeString
looks like.
As for the null value on your front end, I would log out your query result to see exactly what your data structure looks like, then drill down or destructure from there.
Perfect, thanks!

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?