Add a New Field

Adding a New Field

A field consists of multiple parts:

• PHP
• JavaScript
• Twig

PHP: Add a Field

• Namespace: Bolt\Entity\Field
• Directory: src/Entity/Field/

The easiest method is to copy an existing field that is the most similar to the one you are making.

PHP: Add Field to @ORM\DiscriminatorMap

• Class: Bolt\Entity\Field
• File: src/Entity/Field.php

In the annotation, simply add your mapping. Make sure the keys are sorted alphabetically.

Twig: Add template

• Directory: templates/_partials/fields/

{% extends '@bolt/_partials/fields/_base.html.twig' %}

{% block field %}
    ...
{% endblock field %}

Again, look at existing templates for inspiration. This is what will be turned into HTML. You can pass data as props to a Vue component.

Vue: Add JavaScript and Vue

• Directory: assets/js/app/editor/Components/Editor/
• File: assets/js/app/editor/index.js
• File: assets/js/app/editor/Components/Editor/index.js

If you make use of Vue components. Make sure to check out the Components/Editor folder. Create a new directory and a new .vue file inside that directory. This is the Vue component and consists of a part HTML, part JavaScript and part CSS.

In assets/js/app/editor/Components/Editor/index.js, export the component. Then, in assets/js/app/editor/index.js, import the component and add it to the mapping below.

Don't forget to compile by running the appropriate NPM scripts:

npm run build

or

npm run serve

Use the field in contenttypes.yaml

• File: config/bolt/contenttypes.yaml

Define the field in one of your contenttypes to see it in action!