Customizing preview component and looping through selected reference array items in Sanity.io
6 replies
Last updated: Apr 3, 2023
N
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?
Apr 3, 2023, 3:03 PM
Yep! It’s called renderDefault .
Apr 3, 2023, 4:07 PM
N
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
// }
// }
// }
})
Apr 3, 2023, 5:37 PM
N
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.Apr 3, 2023, 5:52 PM
Yep! You can grab them in the
select.
Apr 3, 2023, 6:24 PM
N
Thanks!
Apr 3, 2023, 6:59 PM
N
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'
}
}
}
})Apr 3, 2023, 7:05 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.