Skip to content
Get help on Slack

Discussing methods to easily remove nested objects in Sanity schemas

9 replies
Last updated: May 22, 2024
Hey all! 🙂Is there any way to allow easy deleting an object field inside another object? I have a "IntroText" component that has a "CTA" Button component which is optional. When I want to remove an existing button I have to 1. delete the title and 2. remove the page reference. Is there a way to show a "Remove" button on the "CTA" button that just removes everything belonging to the object?
May 22, 2024, 7:55 AM
Schema:

export const introTextComponentType = defineType({
  name: 'introTextComponent',
  title: 'Intro Text',
  type: 'object',
  preview: {
    select: {
      title: 'title',
    },
  },
  icon: TextIcon,
  fields: [
    defineField({
      name: 'title',
      type: 'headline',
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'subTitle',
      type: 'string',
    }),
    defineField({
      name: 'cta',
      title: 'CTA',
      type: 'button',

      options: {
        collapsible: true,
      },
    }),
  ],
})
export const buttonType = defineType({
  name: 'button',
  type: 'object',
  fields: [
    defineField({
      name: 'buttonText',
      title: 'Button Text',
      type: 'string',
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'link',
      type: 'link',
      validation: (Rule) => Rule.required(),
    }),
    defineField({
      name: 'variation',
      type: 'string',
      initialValue: 'contained',
      options: {
        list: [
          {title: 'Contained Style', value: 'contained'},
          {title: 'Text Style', value: 'text'},
        ],
      },
      validation: (Rule) => Rule.required(),
    }),
  ],
})
May 22, 2024, 7:56 AM
so basically I just want to show an "Delete" or "Remove" button next to the "CTA" title. Only workaround I can think of is an array with a max length of 1
May 22, 2024, 9:19 AM
You could also add a boolean field to enable/disable the button even if there is text or a reference already there.
When the boolean field is false, you can set to hide the text reference field. When the boolean field is true, you can set some validation rules to make sure the user to filling out the fields.
May 22, 2024, 9:37 AM
thanks for your quick answer
user R
!So I guess there is no (easy) way of just allowing the user to remove the existing object? i.e. an 
optional
parameter or similar?
May 22, 2024, 9:41 AM
I want to avoid adding logic on the parent component
May 22, 2024, 9:47 AM
Well you wont have to add the logic to the parent component but to the button component itself and then when you fetch the data for the CTA, you only fetch when the button is enabled.
If you do want to go down the route of adding a reset or remove button, that would have to be a custom component which in this case shouldn't be too difficult to create
May 22, 2024, 9:57 AM
I guess I will go with an array for now, as I also have references to pages in the button, which will not be removed when I set the boolean to 
false
. or do you see any issues with the array approach?
May 22, 2024, 11:23 AM
(except that it does not look so nice) 🙂
May 22, 2024, 11:23 AM
I dont see an issue going with the array approach, I also use it for my reusable modules where I have set it to only allow a max of 1 module. Sounds like the best option for your case since you want to remove the text and reference in one go which having it in a array will allow you to do without having to go into creating a custom component
May 22, 2024, 11:26 AM

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?