Conditional field not working

default discord avatar
ggphntms_629277 months ago
7

I feel like I'm missing something really simple. When I check the

largeHero

checkbox, the

copy

field doesn't appear.



In the code below, I've made the conditional code a bit more concise than what's shown [here](

https://payloadcms.com/docs/fields/overview#conditional-logic

) - but I've also attempted every other conceivable way of doing it, including exactly what appears on the page, so I'm pretty sure it's not a formatting issue.



Here's my block:



import { Block } from "payload/types";

export const HeroBlock: Block = {
  slug: "Hero",
  fields: [
    {
      name: "largeHero",
      type: "checkbox",
      defaultValue: false,
    },
    {
      name: "imageUrl",
      type: "text",
      required: true,
    },
    {
      name: "header",
      type: "text",
    },
    {
      name: "copy",
      type: "richText",
      admin: {
        condition: (data) => {
          return data.largeHero;
        },
      },
    },
  ],
};


  • default discord avatar
    tyteen4a037 months ago
  • discord user avatar
    seanzubrickas
    7 months ago

    Hey @gg-phntms are you still having issues with this?

  • discord user avatar
    tylandavis
    7 months ago

    @gg-phntms Like @t4 suggested, you'll want to use

    siblingData

    here.

    data

    is going to give you the whole document, so how you would access fields within the block is going to change depending on where you use the block.

    siblingData

    will be relative to the block itself.

  • default discord avatar
    ggphntms_629277 months ago

    apologies, haven't had the time to test this yet - will get to it this afternoon 🙂



    @tylandavis sadly simply replacing

    data

    with

    siblingData

    hasn't done anything (tried with multiple permutations on what's shown in the docs). Is there more that I need to change?

  • discord user avatar
    tylandavis
    7 months ago

    make sure you are passing

    siblingData

    in as the

    second

    argument to the function:



    import { Block } from 'payload/types';
    
    export const HeroBlock: Block = {
      slug: 'Hero',
      fields: [
        {
          name: 'largeHero',
          type: 'checkbox',
          defaultValue: false,
        },
        {
          name: 'imageUrl',
          type: 'text',
          required: true,
        },
        {
          name: 'header',
          type: 'text',
        },
        {
          name: 'copy',
          type: 'richText',
          admin: {
            condition: (data, siblingData) => {
              return siblingData.largeHero;
            },
          },
        },
      ],
    };
  • default discord avatar
    ggphntms_629277 months ago

    It worked!!! Thank you so much. 😄



    Might see if I can update thedocs at some point - that was pretty unintuitive.

  • discord user avatar
    seanzubrickas
    7 months ago

    Glad to hear it @gg-phntms let us know if you needa anything else. Marking this solved.

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.