Customising the appearance of the Relationship field

default discord avatar
RapidOwllast year
2 1

Hello! I've just started using Payload today and it's ridiculous how quickly I can get a lot of things done.

I was hoping someone might be able to give me some advice on where to start with customising the Relationship field. I'd like to be able to better distinguish between the data items that get added to the field e.g. changing the colour or adding icons.

I had a look through the Payload repository, but wasn't sure which file represented the root Relationship component.

I'm probably biting off way more than I can chew as a beginner...

  • Selected Answer
    discord user avatar
    DanRibbens
    last year

    I love that you are tenatiously getting after it, even if it is more than you can "chew as a beginner"!
    You can start by copying the existing Default relationship component code into a new file in your project and make your own edits there. Then you will import and set that as your admin.components.Field for the relationship field(s) of your collection config.

    Here is a link to the field component that Payload uses as a default: https://github.com/payloadcms/payload/blob/master/src/admin/components/forms/field-types/Relationship/index.tsx

    Good luck and do ask followup questions if you get stuck!

    8 replies
  • default discord avatar
    RapidOwllast year

    Thanks so much!

  • default discord avatar
    RapidOwllast year

    Hello again! I'm now back off holiday and trying this out.

    When I paste the code from your link into its own file in my project, I get a lot of red on the imports. I'm not sure how to find all the stuff it says is missing. payload in node_modules contains a dist folder and these imports will all be relative to the src folder. Replacing some of the import paths with payload seems to make the red go away, but I'm just guessing.

    If this is a silly thing to ask, apologies, I'll go investigate further.

    image

  • discord user avatar
    DanRibbens
    last year

    Yes, you'll need to change all the import paths to Payload since those relative paths are not going to work in your package.

    For the things that aren't exported from payload properly, you can still import them from /payload/dist/.

    Hope this helps!

  • default discord avatar
    RapidOwllast year

    Thanks! I'll give it a try!

  • default discord avatar
    RapidOwllast year

    I got all the imports sorted so it compiles just fine. Now I'm debugging a CSSStyleDeclaration error I'm seeing when the page is rendered.

  • default discord avatar
    RapidOwllast year

    That was me being silly with the default prop values. So now my custom relationship field renders! Now I need to figure out how to make it use the relationTo field.

  • default discord avatar
    Oliver-Turp5 months ago

    Did you ever get this working, @RapidOwl ? I'm currently about to start on the same venture myself :D

  • default discord avatar
    RapidOwl5 months ago

    @Oliver-Turp Nope, we decided that Block collections were a better fit for our use case. They were also way less effort.

Star on GitHub

Star

Chat on Discord

Discord

online

Can't find what you're looking for?

Get help straight from the Payload team with an Enterprise License.