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

panos77772 years ago

14

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

• 

  jessrynkar2 years ago

  Hi

  @821648361819996160

  - 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!

• 

  panos77772 years 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`,
          },
        },

• 

  jessrynkar2 years ago

  @821648361819996160

  it goes outside of

  admin

  like the screenshot
• 

  panos77772 years ago

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

  jessrynkar2 years ago

  @821648361819996160

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

  panos77772 years 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!

• 

  jessrynkar2 years ago

  @821648361819996160

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

• 

  panos77772 years ago

  @854377910689202256

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

  defaultValue

  in any way?
• 

  jarrod_not_jared

  2 years ago

  I would use a custom Cell component for this

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

  panos77772 years ago

  Thanks

  @281120856527077378

  . 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

  
  
  @854377910689202256

  ,

  @281120856527077378

  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

  2 years ago

  @821648361819996160

  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.

• 

  panos77772 years 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

  2 years ago

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

  
  
  

  Good work!

• 

  panos77772 years ago

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