The little 1x1 of Storyblok custom fields

Storyblok offers many ways to expand your existing system. One of these is custom fields. These are used when content is required that Storyblok's visual editor does not offer. Application examples include, for example, the connection of external content via an API (Google maps geocoding api) or fields with dependencies between individual entries.

In this article, I summarise my own experiences and explain how you too can benefit from custom field development in storyblok.

Prerequisites

As a basic requirement, you must have access to the Storyblok partner portal. If you do not have a corresponding licence, you can register as a Storyblok partner under this link.

In addition, the custom field must be realisable with Vue, version 2.5.2.

How it works

Do you fulfil the basic requirements? Then nothing stands in the way of a custom field. A typical high-level workflow always follows the same steps:

1. Creation of a new custom field via the storyblok partner portal

2. Development of the custom field

3. Assignment of the custom field to the desired space

I will go into each point in detail in the following paragraphs.

1. creation

To create a custome field, log in to the Partner Portal and select "Field Types" from the menu.

You can then create a new custom field in the top right-hand corner.

Attention! Think carefully about the name of the field - it should describe the field well and be unique.

2. development

When developing a custom field, you basically have two options:

1. you use the integrated Storyblok field editor

2. you develop the custom field locally

For me, there is a clear favourite here: local development. Why? You'll find out in the next paragraph.

Storyblok field editor

The Storyblok field editor is sometimes very limited in its functions. Syntax highlighting is very poor, there is no option to split multiple files and styling is very difficult to implement. The functions are somewhat meagre by today's standards in Javascript development. Even with the simplest components, the editor quickly reaches its limits.

Fortunately, Storyblok also offers a convenient way of integrating your familiar development environment.

Local development

For local development, you can simply get started with a great starter project. Install the project, start the server and you're ready to go. You can find more information on this here and the relevant documentation here.

To see the locally developed content on Storyblok, simply click on the "local development mode" button in the field type preview. This will render the custom field from the local server.

After the development work, the custome must be built (npm run build) and the contents of the dist/export.js file must be copied into the field editor.

3. assignment

In order to be able to use the field, it must be assigned to a Storyblok space after the development work. Only then can the field be used within a space. This is done in the field editor under Settings & Details.

Attention! Make sure that you have saved and published the field.

Your own custom field is ready.

Conclusion

When I started to look into this topic, I wish I had known earlier how limited the editor actually is. That would have saved me a lot of headaches. It's better to choose the simpler method of developing locally.

Another painful experience was that Storyblok uses ui-kit internally, but does not fully support all classes and functionalities. In other words, don't rely on it just because it exists in ui-kit.

All in all, custom fields are a great way to extend Storyblok's existing headless CMS. As long as you can implement it with Javascript, it shouldn't be a problem. The developer experience is good and convenient and with a little practice you will become a pro at custom fields.