How do I prevent <No field-name> from appearing on a Collection if that field doesn't have value?

Panos

2 months ago

18

{
        name: 'subtitle',
        label: 'Subtitle',
        type: 'text',
        maxLength: 256,
        admin: {
          width: '33%',
          description: ({ value }) =>
            `${
              typeof value === 'string' ? 256 - value.length : '256'
            } characters left`,
        },
      },

• 

  jesschow

  Payload Team

  2 months ago

  Hi @Panos - you could give this field a default value of an empty string (you can't pass a truly empty string, it will need to have a space in there)

  
  defaultValue: ' '
  
  

  Only drawback to this approach is now your data will show

  ' '

  instead of undefined when there is no value, however if this isn't a big deal for you then this will do the trick!

• 

  Panos

  2 months ago

  Hi! Thank you for your reply. I tried that but nothing changed.

  
  
  

  Does the

  defaultValue

  need to be set inside the

  admin

  or not? (I tried both but nothing happened)

  
  

  {
          name: 'subtitle',
          label: 'Subtitle',
          type: 'text',
          maxLength: 256,
          admin: {
            width: '33%',
            description: ({ value }) =>
              `${
                typeof value === 'string' ? 256 - value.length : '256'
              } characters left`,
          },
        },

• 

  jesschow

  Payload Team

  2 months ago

  @Panos it goes outside of

  admin

  like the screenshot

  
• 

  Panos

  2 months ago

  Yeah, I've been trying that again and again. Nothing changes. 😦

  

  
• 

  jesschow

  Payload Team

  2 months ago

  @Panos how odd it works for me, I wonder what we are missing here...

  
• 

  Panos

  2 months ago

  Well, the good thing is that I've isolated what I need to focus on.

  
  
  

  I'll try to find what's different about my project and post the solution here if I'll manage to find it.

  
  
  

  Thank you so much!

• 

  jesschow

  Payload Team

  2 months ago

  @Panos of course! good luck and let us know if you need anything else

• 

  Panos

  2 months ago

  @jesschow is there any chance that the Collection this field is a part of affect its

  defaultValue

  in any way?

  
• 

  Jarrod

  Payload Team

  2 months ago

  I would use a custom Cell component for this

  https://payloadcms.com/docs/admin/components#cell-component
• 

  Panos

  2 months ago

  Thanks @Jarrod . I'll look into it.

  
  
  

  I tried creating a function that changes the

  defaultValue

  in the admin part of the field, but I'm getting type-checked

  
  

  
  

  @jesschow , @Jarrod so here's what happened:

  
  

  - The

  defaultValue: " "

  works, but I had to create a new Event to realize that it does work.

  
  

  - The Events that were already created and had an empty Subtitle were still showing the

  <No Subtitle>

  ; that's where I got confused.

  
  

  - To remove the

  <No Subtitle>

  from the already-created ones I need to edit them and just add a space in the empty Subtitle text field.

  
  
  

  Thank you so much. Sorry I didn't catch this sooner.

  
  

  
  

  (apparently seniors say that I should go with the custom component solution btw)

  

  
• 

  dribbens

  Payload Team

  2 months ago

  @Panos Warning on doing this—you will have a UX issue in the list if the first column is

  ' '

  as there will not be a link to click to open when there is no value.

  
  

  
  

  That was one reason we opted to display <No value> in the cell.

• 

  Panos

  2 months ago

  Thanks for the warning. But only the Title is clickable, not the Subtitle).

  
  
  

  I solved it by doing this:

  
  

  CustomSubtitle.tsx
  import React from 'react'
  import { Props } from 'payload/components/views/Cell'
  
  const CustomSubtitle: React.FC<Props> = (props) => {
    const { cellData } = props
    if (!cellData) return null
  
    return (
      <>
        <span>{cellData.toString() ? cellData.toString() : ''}</span>
      </>
    )
  }
  
  export default CustomSubtitle

  
  

  File that contains this:

  
  

  {
          name: 'subtitle',
          label: 'Subtitle',
          type: 'text',
          maxLength: 256,
          admin: {
            width: '33%',
            description: ({ value }) =>
              `${
                typeof value === 'string' ? 256 - value.length : '256'
              } characters left`,
              components: {
                Cell: CustomSubtitle
              },
          },
        },

• 

  dribbens

  Payload Team

  2 months ago

  Nice, glad you figured it out. I wasn't saying, you shouldn't just to be cautious of that one detail.

  
  

  
  

  Good work!

• 

  Panos

  2 months ago

  Thank you so much. And I definitely appreciate the warning!