Fieldtypes

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

$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.