Simplify your stack and build anything. Or everything.
Build tomorrow’s web with a modern solution you truly own.
Code-based nature means you can build on top of it to power anything.
It’s time to take back your content infrastructure.

Customizing Display Field for Relationship Fields

default discord avatar
awfaarax6 months ago
1

Hi everyone!



I’m currently working with Payload CMS and noticed that in the relationship fields, the id is displayed by default (screenshot below). Instead of the id, I’d like to display the name field or another specific field from the related collection.



Is there a way to customize which field gets shown in relationship fields? Any tips or guidance would be really appreciated!



Thanks in advance for your help!

  • default discord avatar
    natjb_745916 months ago

    Hi, double-check the useAsTitle value in your collection config for Products. This is what will be used when referencing items in an array. e.g. useAsTitle: 'title' (or whatever field makes sense for you).



    Note, if you want to get fancy, you can create a hidden field in Products that uses other fields to create a better title (i.e. useAsTitle: 'displayTitle').



    e.g. I created a displayTitle field with admin: {hidden: true} and a field hook to update that field so that it prefixes my doc title with another value - you could use it to make something like Brand: Product if it suits your cause (let me know if the field hook code is relevant - happy to share).



    {
      name: 'displayTitle',
      type: 'text',
      admin: {
        hidden: true, // Hide this field from the admin UI
      },
      hooks: {
        beforeChange: [
          displayTitleHook,
        ],
      },
    },


    Hope this helps.

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get dedicated engineering support directly from the Payload team.