Watch a live product demo 👀 See how Sanity powers richer commerce experiences

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

21 replies
Last 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?
May 2, 2021, 11:28 AM
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.
May 2, 2021, 11:54 AM
Cool, would be interesting to see what you come up with!
May 2, 2021, 11:54 AM
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?).
May 2, 2021, 11:57 AM
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.
May 2, 2021, 12:01 PM
ah na, it would require too much change, maybe I should’ve made this to be array of ref to begin with.
May 2, 2021, 12:04 PM
If I gather correctly, you currently have an array of 400 objects within a document?
May 2, 2021, 12:05 PM
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" }],

May 2, 2021, 12:06 PM
and each event is an object
May 2, 2021, 12:06 PM
there are so many events that it’s almost impossible to scroll in the studio
May 2, 2021, 12:07 PM
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).
May 2, 2021, 12:08 PM
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.
May 2, 2021, 12:10 PM
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.
May 2, 2021, 12:10 PM
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.
May 2, 2021, 12:11 PM
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.
May 2, 2021, 12:14 PM
that’s an idea, can you filter and search trough the pane views?
May 2, 2021, 12:15 PM
I'm afraid not, only sorting is supported I think. But it would solve your slow scrolling.
May 2, 2021, 12:16 PM
I’ll follow this ticket, sounds like exactly what I’m dealing with
May 2, 2021, 12:16 PM
more important than performance atm, is for the user to find what they are looking for over large data
May 2, 2021, 12:17 PM
Yes, would be great to have filtering functionality in a few places in Studio. Notably the list panes and array inputs.
May 2, 2021, 12:18 PM

Sanity– build remarkable experiences at scale

The Sanity Composable Content Cloud is the 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.

Related answers

Get more help in the community Slack

TopicCategoriesFeaturedRepliesLast Updated
After adding the subtitle and running this code npm run graphql-deploy It does nothingSep 15, 2020
how to limit a reference to just one entry in Studio reference input side versus the default as-many-entries-as-you-fill-in-an-array...Sep 18, 2020
Is it possible to fetch more than one "_type" using GROQ?Nov 2, 2020
I want to add a view with the Structure builder (S.view.component) where I list similar documents based on the title. What...Sep 23, 2020
Is there a structure builder example where the format of each preview for the document list is modified?Feb 3, 2021
I have an array of references to a country schema type but it always just returns NULL values for meJan 30, 2021
Hi, I need help with a query for getting the url of an image asset. Here is what I've been trying, but I only get the _ref...Dec 1, 2020
Sanity UI looks brilliant :smiley: Is something like the current date picker possible at the moment? I’m not sure if anicon...Dec 21, 2020
Hey everyone. I have been coding and may have potentially accidentally deleted something. Does anyone know how to resolve...Dec 26, 2020
Hello everyone and happy new year :raised_hands::skin-tone-2:, I have a problem with outputting Portable Text :disappointed:...Jan 1, 2021

Related contributions

Clean Next.js + Sanity app
- Template

Official(made by Sanity team)

A clean example of Next.js with embedded Sanity ready for recomposition.

Cody Olsen
Go to Clean Next.js + Sanity app

Blog with Built-in Content Editing
- Template

Official(made by Sanity team)

A Sanity-powered blog with built-in content editing and instant previews.

Go to Blog with Built-in Content Editing