Color 

New in version 13.0

New in version 13.0

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

The according database field is generated automatically.

Color palettes can be defined via page TSconfig. This way, for example, colors defined in a corporate design can be selected with one click.

Table of contents:

Example: Define a simple color picker in TCA 

The color of a conference:

The color of a conference

The color of a conference

EXT:my_extension/Configuration/TCA/Overrides/150-tx_myextension_conference-color.php 
<?php

use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;

defined('TYPO3') or die();

ExtensionManagementUtility::addTCAcolumns('tx_myextension_conference', [
  'color' => [
    'label' => 'my_extension.db:conference.color',
    'config' => [
      'type' => 'color',
      'valuePicker' => [
        'items' => [
          ['label' => 'my_extension.db:conference.color.orange', 'value' => '#ff8700'],
          ['label' => 'my_extension.db:conference.color.teal', 'value' => '#2f99a4'],
          ['label' => 'my_extension.db:conference.color.night', 'value' => '#292545'],
        ],
      ],
      'behaviour' => [
        'allowLanguageSynchronization' => true,
      ],
      'searchable' => false,
    ],
  ],
]);
ExtensionManagementUtility::addToAllTCAtypes(
  'tx_myextension_conference',
  'color',
  '',
  'before:--div--;core.form.tabs:categories',
);
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.
opacity
 bool
placeholder
 string, hexadecimal color representation Display
readOnly
 boolean Display
required
 boolean Display / Proc.
searchable
 boolean Display
size
 integer Display
valuePicker
 array Display
behaviour
allowLanguageSynchronization
Type
boolean
Default
false
TCA 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/150-tx_myextension_conference-color.php 
<?php

use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;

defined('TYPO3') or die();

ExtensionManagementUtility::addTCAcolumns('tx_myextension_conference', [
  'color' => [
    'label' => 'my_extension.db:conference.color',
    'config' => [
      'type' => 'color',
      'valuePicker' => [
        'items' => [
          ['label' => 'my_extension.db:conference.color.orange', 'value' => '#ff8700'],
          ['label' => 'my_extension.db:conference.color.teal', 'value' => '#2f99a4'],
          ['label' => 'my_extension.db:conference.color.night', 'value' => '#292545'],
        ],
      ],
      'behaviour' => [
        'allowLanguageSynchronization' => true,
      ],
      'searchable' => false,
    ],
  ],
]);
ExtensionManagementUtility::addToAllTCAtypes(
  'tx_myextension_conference',
  'color',
  '',
  'before:--div--;core.form.tabs:categories',
);
Copied!
default
Type
string
TCA 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

For details see fieldControl.

fieldInformation

For details see fieldInformation.

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

For details see defaultLanguageDifferences.

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

For details see localizationStateSelector.

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

For details see otherLanguageContent.

mode
Type
string (keywords)
TCA 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
Type
boolean
Default
false
TCA path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['nullable']
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:my_extension/Configuration/TCA/Overrides/151-tx_myextension_conference-overlay_color.php 
<?php

use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;

defined('TYPO3') or die();

ExtensionManagementUtility::addTCAcolumns('tx_myextension_conference', [
  'overlay_color' => [
    'label' => 'my_extension.db:conference.overlay_color',
    'config' => [
      'type' => 'color',
      'opacity' => true,
      'nullable' => true,
    ],
  ],
]);
ExtensionManagementUtility::addToAllTCAtypes(
  'tx_myextension_conference',
  'overlay_color',
  '',
  'after:color',
);
Copied!
opacity
Type
bool
Default
false
TCA path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['opacity']
Added
13.3

If enabled, editors can select not only a color but also adjust its opacity (how transparent the color should be) in a color element.

Colors with an opacity are saved with the the RRGGBBAA color notation.

Example: An overlay color with opacity
The overlay color of a conference, half transparent

The overlay color of a conference, half transparent

EXT:my_extension/Configuration/TCA/Overrides/151-tx_myextension_conference-overlay_color.php 
<?php

use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;

defined('TYPO3') or die();

