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

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– 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?