Das Kleine 1x1 von Storyblok custom fields

Storyblok bietet viele Möglichkeiten, sein bestehendes System zu erweitern. Eine davon sind custom fields. Diese kommen zum Einsatz, wenn Inhalte benötigt werden, die Storyblok’s visual Editor nicht anbietet. Zu den Anwendungsbeispielen gehören zum Beispiel die Anbindung externe Inhalte über eine API (Google maps Geocoding api) oder Felder mit Abhängigkeiten zwischen einzelnen Einträgen.

In diesem Beitrag fasse ich meine eigenen Erfahrungen zusammen und erkläre, wie auch Sie von custom field development in storyblok profitieren können.

Voraussetzungen

Als Grundvoraussetzung müssen Sie Zugang zum Partner Portal in Storyblok haben. Sollten Sie keine entsprechende Lizenz haben, können Sie sich als Partner von Storyblok unter diesem Link registrieren.

Zusätzlich muss das custom field mit Vue, Version 2.5.2 umsetzbar sein.

Funktionsweise

Erfüllen Sie die Grundvoraussetzungen? Dann steht einem custom field nichts mehr im Weg. Ein typischer high-level Workflow folgt dann immer den gleichen Schritten:

1. Erstellung eines neuen custom fields über das storyblok partner portal

2. Entwicklung des custom fields

3. Zuweisung des custom fields zum gewünschten Space

In den nachfolgenden Absätzen werde ich auf jeden Punkt genau eingehen.

1. Erstellung

Um ein custome field zu erstellen, loggen Sie sich im Partner Portal ein und wählen Sie im Menü "Field Types" aus.

Anschließend können Sie rechts oben ein neues custom field erstellen.

Achtung! Überlegen Sie sich den Namen des fields gut - er sollte das field gut beschreiben und einzigartig sein.

2. Entwicklung

Bei der Entwicklung eines custom fields hat man im grundsätzlich zwei Möglichkeiten:

1. man benutzt den integrierten Storyblok field editor

2. man entwicklet das custom field lokal

Für mich gibt es hier einen ganz klaren Favoriten: die lokale Entwicklung. Warum? Im nächsten Absatz erfahren Sie es.

Storyblok field editor

Des Storyblok field editor ist in seinen Funktionen teilweise sehr limitiert. Syntax highlighting ist nur sehr dürftig, man hat keine Möglichkeit mehrere Files aufzuteilen und das Styling ist nur sehr mühsam umsetzbar. Für heutige Standards im Javascript Development sind die Funktionen etwas mager. Selbst bei den einfachsten Komponenten stößt der Editor schnell an seine Grenzen.

Glücklicherweise bietet Storyblok aber auch hier komfortable Möglichkeit, seine gewohnte Entwicklungsumgebung einzubinden.

Lokales Development

Für die lokale Entwicklung kann man mit einem tollen Starterprojekt einfach loslegen. Projekt installieren, server starten und schon kann's losgehen. Mehr Informationen dazu finden Sie hier, die passende Dokumentation gibt es hier.

Um die lokal entwickelten Inhalte auf Storyblok zu sehen, reicht ein Klick auf den Button "local development mode" im field type Preview. So wird das custom field vom lokalen server aus gerendert.

Nach der Entwicklungsarbeit muss das custome fiel gebuildet werden (npm run build) und die Inhalte des dist/export.js files in den field editor kopiert werden.

3. Zuweisung

Damit man das field dann auch benutzen kann, muss man es nach der Entwicklungsarbeit einem Storyblok space zuweisen. Nur so kann das field innerhalb eines Spaces verwendet werden. Dies passiert im field editor unter dem Punkt Settings & Details.

Achtung! Stellen Sie sicher, dass Sie das field gespeichert und veröffentlicht haben.

Fertig ist Ihr eigenes custom field.

Fazit

Als ich begonnen habe, mich mit dem Thema auseinander zu setzen, hätte ich gerne früher gewusst, wie limitiert der Editor eigentlich ist. Das hätte mir einiges an Kopfschmerzen erspart. Wählen Sie also lieber gleich die einfachere Methode, indem Sie lokal entwickeln.

Eine weitere schmerzliche Erfahrung war, dass Storyblok zwar intern ui-kit verwendet, allerdings nicht alle Klassen und Funktionalitäten voll unterstützt. Das heißt, verlassen Sie sich nicht darauf, nur weil es in ui-kit existiert.

Alles in allem sind custom fields aber eine gute Möglichkeit, das bestehende Headless CMS von Storyblok zu erweitern. Solange man es mit Javascript umsetzen kann, sollte es kein Problem darstellen. Die Developer Experience ist gut und komfortabel und mit ein bisschen Übung werden Sie zum Profi beim Thema custom fields.