Overview of field types for the CPT-configuration array #

The following field-types and configurations exists for your Custom Post Types. They are placed inside of the columns array of the configuration.

You can find a full example on this page

$eventForm = [
    'ctrl' => [
        'title'   => 'Example form',
        'position' => 'left,top',
    ],
    'columns' => [
        // ... here they go! 
        // Replace "fieldname" with the key of the field
    ],
];

type 'input' #

A simple input-field

'fieldname' => [
    'label' => 'Strasse',
    'config' => [
        'type' => 'input',
        'placeholder' => 'Some text'
    ],
],

type 'text' #

Shows a multiline textarea

'fieldname' => [
    'label' => 'Show the thing?',
    'config' => [
        'type' => 'text',
        'rows' => 2
    ],
],

type 'text' with RTE (Rich Text Editor) #

Shows a textarea that can be edited with the WYSIWYG-editor

'fieldname' => [
    'label' => 'Show the thing?',
    'config' => [
        'type' => 'text',
        'rows' => 2,
        'enableRichtext' => true,
    ],
],

type 'link' #

A field that allows selecting a link to a page

'fieldname' => [
    'label' => 'Link',
    'config' => [
        'type' => 'link',
        'placeholder' => 'Add a link'
    ],
],

type 'date' #

Show a date-selector (will be stored in the format YYYY-MM-DD)

'fieldname' => [
    'label' => 'Which date?',
    'config' => [
        'type' => 'date',
    ],
],

type 'check' #

Shows a checkbox

'fieldname' => [
    'label' => 'Show the thing?',
    'config' => [
        'type' => 'check',
    ],
],

type 'select' #

Shows a select-dropdown

'fieldname' => [
    'label' => 'Gender',
    'config' => [
        'type' => 'select',
        'items' => [
            ['Mr.', 'm'],
            ['Mrs.', 'f'],
            ['Divers', 'd'],
        ]
    ],
],

type 'select' with multiple values #

Shows a select field and allows selecting multiple options

'fieldname' => [
    'label' => 'Interests',
    'config' => [
        'type' => 'select',
        'multiple' => true,
        'items' => [
            ['Cake', 'cake'],
            ['Donuts', 'donuts'],
            ['Chips', 'chips'],
        ]
    ],
],

type 'media' #

Shows a field to add media-files (images, videos) to the post.

'fieldname' => [
    'label' => 'Additional images',
    'config' => [
        'type' => 'media',
        'minitems' => 0,
        'maxitems' => 99,
    ],
],

type 'category' #

Show list of available categories (taxonomies) with checkboxes. Note that 'taxonomies' => ['category'], must be set in the CPT-configuration Array

'fieldname' => [
    'label' => 'Which category?',
    'config' => [
        'type' => 'category',
    ],
],

type 'relation' #

Shows a field to add other post-types as relations to the current post.

'fieldname' => [
    'label' => 'Related books',
    'config' => [
        'type' => 'relation',
        'allowed_post_types' => ['example_book'],
        'minitems' => 0,
        'maxitems' => 99,
    ],
],

type 'passthrough' #

A hidden field, usually needed in combination with a custom field type that combines multiple fields in a single field.

'fieldname' => [
    'label' => 'My Field',
    'config' => [
        'type' => 'passthrough',
    ],
],

type 'custom' #

Shows a custom form field with own rendering.

'fieldname' => [
    'label' => 'Show the thing?',
    'config' => [
        'type' => 'example_gowild',
    ],
],

Again, Convention over Configuration here:

In order to render the custom form field, all you need to do is create a template file in yourplugin/Resources/Partials/Form/Fields/Example_gowild.html. Note that the template file-name is the exact name of the type in the configuration but the first letter is capitalized.

The content of the template file will be parsed using the Fluid Template Engine and could look like this:

<div class="nn-mb-3">
    <label class="nn-form-label">{column.label}</label>
    <input type="text" name="{formNamePrefix}[{name}]" class="nn-form-control" value="{gp.{name}}" placeholder="{column.config.placeholder}" />
</div>

For good examples, have a look at the templates shipped with nnhelpers located at: nnhelpers/Resources/Partials/Form/Fields/