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

default discord avatar
Panos
8 months ago
18

I have this Subtitle text field:


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

When this field doesn't have a value, I see it rendered as

<No Subtitle>

. How do I make it so that it doesn't show anything (or an empty string) when this field doesn't have a value?

  • discord user avatar
    jesschow
    Payload Team
    8 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!

  • default discord avatar
    Panos
    8 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`,
            },
          },
  • discord user avatar
    jesschow
    Payload Team
    8 months ago

    @Panos it goes outside of

    admin

    like the screenshot

    Screen_Shot_2023-03-24_at_10.35.58_AM.png
  • default discord avatar
    Panos
    8 months ago

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

    Screen_Shot_2023-03-24_at_11.40.08.jpg
    Screen_Shot_2023-03-24_at_11.40.40.jpg
  • discord user avatar
    jesschow
    Payload Team
    8 months ago

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

    Screen_Shot_2023-03-24_at_10.48.24_AM.png
  • default discord avatar
    Panos
    8 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!

  • discord user avatar
    jesschow
    Payload Team
    8 months ago

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

  • default discord avatar
    Panos
    8 months ago

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

    defaultValue

    in any way?

    Screen_Shot_2023-03-24_at_12.41.24.jpg
  • default discord avatar
    Jarrod
    8 months ago

    I would use a custom Cell component for this

    https://payloadcms.com/docs/admin/components#cell-component
  • default discord avatar
    Panos
    8 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)
    Screen_Shot_2023-03-24_at_12.54.53.jpg
    Screen_Shot_2023-03-24_at_12.55.01.jpg
  • discord user avatar
    dribbens
    Payload Team
    8 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.

  • default discord avatar
    Panos
    8 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
                },
            },
          },
  • discord user avatar
    dribbens
    Payload Team
    8 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!

  • default discord avatar
    Panos
    8 months ago

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

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.