🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now

How to hide the "Create new" button in a filtered list in Sanity.io

9 replies
Last updated: Oct 22, 2021
Hey all, I have a desk structure where documents are filtered and grouped by date into three distinct lists: upcoming, past and unfiltered.
Is there a way to get rid of the
Create new … button in the top-right corner of a filtered list (see screenshot)? In my case, filtered events, it doesn’t make much sense to create a past event.
I know about document actions, initial value templates and menu items. They all seem to either extend or bypass this specific create action. Happy for any pointers on how to hide this button!

Here’s the relevant part of the desk structure:

      S.listItem()
        .title("Events")
        .schemaType("event")
        .child(
          S.list()
            .title("Event Lists")
            .items([
              S.listItem()
                .title("Upcoming events")
                .child(
                  S.documentTypeList("event")
                    .title("Upcoming events")
                    .filter("date >= now()")
                ),
              S.listItem()
                .title("Past events")
                .child(
                  S.documentList()
                    .title("Past events")
                    .filter("_type == 'event' && date < now()")
                ),
              S.listItem()
                .title("All events")
                .child(S.documentTypeList("event").title("Events")),
            ])
        ),
      S.divider(),
Oct 22, 2021, 11:30 AM
following
Oct 22, 2021, 11:53 AM
That create button as far as I know is not customizable within the list configuration, but a while back I wrote this ugly hack:

https://gist.github.com/d4rekanguok/477548814fc6c59104c158840a3ab966
Basically these lists are serialized into config objects, so this custom documentList has the serializer overloaded so that the create button is removed from its config
Oct 22, 2021, 3:36 PM
Hey Derek, thanks for the hint! Wow, that is the best kind of ugly 😄 How did you figure that out?! Looks like that’s exactly what I need. Will try it out asap.
Now I am curious what else is possible with customized serializers …
Oct 22, 2021, 4:01 PM
It works! Thanks again,
user G
!
Oct 22, 2021, 4:12 PM
Thanks Daniel, glad it works! The studio is opensourced so it’s easy to take a peek when writing forbidden code 🤫
Looking at this now, we should add a check for
createMenuIdx === -1
in case there’s no create menu, and maybe some other checks in case Sanity change the config structure in the future
Oct 22, 2021, 4:24 PM
Haha, yeh, I find myself overwhelmed with Sanity’s source code.
Oct 22, 2021, 4:28 PM
And yes, one could handle some edge cases. I modified your code snippet to use
documentTypeList
and some menu items do not have
intent
specified:
[
  {
    "title": "Create new Event",
    "icon": {},
    "showAsAction": {
      "whenCollapsed": true
    },
    "intent": {
      "type": "create",
      "params": {
        "type": "event",
        "template": "event"
      }
    }
  },
  {
    "group": "sorting",
    "title": "Sort by Title",
    "icon": {},
    "action": "setSortOrder",
    "params": {
      "by": [
        {
          "field": "title",
          "direction": "asc"
        }
      ],
      "extendedProjection": "title"
    }
  },
  {
    "group": "sorting",
    "title": "Sort by Last edited",
    "icon": {},
    "action": "setSortOrder",
    "params": {
      "by": [
        {
          "field": "_updatedAt",
          "direction": "desc"
        }
      ],
      "extendedProjection": ""
    }
  },
  {
    "group": "sorting",
    "title": "Sort by Created",
    "icon": {},
    "action": "setSortOrder",
    "params": {
      "by": [
        {
          "field": "_createdAt",
          "direction": "desc"
        }
      ],
      "extendedProjection": ""
    }
  },
  {
    "group": "layout",
    "title": "Compact view",
    "icon": {},
    "action": "setLayout",
    "params": {
      "layout": "default"
    }
  },
  {
    "group": "layout",
    "title": "Detailed view",
    "icon": {},
    "action": "setLayout",
    "params": {
      "layout": "detail"
    }
  }
]
So maybe add a
?
in
intent?.type === "create"
.
Oct 22, 2021, 4:32 PM
Ah, also, I could save some lines of code by using filter (don’t know if that has any drawbacks because the array is not modified in place):
// …
const { menuItems: items, ...rest } = _documentList.__serialize(...args)
const menuItems = items.filter(({ intent }) => intent.type === 'create')
return { menuItems, ...rest }
// …
Oct 22, 2021, 5:02 PM
ah, that’s better! Now it’s a good looking hack 😛
Oct 22, 2021, 5:04 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.

Was this answer helpful?

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
DOMParser is not defined at defaultParseHtmlDec 3, 2020
Next.js and Vercel - Error! No Output Directory named "dist" foundAug 8, 2022
Custom Document Views - Is it Even Possible to Use the Structure Builder?Apr 21, 2022
Hi all! Does anyone have problem on deoplloying on Vercel (Using Next. js as a frontend)? I have two test projects, andonce...Jan 25, 2021
Issue with compiling studio, resolved by nuking node_modules and installing with `sanity install`Aug 21, 2020
How to Disallow Robots on a SubdomainNov 12, 2020
Issue setting value of JSON field with document action in Sanity StudioApr 22, 2020
Issue with setting up Next.js E-commerce example and resolving the error related to the port.Jan 25, 2021
has anyone figured out a way to sort lists of content in the studio? i'd love a drag and drop if possibleJan 13, 2021
Error message when updating to studio version 2.2.3Jan 26, 2021

Related contributions

Turbo Start Sanity
- Template

The battle-tested Sanity template that powers Roboto Studio's websites

Go to Turbo Start Sanity

Schema UI - Next.js Sanity Starter
- Template

A Next.js starter template with Next.js 15, Tailwind CSS, shadcn/ui, and Sanity CMS with Live Editing. Get production-ready React components with matching Sanity schemas and queries. Build dynamic pages faster while keeping full control over customization.

Serge Ovcharenko
Go to Schema UI - Next.js Sanity Starter

The Swaddle
- Made with Sanity

A new brand identity to represent a more mature company, to signify The Swaddle’s evolution from publisher to production house, combined with an easier to navigate platform that can surface multiple content types - drawing readers through The Swaddle’s content offering.

Nightjar
Go to The Swaddle