Is there a structure builder example where the format of each preview for the document list is modified?

4 replies
Last updated: Feb 3, 2021
Is there a structure builder example where the format of each preview for the document list is modified?
AI Update

Yes! You can customize how document previews appear in list views using the preview configuration in your schema. This controls how documents display in document lists, reference fields, and array items.

Here's a basic example showing how to modify the preview format:

export const postType = defineType({
  name: 'post',
  type: 'document',
  preview: {
    select: {
      title: 'title',
      author: 'author.name',  // Access referenced author's name
      media: 'mainImage',
      publishedAt: 'publishedAt'
    },
    prepare({title, author, media, publishedAt}) {
      return {
        title: title,
        subtitle: author ? `By ${author}${publishedAt}` : 'Draft',
        media: media ?? DocumentIcon  // Fallback icon if no image
      }
    }
  }
})

The preview configuration has two parts:

  1. select - Specifies which fields to extract from your document. You can access nested references using dot notation like 'author.name' or array items by index like 'images.0'.

  2. prepare - Transforms the selected data before display. It returns an object with title, subtitle, and media properties that determine how the item appears.

For more complex array items, you can create richer previews to help editors quickly identify content:

export const offerType = defineType({
  name: 'offer',
  type: 'object',
  preview: {
    select: {
      title: 'title',
      discount: 'discount',
      expiryDate: 'expiryDate'
    },
    prepare({title, discount, expiryDate}) {
      return {
        title: title,
        subtitle: `${discount}% off - Expires: ${expiryDate}`
      }
    }
  }
})

Important note: The preview configuration modifies how items appear in lists, but it's defined at the schema level, not in the Structure Builder. The Structure Builder controls which documents appear in lists through filtering and organization, while the schema's preview configuration controls how each individual item is formatted within those lists.

If you need even more customization beyond title/subtitle/media, you can create custom preview components, though the standard preview configuration handles most use cases effectively.

Example, I want to modify this to display content.title
If your schema looks something like this:

export default {
  name: "review",
  title: "Review",
  type: "document",
  fields: [
    {
      name: "content",
      title: "Content",
      type: "object",
      fields: [
        {
          name: 'title',
          title: 'Title',
          type: 'string',
        },
        {
          name: 'excerpt',
          title: 'Excerpt',
          type: 'string',
        }
      ]
    },
  ],
}
You can add a preview to set the title for each
review
document:

export default {
  name: "review",
  title: "Review",
  type: "document",
  fields: [
    {
      name: "content",
      title: "Content",
      type: "object",
      fields: [
        {
          name: 'title',
          title: 'Title',
          type: 'string',
        },
        {
          name: 'excerpt',
          title: 'Excerpt',
          type: 'string',
        }
      ]
    },
  ],
  preview: {
    select: {
      title: 'content.title'
    }
  }
}

ah brilliant, thank you. I guess I was looking in the wrong place then.
No problem! Thankfully, previews offer a lot of customization.

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.

Was this answer helpful?