How to Create a Custom Input Component for an Array of Objects
21 replies
Last updated: May 2, 2021
H
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
F
In order to leverage most of the default behavior, look into the
https://github.com/sanity-io/sanity/blob/a768eaf2611b4124e0ed6525bc82b0aa7e0ce00b/examples/example-studio/components/CustomObjectInput.js
https://github.com/sanity-io/sanity/blob/a768eaf2611b4124e0ed6525bc82b0aa7e0ce00b/[…]les/test-studio/src/components/CustomInputWithDialogOverlay.tsx
https://github.com/sanity-io/sanity/blob/a768eaf2611b4124e0ed6525bc82b0aa7e0ce00b/[…]/inputs/PortableText/Objects/renderers/PopoverObjectEditing.tsx
Also, the
https://github.com/sanity-io/sanity/pull/2377#issuecomment-830131784
In any case, it appears to be largely uncharted territory for now.
FormBuilderInputcomponent - unfortunately this is not currently documented.
https://github.com/sanity-io/sanity/blob/a768eaf2611b4124e0ed6525bc82b0aa7e0ce00b/examples/example-studio/components/CustomObjectInput.js
https://github.com/sanity-io/sanity/blob/a768eaf2611b4124e0ed6525bc82b0aa7e0ce00b/[…]les/test-studio/src/components/CustomInputWithDialogOverlay.tsx
https://github.com/sanity-io/sanity/blob/a768eaf2611b4124e0ed6525bc82b0aa7e0ce00b/[…]/inputs/PortableText/Objects/renderers/PopoverObjectEditing.tsx
Also, the
ArrayInputhappens to be exported as a part you can use.
https://github.com/sanity-io/sanity/pull/2377#issuecomment-830131784
In any case, it appears to be largely uncharted territory for now.
May 2, 2021, 11:48 AM
H
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
F
Cool, would be interesting to see what you come up with!
May 2, 2021, 11:54 AM
F
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
H
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
H
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
F
If I gather correctly, you currently have an array of 400 objects within a document?
May 2, 2021, 12:05 PM
H
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
H
and each event is an object
May 2, 2021, 12:06 PM
H
there are so many events that it’s almost impossible to scroll in the studio
May 2, 2021, 12:07 PM
F
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
F
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
H
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
H
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
F
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
F
May 2, 2021, 12:15 PM
H
that’s an idea, can you filter and search trough the pane views?
May 2, 2021, 12:15 PM
F
I'm afraid not, only sorting is supported I think. But it would solve your slow scrolling.
May 2, 2021, 12:16 PM
H
I’ll follow this ticket, sounds like exactly what I’m dealing with
May 2, 2021, 12:16 PM
H
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
F
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
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.