Adding custom views to a document using the orderable-document-list plugin
13 replies
Last updated: Mar 4, 2023
M
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.
Anyone knows how to add different views for the document? Eg. Editor, Preview, Json.
Mar 2, 2023, 1:51 PM
D
You could use this to add a custom view.
Mar 3, 2023, 12:34 PM
M
You mean this?
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.
I added this. Where i pass in the views i want to the plugin
],})`
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') ]) } }
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
D
Glad you figured it out! π
Mar 3, 2023, 1:13 PM
M
Thanks for the help thou:)
Mar 3, 2023, 1:14 PM
D
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
D
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
M
hmm. Maybe i made a mistake in the default document node.
Mar 3, 2023, 1:16 PM
D
Ah, yes, I remember, I had to move out the
JSONViewercomponent because it canβt seem to compile. I had to create a
.tsxfile for that component
Mar 3, 2023, 1:17 PM
M
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
M
Yea all components used in views has to be a react component.
Mar 3, 2023, 1:18 PM
D
Right. Iβm with you in doing it in desk structure. π
Mar 3, 2023, 1:20 PM
M
Checked out your website. Very cool! And thanks for teaching webdev to others π
Mar 3, 2023, 1:24 PM
D
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.