How to display the title field in Sanity preview section
19 replies
Last updated: Dec 5, 2022
O
Can I return the title that is given in the field section and put that in the preview section and how should I do that?
fields: [
{
title: 'Title',
name: 'title',
type: 'string',
},
],
preview: {
prepare() {
return {
icon: MdTextFields,
title: 'how to get the above title ???',
}
}
}
},Dec 5, 2022, 10:06 AM
S
you target a field with the name of a field. etc if my object looks like this you can target the preview title with
title: "objectName"
{
title: Title of Object',
name: 'objectName',
type: 'string',
},Dec 5, 2022, 12:18 PM
O
I dont think I fully understand it yet.this is what my schema object looks like.
What I ment is if I fill the title with some random text in sanity how do I fetch that and show it in the preview?
{
title: 'Components',
name: 'components',
type: 'array',
of: [
{
title: 'Content',
name: 'content',
type: 'document',
icon: MdTextFields,
fields: [
{
title: 'Title',
name: 'title',
type: 'string',
},
{
name: 'text',
type: 'localeMarkdown',
description: 'A Github flavored markdown field with image uploading',
},
],
preview: {
prepare() {
return {
icon: MdTextFields,
title: 'content',
}
}
}
},Dec 5, 2022, 12:38 PM
S
ohhhh, have you tried
content.title?
Dec 5, 2022, 12:39 PM
O
haha sorry I might be a bit unclear.Right now it show me "content" see image below. I want to be able to let it grab what I have writen in the title section of that and display it instead of "content" inside sanity
Dec 5, 2022, 12:42 PM
O
so basicly now that it has this . that should be displayed instead of content
Dec 5, 2022, 12:43 PM
S
yes, but have you tried
title: 'content.title'as your preview title?
Dec 5, 2022, 12:44 PM
O
yes but that wont work
Dec 5, 2022, 12:44 PM
S
preview: {
select: {
title: 'content.title',
icon: MdTextFields,
},
prepare(selection) {
const {title, icon} = selection
return {
title: title,
media: icon,
}
}
},Dec 5, 2022, 12:45 PM
S
let me check what im doing
Dec 5, 2022, 12:45 PM
S
export default {
title: 'Components',
name: 'components',
type: 'array',
of: [
{
title: 'Content',
name: 'content',
type: 'document',
fields: [
{
title: 'Title',
name: 'title',
type: 'string',
},
],
preview: {
select: {
title: 'title',
},
prepare(selection) {
const {title} = selection
return {
title: title
}
}
},
}
]
};Dec 5, 2022, 12:55 PM
S
This should do the trick, note that i removed one field and some icons since i didnt bother to download and fix imports
Dec 5, 2022, 12:55 PM
S
copy paste the preview
Dec 5, 2022, 12:55 PM
O
ah yeah that works in sanity. thanks !
Dec 5, 2022, 12:58 PM
O
never used the select property
Dec 5, 2022, 12:58 PM
O
so how should I add the icon for instance? because the icon is a fucntion it seems
Dec 5, 2022, 12:59 PM
O
Oh I got it its actualy way simpler
Dec 5, 2022, 1:01 PM
O
preview: {
select: {
title:'title',
},
prepare(selection){
const {title, icon} = selection
return {
title: title,
icon: MdTextFields,
}
}
}Dec 5, 2022, 1:01 PM
O
Thanks
user U
Dec 5, 2022, 1:01 PM
S
yep, no worries
Dec 5, 2022, 1:02 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.