Get help on Discord

Display multiple fields in same line for Sanity preview

22 replies
Last updated: Jul 7, 2022
Hi everyone, is it possible to display multiple fields within the same line for 
preview
?
The following is giving me an error:
AI Update

Yes, you can definitely display multiple fields on the same line in a preview! The prepare function in your preview configuration lets you combine multiple fields into a single string for either the title or subtitle.

Here's a common pattern for combining fields:

preview: {
  select: {
    firstName: 'firstName',
    lastName: 'lastName',
    email: 'email'
  },
  prepare({firstName, lastName, email}) {
    return {
      title: `${firstName} ${lastName}`,
      subtitle: email
    }
  }
}

If you want to combine even more fields into one line, you can do something like:

preview: {
  select: {
    title: 'title',
    category: 'category.title',
    status: 'status'
  },
  prepare({title, category, status}) {
    return {
      title: title,
      subtitle: `${category} • ${status}`  // Combines multiple fields with a separator
    }
  }
}

Important note: The preview system in Sanity only supports three properties in the returned object from prepare:

  • title (string)
  • subtitle (string)
  • media (image or icon)

So you can't add additional custom fields to display more lines. However, you can combine as many of your schema fields as you want into these three properties using string concatenation, template literals, or any JavaScript logic.

If you're getting an error, it might be because you're trying to return additional properties beyond these three, or there's a syntax issue in your prepare function. Could you share your specific code? That would help identify the exact issue.

You can read more about this in the official Sanity documentation on previews and list views, and there's also a great guide on creating richer array item previews that shows more advanced examples.

Show original thread
22 replies
Hi Andrew. You can, but you need to do the concatenation in the 
prepare()
function. The 
select
object is only to “gather” your fields.
Thanks Geoff, I was looking into that just now but am a bit confused about the syntax.What should I place in my 
select
to get the desired result?

  preview: {
    select: {
      title: `name`,
      subtitle: "location",
    },
    prepare(selection) {
      const { location, duration, type } = selection;
      return {
        title: `${duration} | ${type} `,
        subtitle: `${location}`,
      };
    },
  },
Maybe something like:

preview: {
  select: {
    duration: 'duration',
    type: 'type',
    location: 'location',
  },
  prepare: ({duration, type, location}) => {
    return {
      title: `${duration} | ${type} `,
      subtitle: `${location}`,
    }
  }
}
Thanks, that works! Sort of..
my fields here are actually dropdowns, so the output of the code snippet you just sent selects their 
value:
rather than their 
title:
...
Is there a way to fetch the title field instead?
here's an example:
    {
      name: "type",
      title: "Statut",
      type: "string",
      options: {
        list: [
          { title: "Regulier", value: "regular" },
          { title: "Étudiant", value: "student" },
          { title: "Institution", value: "institution" },
        ],
        layout: "dropdown",
      },

user C
I had a similar dilemma and I think I had to change it from a string type to an object where both the title+value were stored
Thanks for clarifying that, Andrew. Only the 
value
gets passed into 
prepare()
(though ironically, if you don’t use 
prepare()
then only the 
title
gets passed in, but that won’t work in your case because you’re looking to modify the title line.
Therefore, I think the best approach is to establish your array of objects external to the schema, reference it in the schema, and then get the 
title
value in the 
prepare()
function. It might look something like:

const TYPES = [
  { title: "Regulier", value: "regular" },
  { title: "Étudiant", value: "student" },
  { title: "Institution", value: "institution" },
]

export default {
  // ...
  fields: [
    // ...
    {
      name: "type",
      title: "Statut",
      type: "string",
      options: {
        list: TYPES,
        layout: "dropdown",
      },
    }
  ],
  preview: {
    select: {
      duration: 'duration',
      type: 'type',
      location: 'location',
    },
    prepare: ({ duration, location, type }) => {
      const typeTitle = type ? TYPES.find(option => option.value === type).title : undefined
      return {
        title: `${duration} | ${typeTitle} `,
        subtitle: `${location}`,
      }
    }
  }
}
This has now been added to the docs .
Interesting solution, thanks Geoff! I'm going to look into integrating this shortly 🙂
Hi Geoff! This worked great, thank you!
is there any way to remove the media placeholder image here though?
Good to hear!
Yes, you can remove the icon by following RD’s advice in the snippet
here . The example is for array items but it works for documents, too. Essentially you’ll 
import React from 'react'
and then use 
media: <span />
in your preview. Not too long ago, a box shadow was added to preview icons; if you want to get rid of that, you can style your Studio by creating a 
css
file somewhere in your Studio, adding some CSS to remove the box shadow, and then adding a part to your sanity.json file.

Your 
sanityOverrides.css
file (call it whatever you want) might look like:

:global([data-ui='PaneItem'] *:not(svg) + span) {
  box-shadow: none !important;
}

And your sanity.json part might look like:

"parts": [
  ...OTHER PARTS...,
  {
    "implements": "part:@sanity/base/theme/variables/override-style",
    "path": "./path/to/sanityOverrides.css"
  }
]

You’ll need to restart your Sanity process after adding the part to sanity.json.
Instead of using 
media: <span />
, try 
media: <></>
. It looks like if you go that route, you don’t need to do any of the CSS overrides.
Hi again, that doesn't seem to work:
Did you import React?
I'm running Next, so that should be done automatically no?
ah actually nvm i'm using a monorepo so maybe not
that works but the text doesn't span the entire div here
versus, say, another schema type seen here
not a huge deal at all but just want to know why it's acting this way
To do that we essentially need to style an element based on its child, which isn’t yet possible in CSS outside of Safari Preview or using flags. Eventually :has() should let us do this (something like 
[data-ui='PaneItem'] span[data-testid='Media']:not(:has(> svg))
would let us target the outer span and 
display: none
), but for now you’d need to script it.

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?