Skip to content
👋 Next.js Conf 2024: Come build, party, run, and connect with us! See all events
Get help on Slack

Removing the 'add item' button when length validation is met in an array in Slack thread.

25 replies
Last updated: Apr 27, 2022
Hi Everyone!
I’m using an 
array
with a 
length validation
to limit the Array to 2 array items. Is there a way to remove the ‘add item’ button to disappear when the length validation is met?
Mar 18, 2022, 5:16 PM
user A
created this input component that will remove the add item button once your 
max()
is hit.
Mar 18, 2022, 6:19 PM
Hi User where u able to solve this?
Apr 27, 2022, 4:37 PM
No, I moved past it. It looks like
user A
created a fix that I should try thought.
Glad you brought it up. Are you stuck on it?
Apr 27, 2022, 4:39 PM
user A
looks like that link isn’t available. Can you send another link to it?
Apr 27, 2022, 4:40 PM
I'm not stuck, I want to give my users a section where they can reorder the sections on their homepage, but I don't want to give them the option to add or remove any of the array items...
Apr 27, 2022, 4:40 PM
user S
I’m not sure it’s currently possible to allow re-ordering but not editing. I’ll look through some threads to confirm.
Apr 27, 2022, 4:43 PM
Thanks
user A
Yeah I'm going through this custom array component, but I didn't want to spend so much time on this... maybe I'll just set min and max in the array rules...
Apr 27, 2022, 4:44 PM
Maybe the solution is in
user S
Post order plugin

https://www.sanity.io/plugins/orderable-document-list
Apr 27, 2022, 4:45 PM
Oh yeah but I dont have documents, my document is the homepage, and inside the homepage I have an array of sections... but could this be done with documents instead?
Apr 27, 2022, 4:49 PM
In that case, would it work to set the object(s) in your array to read-only ? That—combined with the code in the gist above—seems like it would get you there.
Apr 27, 2022, 5:17 PM
yeah i tried read-only but then u cant reorder them. Ill see if i can adapt the custom array above.
Apr 27, 2022, 5:18 PM
Good point. Can you put 
readOnly
on the fields themselves instead (i.e., each field inside the object)? That should let you re-order.
Apr 27, 2022, 5:22 PM
oh let me try that
Apr 27, 2022, 5:23 PM
ok so that doesn't let me move the object inside the array and i can still add items to the array...
Apr 27, 2022, 5:28 PM
Interesting. I tried setting up this schema:

export default {
  name: 'myArray',
  title: 'My Array',
  type: 'document',
  fields: [
    {
      name: 'title',
      title: 'Title',
      type: 'string',
    },
    {
      name: 'myArr',
      title: 'My Arr',
      type: 'array',
      validation: Rule => Rule.min(3).max(3),
      of: [
        {
          name: 'myObject',
          title: 'My Object',
          type: 'object',
          fields: [
            {
              name: 'title',
              title: 'Title',
              type: 'string',
              readOnly: true,
            }
          ]
        }
      ]
    }
  ]
}
Then implemented that gist, killed the studio process, and re-started it. I now get the behaviour in the enclosed video. The add button is gone, and although a user could duplicate with the three dots menu, they can’t publish. They can also remove an item to go below three, but also can’t publish. Since the fields are read-only, the add button that re-appears when there are < 3 items isn’t much use, since they would need to edit a field in some way to “create” that item.
Apr 27, 2022, 5:55 PM
I see what you did here! this is awesome! thanks
user A
Apr 27, 2022, 5:58 PM
I had placed my read only on the object itself not on the items inseide
Apr 27, 2022, 5:59 PM
would the gist replace all the arrays? Or is there a way I can have both?
Apr 27, 2022, 6:01 PM
I had expected it to work the same whether 
readOnly
was on the object or the fields of the object, so TIL as well.
Apr 27, 2022, 6:02 PM
like can I have these custom arrays
Apr 27, 2022, 6:03 PM
I see how it works! wow thanks
user A
!! 😄
Apr 27, 2022, 6:09 PM
The gist will go in a file somewhere in your studio folder, then you’ll add it as a part to sanity.json using the format in lines 7–10 of the gist. The file can be named whatever you want (it’s called customArrayFunctions.js in this case); just be sure to update the part path accordingly.
The code in the gist won’t interfere at all except when you set a 
.max()
validation on an array. If you come across a case where you want to implement a max but not lose the add button, you’d want to rework the code in customArrayFunctions.js to more granularly and carefully apply itself.
Apr 27, 2022, 6:09 PM
No problem, and full credit to User . I just adapted it to work with Sanity UI.
Apr 27, 2022, 6:10 PM
Hey
user A
any idea how to remove the 3 dots on the right side? it opens up a menu to remove and add items.
Apr 27, 2022, 6:34 PM
I was playing around with the gist but can't seem to find where that menu comes from.
Apr 27, 2022, 6:34 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?