JSON custom field example

default discord avatar
dianoga
last month
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
    notchr
    last month

    @dianoga 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
    dianoga
    last month

    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
    notchr
    last month

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

  • default discord avatar
    dianoga
    last month

    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
    notchr
    last month

    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
    dianoga
    last month

    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

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.