Color

New in version 12.0

The TCA type color should be used to render a JavaScript-based color picker.

Table of contents

Example: Define a simple color picker in TCA

A simple color picker:

$aColorField' = [
    'label' => 'Color field',
    'config' => [
        'type' => 'color',
    ]
];
Copied!

Properties of the TCA column type color

Name Type Scope
behaviour
allowLanguageSynchronization
 boolean Proc.
default
 string Display / Proc.
fieldControl
fieldInformation
fieldWizard
defaultLanguageDifferences
 array
localizationStateSelector
 array
otherLanguageContent
 array
mode
 string (keywords) Display
nullable
 boolean Proc
placeholder
 string, hexadecimal color representation Display
readOnly
 boolean Display
required
 boolean Display / Proc.
size
 integer Display
valuePicker
 array Display

behaviour

behaviour

allowLanguageSynchronization

allowLanguageSynchronization
Type
boolean
Default
false
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['behaviour']['allowLanguageSynchronization']
Scope
Proc.

Allows an editor to select in a localized record whether the value is copied over from default or source language record, or if the field has an own value in the localization. If set to true and if the table supports localization and if a localized record is edited, this setting enables FieldWizard LocalizationStateSelector: Two or three radio buttons shown below the field input. The state of this is stored in a json encoded array in the database table called l10n_state. It tells the DataHandler which fields of the localization records should be kept in sync if the underlying default or source record changes.

EXT:my_extension/Configuration/TCA/Overrides/someTable.php 
<?php

$colorField = [
    'config' => [
        'type' => 'color',
        'behaviour' => [
            'allowLanguageSynchronization' => true,
        ],
    ],
];
Copied!

default

default
Type
string
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['default']
Scope
Display / Proc.

Default value set if a new record is created. If empty, no color gets selected.

fieldControl

fieldControl

For details see fieldControl.

fieldInformation

fieldInformation

For details see fieldInformation.

fieldWizard

fieldWizard

defaultLanguageDifferences

defaultLanguageDifferences
Type
array
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['fieldWizard']['defaultLanguageDifferences']

For details see defaultLanguageDifferences.

localizationStateSelector

localizationStateSelector
Type
array
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['fieldWizard']['localizationStateSelector']

For details see localizationStateSelector.

otherLanguageContent

otherLanguageContent
Type
array
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['fieldWizard']['otherLanguageContent']

For details see otherLanguageContent.

mode

mode
Type
string (keywords)
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['mode']
Scope
Display

Possible keywords: useOrOverridePlaceholder

This property is related to the placeholder property. When defined, a checkbox will appear above the field. If that box is checked, the field can be used to enter whatever the user wants as usual. If the box is not checked, the field becomes read-only and the value saved to the database will be NULL.

nullable

nullable
Type
boolean
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']
Default
false
Scope
Proc

If set to true, a checkbox will appear, which by default deactivates the field. In the deactivated state the field is saved as NULL in the database. By activating the checkbox it is possible to set a value. If nothing is entered into the field, then an empty string will be saved and not a NULL.

The database field must allow the NULL value.

Example:

EXT:some_extension/Configuration/TCA/tx_sometable.php 
<?php

$temporaryColumns['aColorField'] = [
    'title' => 'A nullable field',
    'config' => [
        'type' => 'color',
        'nullable' => true,
    ],
];
Copied!

placeholder

placeholder
Type
string, hexadecimal color representation
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['placeholder']
Scope
Display

Placeholder, containing a hexadecimal color representation.

<?php

$temporaryColumns['aColorField'] = [
    'title' => 'My color field',
    'config' => [
        'type' => 'color',
        'placeholder' => '#FF8700',
        'mode' => 'useOrOverridePlaceholder',
    ],
];
Copied!

readOnly

readOnly
Type
boolean
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['readOnly']
Scope
Display

Renders the field in a way that the user can see the value but cannot edit it.

required

required
Type
boolean
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']
Scope
Display / Proc.
Default
false

If set to true a non-empty value is required in the field. Otherwise the form cannot be saved.

size

size
Type
integer
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']
Scope
Display

Abstract value for the width of the <input> field. To set the field to the full width of the form area, use the value 50. Minimum is 10. Default is 30.

valuePicker

valuePicker
Type
array
Path
$GLOBALS['TCA'][$table]['columns'][$field]['config']
Scope
Display

Renders a select box with static values next to the input field. When a value is selected in the box, the value is transferred to the field. Keys:

items (array)
An array with selectable items. Each item is an array with the first value being the label in the select drop-down (LLL reference possible) the second being the hex-value transferred to the input field. The value should have exactly 7 characters, as this is the maximum for a hex-value.
Example
EXT:my_extension/Configuration/TCA/Overrides/some_table.php 
<?php

$temporaryColumns['aColorField'] = [
    'label' => 'Color field',
    'config' => [
        'type' => 'color',
        'required' => true,
        'size' => 20,
        'valuePicker' => [
            'items' => [
                ['typo3 orange', '#FF8700'],
            ],
        ],
    ],
];
Copied!

Migration: from renderType colorpicker to TCA type color

A complete migration from renderType=colorpicker to type=color looks like the following:

 'a_color_field' => [
     'label' => 'Color field',
     'config' => [
-        'type' => 'input',
-        'renderType' => 'colorpicker',
+        'type' => 'color',
         'required' => true,
         'size' => 20,
-        'max' => 1024,
-        'eval' => 'trim',
         'valuePicker' => [
             'items' => [
                 ['typo3 orange', '#FF8700'],
             ],
         ],
     ],
 ],
Copied!

An automatic TCA migration is performed on the fly, migrating all occurrences to the new TCA type and triggering a PHP E_USER_DEPRECATED error where code adoption has to take place.