Keystone: How do you create custom field types?

[GasimGasimzada]

I am going to give an example as it is easier to explain what I want to achieve. I want to create a field and call it "LocalizedContent;" then, allow passing other fields into this content:

content: {
  type: LocalizedContent,
  field: Content
},
title: {
  type: LocalizedContent,
  field: Text
}

When, I do this, I want the following to happen:

The view adds tabs and render the view of the provided field in it. So, I can have "English" and "German" tabs. Both tabs will have "text" field.

When saving, the exact same happens in the database (I do not need to support Postgres):

{
  "title": {
    "en": Representation of Text field
  },
  "content: {
    "en": Representation of Content field
   }
}

As far as I know, I can set up database representation and use a controller to serialize input data that matches the database (e.g convert title_en input name to title: { en: ... }). However, I am not sure how I can use the another field's view in my own view file.

Is this possible to do in Keystone?

[MadeByMike]

Hi @GasimGasimzada the short answer is yes, you can do that with Keystone.

Basically this is would require a custom Field type. You can have a look at packages/fields-markdown/src/index.js for an example.

The important parts to notice are the implementation the view and the controller. You can see that it uses the Text fields implementation and controller but implements a custom view.

You would need to do the same although you might also need to have a custom implementation to save data in the format you want, as well as a custom controller to change how graphql filtering, lable functions and other internals work.

Implementing custom fields is rather advanced and not well documented yet. The API might change and for now you will have to rely heavily on existing example if you want to implement this.

You might also have some difficulty understanding how the field view is packaged. The rest of the code is node but the view is a React component that is packaged either when the AdminUI is built or on-the-fly by the dev server. It took me some time to understand this properly.

If you're up for this challenge I'd love to get feedback from your experience so we can improve the custom fields API.

[GasimGasimzada]

@MadeByMike Thank you for the detailed explanation and information. I will play with the API as I have an idea that I want to build. Then, I will write here about my experience and hopefully will be able to provide proper feedback :)

[molomby]

@GasimGasimzada, I reckon you'd be interested in the existing discussion around multi-lingual support: #322.