Modifying document title in studio document list view using previews in Sanity.io
5 replies
Last updated: Feb 25, 2021
J
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
studio list view
“LKJ546 - BMW X5”
Is there a way to achieve this?
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"}] } ]}
“LKJ546 - BMW X5”
Is there a way to achieve this?
Feb 25, 2021, 11:01 PM
J
Hi Johannes. You can do this using previews . In your schema, at the same level as your document’s
It’s probably worth adding some error handling to your
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}` } } } }
returnstatement (in case one or more of the fields isn’t there). You might also need to play with
manufacturerin your `select`—it might need to be
manufacturer: 'manufacturer.0.name'.
Feb 25, 2021, 11:17 PM
J
Hm… Almost?Getting “License Plate - undefined undefined”
(Even took out the manufacturer array to see if that was part of the problem).
(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
J
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
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
J
If you want to post yours I’d be happy to help you form it.
Feb 25, 2021, 11:43 PM
J
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.