Skip to content
Get help on Slack

Modifying the "Add item" button in Sanity's array field using the parts system

2 replies
Last updated: Dec 14, 2021
Is there anyway to rename the “Add item” button used by the array field?
Dec 13, 2021, 11:29 PM
OK, thanks for letting me know
user M
It would cool if it was available to override in the options.
Dec 14, 2021, 11:45 AM
Haven’t really done this since native conditional fields were released, but you used to be able to overwrite the default fields via the parts system.
You basically add sth. like

{
    "implements": "part:@sanity/form-builder/input/array/functions",
    "path": "./utils/conditionalFields/"
}
to 
sanity.json
. (Modify “path” accordingly to point to your custom implementation).
Here’s a rough sample from a while back, where I modified the button to read “Choose” instead of “Add” when there was a certain validation method on the native array field:

// Simple implementation of <https://github.com/sanity-io/sanity/blob/21af6baffe88d57db32d0a05e048ef7d3d671523/packages/%40sanity/form-builder/src/inputs/ArrayInput/ArrayFunctions.tsx>

import React from "react";
import DropDownButton from "part:@sanity/components/buttons/dropdown";
import Button from "part:@sanity/components/buttons/default";
import ButtonGrid from "part:@sanity/components/buttons/button-grid";

export default class ArrayFunctions extends React.Component {
  handleDropDownAction = (menuItem) => {
    this.handleInsertItem(menuItem.type);
  };
  handleAddBtnClick = () => {
    this.handleInsertItem(this.props.type.of[0]);
  };
  handleInsertItem = (type) => {
    const { onCreateValue, onAppendItem } = this.props;
    const item = onCreateValue(type);
    onAppendItem(item);
  };
  renderSelectType(isList) {
    const items = this.props.type.of.map((memberDef) => ({
      title: memberDef.title || memberDef.type.name,
      type: memberDef,
    }));
    return (
      <DropDownButton
        inverted
        items={items}
        onAction={this.handleDropDownAction}
      >
        {isList ? "Add" : "Choose"}
      </DropDownButton>
    );
  }
  render() {
    const { type, readOnly, children, value } = this.props;

    const maxLength =
      type.validation[0]._rules.find((rule) => rule.flag === "max") || false;

    const isList = maxLength && maxLength.constraint === 1 ? false : true;

    if (maxLength && value && value.length >= maxLength.constraint) {
      return null;
    }

    if (readOnly) {
      return null;
    }

    if (type?.options?.generated) {
      return null;
    }

    return (
      <div>
        <ButtonGrid align="start">
          {type.of.length === 1 ? (
            <Button inverted onClick={this.handleAddBtnClick}>
              Add
            </Button>
          ) : (
            this.renderSelectType(isList)
          )}

          {children || null}
        </ButtonGrid>
      </div>
    );
  }
}
Haven’t tested this with a newer studio installation, so I can’t vouch that this will work with the new Sanity UI. But maybe it will put you on the right track
✌️
Dec 14, 2021, 1:47 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?