Skip to content
Unlock seamless workflows and faster delivery with our latest releases - Join the deep dive
Get help on Slack

Customizing reference field preview in array schema without modal

6 replies
Last updated: Jun 24, 2024
Hi! Small question: I have an object inside an array, which contains only one reference field. I want to style this element, which works fine with a custom preview component. Now, when u click the component, U first get the popover / modal with the reference, and then when clicking the reference, you go to the actual pane of the reference. Is there a way to skip the modal and go straight to the pane with that custom component? Thanks 🙂
Jun 24, 2024, 12:33 PM
Not really. I suppose you could add the reference field directly to the array schema, instead of putting it in an object to eliminate the modal step.
Jun 24, 2024, 3:45 PM
Hey
user M
, Thank you for replying! Well, if i do, I cannot customize it by means of a preview component, am i right? For what I see now, only an item component overrides it, other components dont change the field.

        {
            title: 'Endeavor',
            name: 'endeavor',
            type: 'reference',
            to: [{type: 'endeavors'}],
            validation: (Rule) => Rule.required(),
            components: {
                item: EndeavorPreviewComponent,
            },
        }
But then I lose the draghandle, menu, and the ability to click the item. Or am I missing something obvious?
Jun 24, 2024, 4:56 PM
You can still customize the preview of a reference that’s directly inside of an array.
Jun 24, 2024, 5:27 PM
user M
could you show me how?
Jun 24, 2024, 8:35 PM
Ok I found it, I had to edit the preview of the document, not the reference. thanks for the help! 🙂
Jun 24, 2024, 9:24 PM
You can also do the reference field if you don’t want to customize the document preview everywhere:
{
      name: 'someArray',
      type: 'array',
      of: [
        {
          type: 'reference',
          to: [
            {
              type: 'person',
              components: {
                preview: () => (
                  <div style={{border: 'dashed red'}}>I AM A PREVIEW COMPONENT</div>
                ),
              },
            },
          ],
        },
      ],
    },
Jun 24, 2024, 9:26 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.

Get started for freeExplore the demo

Was this answer helpful?