🗓️ Everything *[NYC] is back. A free gathering for AI builders. Sept 9 →

How to Create a Custom Input Component for an Array of Objects

21 repliesLast updated: May 2, 2021
I’m attempting to create a filter and visualizer for an array of objects input. It was over 400 objects, each of which has bunch of custom input components. What I fail to achieve is to make an array input component while keeping the default behavior. How would I for example trigger the edit modal to open as it would by default from a custom input component?
Looks like nice copy paste I can do from what you send. I’m just trying to mentally see how it would be possible to also keep each object’s onChange isolated from the parents onChange callback. It seems at the moment, for any inputComponent defined, I’ll need to handle the change from a single callback, which is totally possible. Ok thanks, it’s a tiny bit more work that I hoped for, but not too bad.
Cool, would be interesting to see what you come up with!
In terms of change isolation, I don't think it's being respected in Studio as such. As soon as you start doing anything in a modal, the parent document is being updated as well, which is not always what you'd want. For this to be more isolated, I think the UX should provide more explicit means to commit (or cancel) any changes from such modals (ok and cancel buttons?).
that’s possible. By default, there’s automatic onChange for the preview, so the deploy button appears green from the modal. Which makes sense. I wonder if I’d make it a ref instead of object, I’d get what I want. That the data in the object would have different lifecycle from the array it lives in.
ah na, it would require too much change, maybe I should’ve made this to be array of ref to begin with.
If I gather correctly, you currently have an array of 400 objects within a document?
yes, it’s a media project, and this is the type
{
      title: "Event Timeline",
      name: "event_timeline",
      type: "array",
      options: { editModal: "fullscreen", layout: "tags" },
      of: [{ type: "audio_event_simple" }, { type: "video_event_simple" }],
    },

and each event is an object
there are so many events that it’s almost impossible to scroll in the studio
I see. I'm not sure if that's the way to go in Sanity, given that you already have issues in Studio. Compared to other document-based datastores (like MongoDB) it's discouraged to have such large arrays in a single document for performance reasons (different from the performance issues you are seeing, obviously).
I don't have enough experience with Sanity in this case to say for certain that the datastore itself wouldn't be able to handle it efficiently. But from a UX perspective, I can see that it would become tedious working with it like this.
yeh, not sure either, I could have done this more clever, but I somehow assumed it would work out fine, That a pagination etc was built-in.
but still, the original idea you recommended is still an option imo. Just make the filter/pagination manually and try to replicate the default behavior.
Have you considered using a custom DeskStructure.js to have your array (of references?) show in a hierarchical structure and leverage the list view panes in Studio? They use virtual scrolling, so they should be quite efficient.
that’s an idea, can you filter and search trough the pane views?
I'm afraid not, only sorting is supported I think. But it would solve your slow scrolling.
I’ll follow this ticket, sounds like exactly what I’m dealing with
more important than performance atm, is for the user to find what they are looking for over large data
Yes, would be great to have filtering functionality in a few places in Studio. Notably the list panes and array inputs.

Was this answer helpful?

Sanity – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

Get started for freeExplore the demo

Related answers

Get more help in the community Discord

Related contributions

Auto-generate alt text for Media Library assets

FeaturedOfficial

Automatically generate accessible, multilingual alt text for images in your Sanity Media Library using Agent Actions and Sanity Functions

Bram Doppen

Bram Doppen

First Published Timestamp Function

FeaturedOfficial

Automatically track when content was first published with a timestamp that sets once and never overwrites, providing reliable publication history for analytics and editorial workflows.

Knut Melvær

Knut Melvær

Automatically tag blog posts

FeaturedOfficial

AI-powered automatic tagging for Sanity blog posts that analyzes content to generate 3 relevant tags, maintaining consistency by reusing existing tags from your content library.

Ken Jones Pizza
Knut Melvær

Ken Jones Pizza and 1 other