Skip to content
Get help on Slack

Adding custom views to a document using the orderable-document-list plugin

13 replies
Last updated: Mar 4, 2023
Hi! I am using: https://github.com/sanity-io/orderable-document-list
Anyone knows how to add different views for the document? Eg. Editor, Preview, Json.
Mar 2, 2023, 1:51 PM
You could use this to add a custom view.
Mar 3, 2023, 12:34 PM
You mean this?
export const getDefaultDocumentNode = ({documentId, schemaType}) => {
  // Render the JSON preview only on posts or the siteSettings document
  if (schemaType === "post" || documentId === "siteSettings") {
    return S.document().views([
      S.view.form(),
      S.view.component(JsonPreview).title('JSON')
    ])
  }
}
Didnt work for the plugin i am using. But i fixed the problem by adjusting the plugin:
https://www.sanity.io/plugins/orderable-document-list

Called function from desk structure.
export function orderableDocumentListDeskItem(config: OrderableListConfig, views) {



return S.listItem()

.title(listTitle)

.id(listId)

.icon(listIcon)

.child(

Object.assign(S.documentTypeList(type).serialize(), {

// Prevents the component from re-rendering when switching documents

__preserveInstance: true,

// Prevents the component from NOT re-rendering when switching listItems

key: listId,


type: 'component',

component: OrderableDocumentList,

options: { type, filter, params, client },

I added this. Where i pass in the views i want to the plugin 
child: (documentId: any) =>

S.document()

.documentId(documentId)

.schemaType(type)

.views(views(S)),


menuItems: [

S.menuItem()
`.title(
Create new ${typeTitle}
)` 
.intent({ type: 'create', params: { type } })

.serialize(),
`S.menuItem().title(
Reset Order 2
).icon(GenerateIcon).action(
resetOrder
).serialize(),` `S.menuItem().title(
Show Increments
).icon(SortIcon).action(
showIncrements
).serialize(),
],
})` 
)

.serialize()
Mar 3, 2023, 12:37 PM
Glad you figured it out! 😊
Mar 3, 2023, 1:13 PM
Thanks for the help thou:)
Mar 3, 2023, 1:14 PM
It worked straight with mine, although I think my configuration is pretty much simpler than yours. I just did a quick try.
Mar 3, 2023, 1:15 PM
But the good thing is I learned from your example that you could filter it out to show only on specific schema. That was some question I had before I saw your example.
Mar 3, 2023, 1:16 PM
hmm. Maybe i made a mistake in the default document node.
Mar 3, 2023, 1:16 PM
Ah, yes, I remember, I had to move out the 
JSONViewer
component because it can’t seem to compile. I had to create a 
.tsx
file for that component
Mar 3, 2023, 1:17 PM
Yea sure!I like to do everything in the structure to get full control so i add view like this:


.child(

S.editor()

.schemaType('aboutPage')

.documentId('aboutPage')

.views(Views(S))
Mar 3, 2023, 1:17 PM
Yea all components used in views has to be a react component.
Mar 3, 2023, 1:18 PM
Right. I’m with you in doing it in desk structure. 😉
Mar 3, 2023, 1:20 PM
Checked out your website. Very cool! And thanks for teaching webdev to others 🙂
Mar 3, 2023, 1:24 PM
thank you
user J
. it means a lot. 😊
Mar 4, 2023, 1:17 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?