Join our next Developer Virtual Meetup – Live Q&A, Project Showcase, Swag raffle, and more 🔥

Previewing the title in a string options list in Sanity and the front-end.

1 replies
Last updated: Oct 4, 2021
Hey guys, I'm wondering how do you preview the
title
in a string options list in both sanity, and also in the front-end?
This list example from the
String Schema Type Docs shows how to preview the lowercase string value, but I'm wondering if there is a way to preview the title string instead, since the title string is more human-readable?
In the sanity-gatsby-portfolio starter, the projectMember object has a list of roles that are selectable for each person that you add as a projectMember to a project. The preview property looks like this:

//studio/schemas/objects/projectMember.js

export default {
  type: 'object',
  name: 'projectMember',
  title: 'Project Member',
  fields: [
    {
      title: 'Person',
      name: 'person',
      type: 'reference',
      to: {type: 'person'}
    },
    {
      title: 'Roles',
      name: 'roles',
      type: 'array',
      of: [{type: 'string'}],
      options: {
        layout: 'radio',
        list: [
          {title: 'Content Designer', value: 'content'},
          {title: 'Director', value: 'director'},
          {title: 'Engineer', value: 'engineer'},
          {title: 'Engineering Manager', value: 'engineeringManager'},
          {title: 'Product Designer', value: 'designer'},
          {title: 'Product Manager', value: 'manager'},
          {title: 'Subject Matter Expert', value: 'sme'},
          {title: 'Technical Writer', value: 'technicalWriter'},
          {title: 'UX Researcher', value: 'researcher'}
        ]
      }
    }
  ],
  preview: {
    select: {
      personName: 'person.name',
      roles: 'roles',
      media: 'person.image'
    },
    prepare (data) {
      return {
        ...data,
        title: data.personName,
        subtitle: data.roles && data.roles.join('/')
      }
    }
  }
}
I've tried
data.roles.title
and passing
roles.title
into the select object but they both don't return anything. When I try and inspect the document, the value is only shown, and the title isn't available, which begs the question if the title field is even able to be passed into other previews or onto the front-end. If not, then should we maintain the value field as lowercase or can we use display formatting in those fields?
Oct 2, 2021, 1:22 AM
Hi
user R
- unfortunately, you'll have to either duplicate these titles, or create a common enum that both the front-end and studio can use. The
title
is only decorative and for studio use.
You
can write whatever value you want into the
value
field, but "best practice" is to keep those values simple and translatable, by using enums.
Oct 4, 2021, 5:58 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?