Next.js Conf 2024: Your app should be Live by Default – Watch Keynote

Customizing preview component and looping through selected reference array items in Sanity.io

6 replies
Last 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?
Apr 3, 2023, 3:03 PM
Yep! It’s called renderDefault .
Apr 3, 2023, 4:07 PM
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
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
Thanks!
Apr 3, 2023, 6:59 PM
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.

Was this answer helpful?