Get help on Discord

Custom object preview in Portable Text block not working

11 replies
Last updated: Nov 29, 2025
Hi, I'm having trouble figuring out how to properly preview a custom object in a portable text block. Here is the custom block that I insert into the portable text object:

// objects/metric.js
import {IoTrendingUpOutline} from 'react-icons/io5'

export default {
  title: 'Metric',
  name: 'metric',
  type: 'object',
  icon: IoTrendingUpOutline,
  fields: [
    {
      title: 'Label',
      name: 'label',
      type: 'string'
    },
    {
      title: 'Key Number',
      name: 'keyNumber',
      type: 'string'
    },
    {
      title: 'Metric Type',
      name: 'metricType',
      type: 'string',
      options: {
        list: [
          {title: 'Number', value: 'number'},
          {title: 'Increase', value: 'increase'},
          {title: 'Decrease', value: 'Decrease'}
        ]
      }
    }
  ],
  preview: {
    select: {
      label: 'metric.label',
      keyNumber: 'metric.keyNumber',
      metricType: 'metric.metricType'
    },
    prepare (data) {
      let subtitlePrepend = ''
      switch (data.metricType) {
        case 'increase':
          subtitlePrepend = 'Increase in'
          break
        case 'decrease':
          subtitlePrepend = 'Decrease in'
          break
        default:
          subtitlePrepend = ''
          break
      }
      return {
        ...data,
        title: data.keyNumber,
        subtitle: subtitlePrepend && data.label.join(' ')
      }
    }
  }
}
is my switch or the use of 
prepare (data)
messing it up in some way? Should I try and move the switch logic into a 
previewComponent
(like is shown in this videoEmbedPreview example )?
AI Update

Looking at your code, I can spot the issue! In your preview.select, you're using paths like metric.label, metric.keyNumber, etc., but since this schema IS the metric object itself, those fields are at the root level, not nested under metric.

Here's the corrected version:

preview: {
  select: {
    label: 'label',        // Not 'metric.label'
    keyNumber: 'keyNumber', // Not 'metric.keyNumber'
    metricType: 'metricType' // Not 'metric.metricType'
  },
  prepare(data) {
    let subtitlePrepend = ''
    switch (data.metricType) {
      case 'increase':
        subtitlePrepend = 'Increase in'
        break
      case 'decrease':
        subtitlePrepend = 'Decrease in'
        break
      default:
        subtitlePrepend = ''
        break
    }
    return {
      title: data.keyNumber,
      subtitle: subtitlePrepend ? `${subtitlePrepend} ${data.label}` : data.label
    }
  }
}

A couple of other things I noticed:

  1. The metric. prefix: You'd only use dot notation like metric.label if you were accessing a referenced document or nested object. Since these fields are directly on this object, reference them directly.

  2. The data.label.join(' '): Your label field is a string, not an array, so calling .join() on it would cause an error. I changed it to just use data.label directly.

  3. The subtitle logic: I simplified it to use a template literal for cleaner string concatenation.

Your switch logic and prepare function approach are totally fine! You don't need to move to a custom previewComponent for this - the standard prepare function is perfect for transforming data before display. Custom preview components are mainly useful when you need more complex rendering beyond title/subtitle/media.

Show original thread
11 replies

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.

Get started for freeExplore the demo

Was this answer helpful?