ExtensionManagementUtility::addTCAcolumns('tx_myextension_conference', [
  'overlay_color' => [
    'label' => 'my_extension.db:conference.overlay_color',
    'config' => [
      'type' => 'color',
      'opacity' => true,
      'nullable' => true,
    ],
  ],
]);
ExtensionManagementUtility::addToAllTCAtypes(
  'tx_myextension_conference',
  'overlay_color',
  '',
  'after:color',
);
Copied!
placeholder
Type
string, hexadecimal color representation
TCA path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['placeholder']
Scope
Display

Placeholder, containing a hexadecimal color representation.

'placeholder' => '#ff8700',
'nullable' => true,
'mode' => 'useOrOverridePlaceholder',
Copied!
readOnly
Type
boolean
TCA 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
Type
boolean
Default
false
TCA path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['required']
Scope
Display / Proc.

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

searchable
Type
boolean
Default
true
TCA path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['searchable']
Scope
Display

New in version 14.0

TYPO3 now automatically includes all fields of suitable types in backend search operations in the Content > Records module.

This option can be used to explicitly exclude fields from being searchable, instead of having to list them in the now removed option $GLOBALS['TCA'][$table]['ctrl']['searchFields'].

By default, all fields of type color are considered searchable. To exclude a field from being searchable, set the following in the field's TCA configuration:

EXT:my_extension/Configuration/TCA/Overrides/150-tx_myextension_conference-color.php 
<?php

use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;

defined('TYPO3') or die();

ExtensionManagementUtility::addTCAcolumns('tx_myextension_conference', [
  'color' => [
    'label' => 'my_extension.db:conference.color',
    'config' => [
      'type' => 'color',
      'valuePicker' => [
        'items' => [
          ['label' => 'my_extension.db:conference.color.orange', 'value' => '#ff8700'],
          ['label' => 'my_extension.db:conference.color.teal', 'value' => '#2f99a4'],
          ['label' => 'my_extension.db:conference.color.night', 'value' => '#292545'],
        ],
      ],
      'behaviour' => [
        'allowLanguageSynchronization' => true,
      ],
      'searchable' => false,
    ],
  ],
]);
ExtensionManagementUtility::addToAllTCAtypes(
  'tx_myextension_conference',
  'color',
  '',
  'before:--div--;core.form.tabs:categories',
);
Copied!
size
Type
integer
TCA path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['size']
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
Type
array
TCA path
$GLOBALS['TCA'][$table]['columns'][$field]['config']['valuePicker']
Scope
Display

Renders a select box with static values next to the input field. When an item is selected, the value replaces the current input value.

Changed in version 14.0 Breaking: #107677 - Drop prepend and append modes from TCA value picker

It is now recommended to define associative array keys for items using label and value. Existing numeric arrays are automatically migrated during TCA processing.

The Value Picker always behaves like a replace operation. Previous mode variants like append and prepend were removed.

items (array)
A list of selectable items. Each item should be an associative array: ['label' => 'Shown label', 'value' => '#RRGGBB'] . The label can be plain text or a label reference. The value must be a hex color with exactly 7 characters, including the leading hash (for example, '#FF8700' ).
Example
EXT:my_extension/Configuration/TCA/Overrides/150-tx_myextension_conference-color.php 
<?php

use TYPO3\CMS\Core\Utility\ExtensionManagementUtility;

defined('TYPO3') or die();

ExtensionManagementUtility::addTCAcolumns('tx_myextension_conference', [
  'color' => [
    'label' => 'my_extension.db:conference.color',
    'config' => [
      'type' => 'color',
      'valuePicker' => [
        'items' => [
          ['label' => 'my_extension.db:conference.color.orange', 'value' => '#ff8700'],
          ['label' => 'my_extension.db:conference.color.teal', 'value' => '#2f99a4'],
          ['label' => 'my_extension.db:conference.color.night', 'value' => '#292545'],
        ],
      ],
      'behaviour' => [
        'allowLanguageSynchronization' => true,
      ],
      'searchable' => false,
    ],
  ],
]);
ExtensionManagementUtility::addToAllTCAtypes(
  'tx_myextension_conference',
  'color',
  '',
  'before:--div--;core.form.tabs:categories',
);
Copied!