Customizing preview component and looping through selected reference array items in Sanity.io
6 repliesLast updated: Apr 3, 2023
I am trying to customize the preview component. Looking for a possibility to just clone/use the default component but tweak it a little bit according to my needs. Is there a default?
Yep! It’s called renderDefault .
user M This works just fine but I am actually trying to loop through the selected reference array items. But it's sooo deeply nested. I am currently looking into "props.schemaType".
import { PreviewProps, defineField, defineType } from 'sanity'import { RiTeamLine } from 'react-icons/ri'const Preview = (props: PreviewProps) => {return (
<>
{console.log(props)} {props.renderDefault({ *...*props,
title: props.schemaType?.title,
description: props.schemaType?.description})}
</>
)
}
export default defineType({ name: 'sectionTeam',
title: 'Section Team',
type: 'object',
fields: [
defineField({ title: 'Team members',
description: 'Select all team members and drag & drop to sort the order.',name: 'teamMembers',
type: 'array',
of: [
{ type: 'reference',
to: [{ type: 'user' }] }
],
options: { layout: 'grid'
}
})
],
components: { preview: Preview
}
// preview: { // select: { // title: 'title',
// teamMembers: 'teamMembers',
// text: 'text'
// },
// prepare({ title, text, teamMembers }) {// console.log(teamMembers)
// return { // title: 'Section Team',
// media: RiTeamLine
// }
// }
// }
})
user M Is it possible to display the "name" from a reference of "users" inside the prepare return subtitle, title etc. It only returns a reference, key etc.
Yep! You can grab them in the
select.
Thanks!
user M Actually did but I am getting undefined on array items of "inline":
import { defineArrayMember, defineField, defineType } from 'sanity'
import { BiAddToQueue } from 'react-icons/bi'
import { preview } from 'sanity-plugin-icon-picker'
export default defineType({
name: 'sectionUsps',
title: 'Section USPs',
type: 'object',
fields: [
defineField({
title: 'Usps',
name: 'usps',
type: 'array',
of: [
{
type: 'object',
name: 'inline',
fields: [
{ type: 'string', name: 'title' },
{ type: 'number', name: 'amount' }
]
}
]
})
],
preview: {
select: {
usps: 'usps'
},
prepare(selection) {
const { usps } = selection
console.log(usps)
return {
title: 'Test'
}
}
}
})Was this answer helpful?
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.
