Get a peek at our latest innovations at Sanity Product Day on Dec 8th →

Custom Document Views - Is it Even Possible to Use the Structure Builder?

9 replies
Last updated: Apr 21, 2022

Hey folks! Is there a way to display a regular document list (S.documentList) inside of a custom document view? I would like to show a studio-style list of documents that are related to the currently viewed document. The custom views UX feels perfect for that, but the only two view types available are

component
and
form
.Is it even possible to use the structure builder inside a custom react component?

Apr 1, 2022, 2:02 PM

The Documents Pane plugin is useful for this! I use it for exactly this purpose. https://www.sanity.io/plugins/documents-pane

Apr 1, 2022, 2:34 PM

That looks pretty amazing - should work perfectly for my use case 🙂 Thanks Daniel!

Apr 1, 2022, 2:37 PM

Great! No problem 🙂

Apr 1, 2022, 2:38 PM

That looks pretty amazing - should work perfectly for my use case 🙂 Thanks Daniel!

Apr 1, 2022, 2:37 PM

The Documents Pane plugin is useful for this! I use it for exactly this purpose. https://www.sanity.io/plugins/documents-pane

Apr 1, 2022, 2:34 PM

Actually

user L
, as much as it is very helpful, the customization options are somewhat limited. Looks like the only way to control the list is editing the preview of the documents displayed in it. Opening the documents in an additional panel would be great too, instead of just going straight to the document or even simply opening in new tab (at least in my specific use case) 🤔 Any thoughts on that?

Apr 2, 2022, 3:59 PM

By “control the list” do you mean control how the documents appear, or control which documents appear? You should be able to control this with the

query
option, and you can have multiple panes shown. For example, in one studio I have a
product
document type, with two panes, one for
promotions
and one for
guides
. The configuration looks like this:
S.view
        .component(DocumentsPane)
        .options({
          query: `*[
                _type in ["guide"] 
                && !(_id in path("drafts.**")) && references($id)
            ]`,
          params: {id: '_id'},
          useDraft: false,
          debug: true,
        })
        .title('Guides')
If you do mean you’d like to change the way that documents appear in the list (i.e. what shows up as the image, title, subtitle), I believe that is controlled by the same preview api that controls the other lists and search results.

Agreed that opening to the right would be nice, this was created before the references-in-place feature was rolled out. I’ll see if the folks who made it can take a look.

Apr 4, 2022, 1:32 PM

Hey

user C
- the Documents Pane plugin has been updated. The new version will now open references in a pane to the right.

Apr 21, 2022, 2:23 PM

That is amazing news Daniel! Thank you for staying on top of this :)) I will update straight away 😉

Apr 21, 2022, 2:28 PM

Sanity.io: Get the most out of your content

Sanity.io is a platform to build websites and applications. It comes with great APIs that let you treat content like data. Free to get started, and pay-as-you-go on all plans. Find out more.