Get help on Discord

How to show custom preview as default view when opening document from search results?

3 replies
Last updated: Jul 29, 2021
Hello you clever people. Got a bit of a conundrum here. I have created a custom preview component for my main doc type, and managed to have this preview show up as the default view, so when I select a word in the menu I see the nicely formatted preview, as in fig 1. However if I use the search bar and find a word (as illustrated in fig 2) and select it by clicking or hitting enter I get this different view showing the form, and with the links to the view options (Display, Editor) removed. How can I make the document show in the custom preview in this "searched result"-view?
AI Update

I understand your frustration! This is a known behavior in Sanity Studio where the global search and Structure tool navigation work somewhat independently. When you navigate through the Structure tool's menu, your custom defaultDocumentNode configuration is applied correctly, but when you use the global search, Studio can sometimes open documents in a default view that bypasses your custom configuration.

The Solution:

The good news is that your defaultDocumentNode configuration in the structureTool() plugin should apply to all document opens, including those from search results. Based on the Structure Builder documentation, here's how to ensure it works properly:

Make sure your defaultDocumentNode is configured at the plugin level in your sanity.config.ts:

// sanity.config.ts
import {defineConfig} from 'sanity'
import {structureTool} from 'sanity/structure'

export default defineConfig({
  // ... other config
  plugins: [
    structureTool({
      defaultDocumentNode: (S, {schemaType}) => {
        // Apply your custom preview to your document type
        if (schemaType === 'word') { // or whatever your doc type is called
          return S.document().views([
            S.view.component(YourCustomPreview).title('Display'),
            S.view.form().title('Editor')
          ])
        }
        return S.document()
      },
      structure: (S) => {
        // your structure configuration
      }
    })
  ]
})

Key points to fix your issue:

  1. Order matters: If you want the preview to be the default view (the one that shows first), list it first in the views array. This ensures when documents open from search, they show your custom preview first.

  2. Plugin-level configuration: Ensure defaultDocumentNode is at the plugin level in structureTool(), not nested within specific structure items.

  3. Don't override in structure: If you're defining specific document nodes within your structure configuration for the same document type, those will take precedence over defaultDocumentNode. Make sure you're not inadvertently overriding it.

  4. Check for the view tabs: The tabs (Display, Editor) should appear for documents opened from search just as they do from navigation. If they're missing entirely, there might be a configuration conflict.

The defaultDocumentNode at the plugin level should apply universally to all document opens, whether from the structure navigation or global search. If you're still experiencing issues after confirming this setup, it might be worth checking if there are any Studio version-specific quirks or reaching out to the Sanity community with your specific Studio version and configuration.

Show original thread
3 replies
My deskstructure might be relevant:
import { CgBox as ByCatIcon } from 'react-icons/cg';
import S from '@sanity/desk-tool/structure-builder';
import WordPreview from '../cpt/WordPreview';


export default () =>
  S.list()
    .title('Content')
    .items([
      S.listItem()
        .title('Words by category')
        .icon(ByCatIcon)
        .child(
          // List out the categories
          S.documentTypeList('category')
            .title('Words by category')
            // When a category is selected, pass its id down to the next pane
            .child((categoryId) =>
              // load a new document list
              S.documentList()
                .title('Words')
                // Use a GROQ filter to get documents.
                // This filter checks for sampleProjects that has the
                // categoryId in its array of references
                .filter('_type == "word" && $categoryId == category._ref')
                .params({ categoryId })
            )
        ),
      S.divider(),
      S.listItem()
        .title('All words')
        .schemaType('word')
        // When you open this list item, list out the documents
        // of the type category"
        .child(S.documentTypeList('word').title('Words')),
      S.listItem()
        .title('Categories')
        .schemaType('category')
        .child(S.documentTypeList('category').title('Categories')),
    ]);

export const getDefaultDocumentNode = ({ schemaType }) => {
  // Conditionally return a different configuration based on the schema type
  if (schemaType === 'word') {
    return S.document().views([
      S.view.component(WordPreview).title('Display'),
      S.view.form(),
    ]);
  }
};
Joining the effort, then.

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?