Dynamically Hide/Unhide Relationship Option in JS

notchr11 months ago

4

• 

  lassidhillon11 months ago

  Ummm I think in my case i want to control its display according to select

  
  
  

  if i selected option

  relationship

  - I want it to be displayed

  
  

  and if default is selected - I want it to be hidden

  
  
  

  import { Block } from "payload/types"
  
  export const Link: Block = {
    slug: 'link',
    labels: {
        singular: 'Link',
        plural: 'Links',
    },
    fields: [
        {
            name: 'text',
            label: 'Text',
            type: 'text',
        },
        {
            name: 'url',
            label: 'URL',
            type: 'text',
        },
        {
            name: 'page',
            type: 'relationship',
            relationTo: ['pages'],
            admin: {
              condition: (data, siblingData) => {
                  if (data.typeSelect === 'relationship') {
                      console.log(data.typeSelect === 'relationship');
                      return true
                  } else {
                      console.log(data.typeSelect === 'relationship')
                      return false
                  }
                }
            },
        },
        {
            name: 'typeSelect',
            label: 'Type',
            type: 'select',
            options: [
                {
                    label: 'Default',
                    value: 'default',
                },
                {
                    label: 'Relationship',
                    value: 'relationship',
                },
            ],
        },
    ]
  }

• 

  notchr11 months ago

  Does that not work?

• 

  deadeyescumbag11 months ago

  You could try this:

  
  https://payloadcms.com/community-help/discord/condition-inside-array-type-field
• 

  lassidhillon11 months ago

  yes it didn't work

  
  
  

  if i do

  data.typeSelect === 'relationship'

  it not shows then, to show you i've added the

  !
  
  @1049775120559898725
  
  @744383324629237872

  I don't know how i could incroporate that

  
  
  

  but it still not works

  
  

  import { Block } from "payload/types"
  
  export const Link: Block = {
    slug: 'link',
    labels: {
        singular: 'Link',
        plural: 'Links',
    },
    fields: [
        {
            name: 'text',
            label: 'Text',
            type: 'text',
        },
        {
            name: 'url',
            label: 'URL',
            type: 'text',
        },
        {
            name: 'page',
            type: 'relationship',
            relationTo: ['pages'],
            admin: {
              condition: (data) => {
                  let display = false
                  if (data.typeSelect === 'relationship') {
                      display = true
                  }
                  return display
              }
            },
        },
        {
            name: 'typeSelect',
            label: 'Type',
            type: 'select',
            options: [
                {
                    label: 'Default',
                    value: 'default',
                },
                {
                    label: 'Relationship',
                    value: 'relationship',
                }
            ],
        },
    ]
  }

  
  
  @744383324629237872

  the condition is working correctlhy the only problem is that it not display the field on changing the value of typeSelect

  
  
  

  {
            name: 'page',
            type: 'relationship',
            relationTo: ['pages'],
            admin: {
              condition: (data) => {
              console.log(data);
              //   return data.typeSelect === 'relationship' ? true : false
              if (data.typeSelect === 'relationship') {
                  return true;
              } else {
                  return false;
              }
              }
            },
        },
        {
            name: 'typeSelect',
            label: 'Type',
            type: 'select',
            defaultValue: 'default',
            options: [
                {
                    label: 'Default',
                    value: 'default',
                },
                {
                    label: 'Relationship',
                    value: 'relationship',
                }
            ],
        },

  
  
  @1049775120559898725
  
  @1049775120559898725

  @744383324629237872

  
  
  

  this worked out!

  
  
  

  import { Block } from "payload/types"
  
  export const Link: Block = {
    slug: 'link',
    labels: {
        singular: 'Link',
        plural: 'Links',
    },
    fields: [
        {
            name: 'text',
            label: 'Text',
            type: 'text',
        },
        {
            name: 'url',
            label: 'URL',
            type: 'text',
        },
        {
            name: 'page',
            type: 'relationship',
            relationTo: ['pages'],
            admin: {
              condition: (data, siblingData) => {
                  return siblingData?.typeSelect === 'relationship' ? true : false
              }
            },
        },
        {
            name: 'typeSelect',
            label: 'Type',
            type: 'select',
            defaultValue: 'default',
            options: [
                {
                    label: 'Default',
                    value: 'default',
                },
                {
                    label: 'Relationship',
                    value: 'relationship',
                }
            ],
        },
    ]
  }