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?
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!
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`,
},
},
@Panos it goes outside of
admin
like the screenshot
Yeah, I've been trying that again and again. Nothing changes. 😦
@Panos how odd it works for me, I wonder what we are missing here...
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!
@Panos of course! good luck and let us know if you need anything else
@jesschow is there any chance that the Collection this field is a part of affect its
defaultValue
in any way?
I would use a custom Cell component for this
https://payloadcms.com/docs/admin/components#cell-componentThanks @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)
@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.
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
},
},
},
Nice, glad you figured it out. I wasn't saying, you shouldn't just to be cautious of that one detail.
Good work!
Thank you so much. And I definitely appreciate the warning!
Star
Discord
online
Get help straight from the Payload team with an Enterprise License.