Creating a directory tree of content in Sanity.io's desk tool
14 replies
Last updated: Feb 10, 2021
C
As our content grows we're getting som feedback that some listings in the desk tool are long and hard to navigate. Is it possible to build some sort of "directory tree" of content? E.g. in a listing, allow documents of type A, OR "directories" that can contain documents of type A or directories and so on. I want the documents to be documents, not objects, do I don't want to create "directory" type with a list of objects in it.
Feb 4, 2021, 7:54 AM
A
You can use filters inside the desk structure to create your own lists. Does this help? https://www.sanity.io/docs/structure-builder-typical-use-cases#dynamic-grouping-of-documents-56a7d9c846a6
Feb 4, 2021, 7:57 AM
A
for example how I have set up events in one of my projects
S.listItem()
.title(getDocumentTitle("event"))
.icon(getDocumentIcon("event"))
.child(
S.list()
.title(getDocumentTitle("event"))
.items([
S.listItem()
.title("All events")
.icon(getDocumentIcon("event"))
.child((id) =>
S.documentList()
.title("All events")
.filter('_type == "event"')
.menuItems([...S.documentTypeList("event").getMenuItems()])
),
S.divider(),
S.listItem()
.title("Upcoming events")
.icon(getDocumentIcon("event"))
.child((id) =>
S.documentList()
.title(getDocumentTitle("event"))
.filter(`_type == "event" && date > "${today}"`)
.menuItems([...S.documentTypeList("event").getMenuItems()])
),
S.listItem()
.title("Past events")
.icon(getDocumentIcon("event"))
.child((id) =>
S.documentList()
.title(getDocumentTitle("event"))
.filter(`_type == "event" && date < "${today}"`)
.menuItems([...S.documentTypeList("event").getMenuItems()])
),
])
),Feb 4, 2021, 7:59 AM
C
This isn't exactly what I was looking for, but could possibly be of help. What I ideally want is for our content editors to be able to edit the desk structure and create arbitrary hierarchies of documents.
Feb 4, 2021, 8:00 AM
A
well if you make a schema for the desk structure you could use that for filtering right?
Feb 4, 2021, 8:01 AM
C
Possibly? I don't see how š Let's say I have article and directory. I want the top-level structure to contain a mix of article and directories. Each directory should in turn open a new desk pane with more articles and directories.
Feb 4, 2021, 8:02 AM
C
I'm not sure how to create such a "directory" type.
Feb 4, 2021, 8:03 AM
C
I'm also not sure how to create recursive desk structure of unknown depth this way.
Feb 4, 2021, 8:03 AM
A
ah the recursiveness is an issue yeah. Maybe you could do a query at the start of the deskStructure using the js client and use that to create a loop of listItems with children? Not sure that would work though.
Feb 4, 2021, 8:05 AM
A
maybe this example can help https://gist.github.com/kmelve/28a1deb84fc3b351183b239e3191a5ae#file-deskstructure-js
Feb 4, 2021, 8:09 AM
C
Seems to be an example of the same kind of filtering you linked to above?
Feb 4, 2021, 8:11 AM
C
user Y
(if you have the time) would that gist work for recursive structures?Feb 4, 2021, 8:12 AM
Soooo. It's technically possible to create a ādesk structure configuration documentā where you create a nested array input that at least goes 20 level deep (that's the technical level for how far we index I believe). You can use this structure to generate the structure since it supports both promises and observables.
I'm not sure if I have time for a proof of concept this week, I'm afraid
I'm not sure if I have time for a proof of concept this week, I'm afraid
Feb 4, 2021, 12:48 PM
C
No worries! Would you say that doing this is not really recommended? Sounds a little "off the beaten path"
Feb 10, 2021, 8:03 AM
C
(Sorry for the extreme delay, got caught up elsewhere and forgot about this š¢ )
Feb 10, 2021, 8:03 AM
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.