Skip to content
Unlock seamless workflows and faster delivery with our latest releases – get the details
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?