Skip to content
Get help on Slack

Modifying document title in studio document list view using previews in Sanity.io

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?
Feb 25, 2021, 11:01 PM
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'
.
Feb 25, 2021, 11:17 PM
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}`
      }
    }
  }, 
}

Feb 25, 2021, 11:38 PM
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
.
Feb 25, 2021, 11:43 PM
If you want to post yours I’d be happy to help you form it.
Feb 25, 2021, 11:43 PM
Perfect, found it (and fixed it) 🎉
Feb 25, 2021, 11:45 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.

Get started for freeExplore the demo

Was this answer helpful?