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.

JSON custom field example

default discord avatar
dianogalast year
6

Is there an example somewhere for creating a custom field using the JSON type?



I'm trying to build a general LinkPicker field that will let a user choose from internal collections (pages or products) or supply an external link. I'd like to store the actual uriPath instead of needing a query depth > 0. For internal links I also want to grab the title from the related thing.



In a perfect world I'd also like to specify a schema for the generated type but that isn't strictly necessary.



Schema will likely be something like this


{
  uri: String;
  title?: String;
  external: boolean;
}
  • default discord avatar
    notchrlast year
    @113397743300386816

    Good morning! This may be better for a relationship field, but it's likely possible with the JSON field. Have you seen the example on the Documentation page?

    https://payloadcms.com/docs/fields/json
  • default discord avatar
    dianogalast year

    Yep. In this case I'm building a custom field on top of the JSON field. My attempt at link handling before this was using a

    group

    of fields;

    relationship

    for internal links,

    text

    for external links, and an optional

    text

    for the link title (assuming it was relevant).



    My goal now is to build out a custom input that will deal with all of it and attach the necessary information directly to the document to avoid query depth

  • default discord avatar
    notchrlast year

    Ah I see, out of curiosity, what was the depth issue?

  • default discord avatar
    dianogalast year

    This is a borderline premature optimization. It feels silly to need to bring in everything about a page every time I want to show a link (which just needs a path and maybe the title). In the case of navigation menus with many links that is a lot of unnecessary data being sent around.

  • default discord avatar
    notchrlast year

    Ah I see that makes sense if there are a lot of links



    You could also add an endpoint to the links collection for getting back just a specific link in a relation

  • default discord avatar
    dianogalast year

    I haven't played with custom endpoints yet. I suspect that will be useful here as well. We don't have a specific collection for links right now and the need for external link support makes things that little bit extra complicated.



    As I'm thinking through the actual UI for this, I may be able to do what I need using built in fields with hooks and maybe conditional logic

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.