Conditional field not working

default discord avatar
ggphntms_62927
2 weeks 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
    tyteen4a03
    2 weeks ago
  • discord user avatar
    seanzubrickas
    Payload Team
    2 weeks ago

    Hey @ggphntms_62927 are you still having issues with this?

  • discord user avatar
    tylandavis
    Payload Team
    2 weeks ago

    @ggphntms_62927 Like @tyteen4a03 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_62927
    2 weeks 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
    Payload Team
    2 weeks 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_62927
    2 weeks 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
    Payload Team
    2 weeks ago

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

Open the post
Continue the discussion in Discord
Like what we're doing?
Star us on GitHub!

Star

Connect with the Payload Community on Discord

Discord

online

Can't find what you're looking for?

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