Skip to content
🎤 Builder Talk: The Story Behind Lady Gaga’s Digital Experience – Register now
Get help on Slack

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.

Get started for freeExplore the demo

Was this answer helpful?