Make image field conditional

[GhostOrder28]

I have this list:

const Product = list({
  name: text(),
  image: cloudinaryImage({...})
  special: checkbox(),
  specialImage: cloudinaryImage({...})
})

I would like to render 'specialImage' field only if 'special' checkbox is selected, I was reading the entry for conditional fields in the documentation but I can't figure out how to adapt the example to my case.

I was trying this way:

export const componentBlocks = {
  specialImage: component({
    preview: (props) => {
      return (
        <div>{props.fields.specialImage.element}</div>
      );
    },
    label: 'Special Image',
    schema: {
      specialImage: cloudinaryImage({...}),
    },
  }),
};

But of course it doesn't work this way.

Could you point me to the right direction?

[kennedybaird]

Conditional fields only applies for the document field.

I don't believe there's existing functionality for what you're wanting to do. The way I've had to do it is using resolveInput hook on the list item:

        resolveInput: async ({
          context, operation, item, inputData, resolvedData,
        }) => {
          if (operation === 'update' || operation === 'create') {
            const special = inputData.special === undefined ? item?.special : inputData.special;
            const specialImage = inputData.specialImage === undefined ? item?.specialImage : inputData.specialImage;

            if (specialImage) {
              if (!special) throw Error('special needs to be enabled for specialImage');
            }
          return resolvedData;
        },

This is a basic example, and it should show a detailed error in the UI.

Note that you need to check both incoming data (inputData), and existing data (item) - otherwise, it will consider it to not be enabled when updating, even if special is true.

To be a little more robust I would suggest to empty specialImage if special comes through false, after previously being true.

Hope this helps (also, I just roughly wrote that, it may not work out of the box).