Get help on Discord

Concatenate multiple fields for document title in Sanity Studio list view

5 replies
Last updated: Feb 25, 2021
Is there a way to modify (concatenate) the document title in the studio document list view?By default it picks the value from the first field in my schema. However, I would like the name in the list to be created from concatenating three of the fields.

schema

{ title:"License Plate", name:"licensePlate", type:"string"},
{ title:"Model", name:"model", type:"string"},
{title:"Manufacturer", name:"manufacturer", 
        type: "array", of: [
           {type:'reference',
              to: [ {type:"manufacturer"}]
            }
             ]}
studio list view
“LKJ546 - BMW X5”

Is there a way to achieve this?
AI Update

Yes, you can absolutely customize the document title in the Studio list view by using the preview configuration in your schema! This is done using the select and prepare functions.

Here's how you'd achieve your specific use case of concatenating the license plate, model, and manufacturer:

{
  name: 'vehicle', // or whatever your document type is called
  type: 'document',
  fields: [
    { title: "License Plate", name: "licensePlate", type: "string" },
    { title: "Model", name: "model", type: "string" },
    { 
      title: "Manufacturer", 
      name: "manufacturer",
      type: "array", 
      of: [
        {
          type: 'reference',
          to: [{type: "manufacturer"}]
        }
      ]
    }
  ],
  preview: {
    select: {
      licensePlate: 'licensePlate',
      model: 'model',
      // Use dot notation to dereference the first manufacturer reference
      manufacturerName: 'manufacturer.0.name'
    },
    prepare({licensePlate, model, manufacturerName}) {
      return {
        title: `${licensePlate} - ${manufacturerName} ${model}`
      }
    }
  }
}

The key points here:

  1. select: This specifies which fields to pull from your document. For the manufacturer reference, I'm using manufacturer.0.name which accesses the first item in the array (0) and then dereferences it to get the name field using the -> operator (represented by dot notation in the select).

  2. prepare: This function receives the selected values and returns an object with the formatted title that will appear in the list view.

If your manufacturer reference might not always be set, you can add a fallback:

prepare({licensePlate, model, manufacturerName}) {
  return {
    title: `${licensePlate || 'No Plate'} - ${manufacturerName || 'Unknown'} ${model || 'Unknown Model'}`
  }
}

You can learn more about preview configuration and dereferencing references in the official Sanity documentation on previews and list views.

Show original thread
5 replies
Hi Johannes. You can do this using previews . In your schema, at the same level as your document’s 
fields[]
, you add 
preview: { … }
. Something like:

import React from 'react';

export default {
  name: '...',
  title: '...',
  type: 'document',
  fields: [
    {
      title: "License Plate",
      name: "licensePlate",
      type:"string"
    },
    {
      title:"Model",
      name:"model",
      type:"string"
    },
    {
      title:"Manufacturer",
      name:"manufacturer", 
      type: "array",
      of: [
        {
          type:'reference',
          to: [
            {
              type:"manufacturer"
            }
          ]
        }
      ]
    }
  ],
  preview: {
    select: {
      manufacturer: 'manufacturer.name',
      model: 'model',
      licensePlate: 'licensePlate',
    },
    prepare({ manufacturer, model, licensePlate }) {
      return {
        title: `${licensePlate} - ${manufacturer} ${model}`
      }
    }
  }
}
It’s probably worth adding some error handling to your 
return
statement (in case one or more of the fields isn’t there). You might also need to play with 
manufacturer
in your `select`—it might need to be 
manufacturer: 'manufacturer.0.name'
.
Hm… Almost?Getting “License Plate - undefined undefined”

(Even took out the manufacturer array to see if that was part of the problem).



import { array } from "prop-types";
import Tabs from "sanity-plugin-tabs"

export default {

title:"Vehicle",
name:"vehicle",
type:"document",

fields: [

// define the tab layout

    { title:"Reg", name:"licensePlate", type:"string"},


    {
        name:"content",
        type:"object",
        inputComponent: Tabs,

        fieldsets: [
            {name:"main", title:"Generelt", options:{sortOrder:10}},
            {name:"technical", title:"Teknisk", options:{sortOrder:20}}

        
        ],
        options: {layout:"object"},
        
// define the tab contents

                fields: [

                    //tab 1
                           

                            {   title:"Merke", 
                                name:"manufacturer", 
                                type: "array", of: [
                                    {type:'reference',
                                        to: [ {type:"manufacturer"}]
                                    }
                                ],   
                            fieldset:"main"
                            },

                            {  title:"Modell", name:"modelName", type:"string", fieldset:"main" },
                        
                            {  title:"Modellbetegnelse", name:"techmodel", type:"string", fieldset:"technical" }

                        
                    
                    ]

    }
] ,
preview: {
    select: {
      modelName: 'modelName',
      licensePlate: 'licensePlate',
    },
    prepare({ modelName, licensePlate }) {
      return {
        title: `${licensePlate} - ${modelName}`
      }
    }
  }, 
}

Ahh, okay. That’s a different schema than what I first saw.
To find out the dot notation you’ll need to use, I like to go to the three dots in the top-right corner and choose 
Inspect
. If you follow the tree to your desired value, you should be able to plug that into your 
preview.select
.
If you want to post yours I’d be happy to help you form it.
Perfect, found it (and fixed 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?