FusionCMS is currently in an open beta state and under heavy active development.

Fieldtypes

FusionCMS has a vast collection of Fieldtypes to suit anyone's needs, however there's always room for improvement. If you are looking to add your very own custom Fieldtype this article will guide you through the process.

Every Fieldtype is controlled by a single class, which can be thought of as the brains of the Fieldtype. It holds validation rules, additional settings, pre and post-persistence strategies and much more. Since every Fieldtypes can be vastly different from one another FusionCMS makes it very flexible to control every aspect.

All Fieldtypes extend the abstract Fusion\Fieldtypes\Fieldtype class, and therefore is a good file to familiarize yourself with for maximizing your customization needs.

Properties

Name Description Data Type
$name Display name string
$icon Displayed icon string
$description -- string
$cast Native casting type full list string
$column See $column section array
$settings See $settings section array
$validation See $validation section array

$column

When a set of Fieldtypes is added to a Matrix, Fusion\Observers\FieldObserver will generate the necessary storage requirements in your database to hold field data. The $column property is used to define this requested storage requirements.

The $column property expects an array data type, with at least type set. Here's a snippet from Fusion\Fieldtypes\RangeFieldtype where we're requesting a float with precision settings.

public $column = [
    'type'     => 'float',
    'settings' => [24, 12],
];

For a full list of available options reference the migrations page on Laravel's website.

$settings

It's possible to add additional settings for how your Fieldtype will behavior. For example, the Fusion\Fieldtypes\ColorPickerFieldtype has settings to allow for transparent colors and which color will be the default. Furthermore, you can configure your settings to have validation rules.

Here is a snippet of Fusion\Fieldtypes\DateTimeFieldtype, where we wish to make sure input is properly handled.

/**
 * Field settings.
 *
 * @var array
 */
public $settings = [
    'placeholder' => '',
    'format'      => 'Y-m-d',
    'time'        => false,
];

/**
 * Get the validation rules that apply to the request.
 *
 * @var array
 */
public $rules = [
    'settings.format' => 'required',
];

/**
 * Get custom attributes for validator errors.
 *
 * @var array
 */
public $attributes = [
    'settings.format' => 'display format',
];

/**
 * Get the error messages for the defined validation rules.
 *
 * @var array
 */
public $messages = [
  'settings.format.required' => 'Please enter a valid :attribute.',
];

Here's the output received when the rules are broken.

$validation

All Fieldtypes by default will have the following $validation configuration, which will use the sometimes validation rule.

public $validation = [
    'value' => '',
];
Multiple Rules

Fusion\Fieldtypes\AddressFieldtype is a composite fieldtype including multiple inputs, which allows for adding validation rules per field:

public $validation = [
    'address1' => '',
    'address2' => '',
    'city'     => '',
    'state'    => '',
    'zip'      => '',
    'country'  => '',
];
No Validation

Some Fieldtypes require no validation like Fusion\Fieldtypes\DividerFieldtype. The following is the same as saying, "no validation, please".

public $valiation = [];

Templates

In order to use your Fieldtype within the Control Panel, two Vue Components are necessary.

Field

The Field component controls the look & feel of the form element in use through the Control Panel.

// Path: resources/js/components/Fieldtypes/MyField/Field.vue

<template>
    // Add code here...
</template>

<script>
    import FieldMixin from '@/mixins/fieldtypes/field'

    export default {
        name: 'my-field-fieldtype',

        mixins: [FieldMixin],
    }
</script>

Settings

The Settings component allows for additional field settings.

// Path: resources/js/components/Fieldtypes/Input/Settings.vue

<template>
    // Add code here...
</template>

<script>
    import fieldtype from '@/mixins/fieldtype'

    export default {
        name: 'my-field-fieldtype-settings',

        mixins: [fieldtype]
    }
</script>

Events

A couple methods exist to be overridden for tapping into your Fieldtype's lifecycle.

Name Description
onSaved(Field $field) After Field has been created or updated.
onBeforeDelete(Field $field) Before Field is deleted.
Have questions?

We're always happy to help with code or other questions you might have. Contact support or chat live with us on Discord.

Last edited on Friday, March 26, 2021 (6 months ago)