Use field value as title for object field in Sanity document

4 replies
Last updated: Apr 10, 2021
Is it possible to use a field value as the
title
for an
object
field being the main field of a document? In fact avoid this šŸ˜…
fields: [
        {
            name: 'content',
            type: 'object',
            inputComponent: Tabs,

            // Tabs
            fieldsets: [
                { name: 'details', title: 'Details' },
                { name: 'infos', title: 'Informations' },
                { name: 'content', title: 'Content' },
            ],
            options: {
                // layout: 'object'
            },

            // Fields
            fields: [
                /**
                 * Details
                 */
                {
                    name: 'title',
                    title: 'Project title',
                    type: 'string',
                    fieldset: 'details',
                    validation: Rule => Rule.required(),
                },

AI Update

Yes, you can definitely use a field value as the title for an object field! This is exactly what the preview configuration is designed for.

For your case where you have a content object with a nested title field, you'd add a preview configuration to your object schema like this:

{
    name: 'content',
    type: 'object',
    inputComponent: Tabs,
    
    // Add this preview configuration
    preview: {
        select: {
            title: 'title'  // This references the nested title field
        },
        prepare({title}) {
            return {
                title: title || 'Untitled'  // Fallback if no title yet
            }
        }
    },

    fieldsets: [
        { name: 'details', title: 'Details' },
        { name: 'infos', title: 'Informations' },
        { name: 'content', title: 'Content' },
    ],
    
    fields: [
        {
            name: 'title',
            title: 'Project title',
            type: 'string',
            fieldset: 'details',
            validation: Rule => Rule.required(),
        },
        // ... other fields
    ]
}

The select object uses the field name directly since title is a direct child of the content object. When the object is collapsed in the Studio, it will show "Project title" value as the header instead of just "Content".

If you ever need to access deeper nested fields or referenced documents, you can use dot notation like select: { title: 'some.nested.field' } or even reference fields like authorName: 'author.name'.

This makes working with complex objects much more user-friendly since editors can see what's inside without having to expand every object!

Show original thread
4 replies
user N
You should be able to add a preview, and use the ā€˜select’ key to assign ā€˜mainTitle’ to the title (you can also define ā€˜subtitle’ and ā€˜image’ by default and even create your own react component to render the preview)
  preview: {
    select: {
      title: 'mainTitle',
    }
  }
(or
'content.mainTitle'
)
More on list previews here:

https://www.sanity.io/docs/previews-list-views
Oh nice! Thanks
user J
! Very new to Sanity sorry if that all sounds obvious haha
Not at all! there’s a lot of depth to the Studio customization
also, if the title is only for presentation in the studio, you can hardcode it like this:

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.

Was this answer helpful?