2.3 Ein eigenes Icon in der Liste im Backend anzeigen
In diesem Kapitel wollen wir unsere Liste mit einem Icon verschönern. Dies kann z. B. sinnvoll sein, um des Status eines Datensatzes anzuzeigen (z. B. ob ein Benutzer gespeert ist).
(Bitte auch in diesem Artikel wieder den Vendor-Namespace (oder entsprechenden Ordner)
durch Euren eignen ersetzen und nicht Ctocb
verwenden! Danke!)
Konfiguration
Wir definieren unseren Menüpunkt für Backend in der Datei /src/Ctocb/Example/Resources/contao/config/config.php
.
<?php declare(strict_types=1);
$GLOBALS['BE_MOD']['module_test_group'] = [
'module_test_table' => [
'tables' => ['tl_testtable']
]
];
Hier teilen wir Contao wieder mit, dass wir gerne einen Menüpunkt (module_test_table
) in der Gruppe
(module_test_group
) hätten und dieser die Tabelle tl_testtable
für die Speicherung seiner Daten verwenden soll.
Data Container Array
Im DCA der Tabelle tl_testtable
definieren wir wieder unsere Felder.
(Der Übersichthalber wurd das DCA hier gekürzt. Das komplette Listing ist im Beitrag "Einen Daten im Backend verwalten" zu finden!)
<?php
declare(strict_types=1);
/**
* @package Example
* @since 13.01.2021 - 14:55
* @author Patrick Froch <info@easySolutionsIT.de>
* @link http://easySolutionsIT.de
* @copyright e@sy Solutions IT 2021
* @license EULA
*/
/**
* Set Tablename
*/
$table = 'tl_testtable';
/**
* Table tl_testtable
*/
$GLOBALS['TL_DCA'][$table] = [
// Config
'config' => [
// ...
],
// List
'list' => [
// ...
],
// Palettes
'palettes' => [
'default' => '{title_legend},title,content;'
],
// Fields
'fields' => [
'id' => [
'sql' => 'int(10) unsigned NOT NULL auto_increment'
],
'tstamp' => [
'sql' => "int(10) unsigned NOT NULL default '0'"
],
'title' => [
'exclude' => true,
'inputType' => 'text',
'eval' => ['mandatory'=>true, 'maxlength'=>255, 'tl_class' => 'w50'],
'sql' => "varchar(255) NOT NULL default ''"
],
'content' => [
'exclude' => true,
'inputType' => 'textarea',
'eval' => ['mandatory'=>true, 'tl_class' => 'clr long', 'rte'=>'tinyMCE'],
'sql' => "text NULL"
]
]
];
Callback definieren
Auch wenn wir hier bereits Callbacks verwenden, werden wir das Thema in einem späteren Kapitel vertiefen.
Wir verwenden hier den label_callback
, um unseren Datensätzen ein Icon voranzustellen. Der Callback wird in der
Datei /src/Ctocb/Example/Resources/config/services.yml
definiert.
# Services
services:
_defaults:
autowire: true
autoconfigure: true
# Callbacks
Ctocb\Example\Classes\Contao\Callbacks\TlTesttable:
public: true
tags:
- { name: contao.callback, target: list.label.label, table: tl_testtable, method: myCallback, priority: 1024 }
Ich setzte hier voraus, dass das Manager Plugin so konfiguriert ist und die Servicedefinition geladen wird. Dies wurde im Kapitel über die "Grundlagen" im Beitrag "Manager Plugin" beschrieben.
Verarbeitung
Für die Verarbeitung ist unsere Klasse Ctocb\Example\Classes\Contao\Callbacks\TlTesttable
verantwortlich, die unter
/src/Ctocb/Example/Classes/Contao/Callbacks/TlTesttable.php
gespeichert wird.
<?php declare(strict_types=1);
namespace Ctocb\Example\Classes\Contao\Callbacks;
use Contao\DataContainer;
class TlTesttable
{
public function myCallback(array $record, string $label, DataContainer $dc, array $columns): array
{
$img = '<img src="https://img.shields.io/badge/ID-' . $record['id'];
$img .= ' -blue" title="id ' . $record['id'] . '" alt="id ' . $record['id'] . '"> ';
return [$img . $label];
}
}
In diesem Beispiel stellen wir ein Icon mit der Id vor jedes Label. Wir beziehen dies von shields.io. Normalerweise würde man schon aus Datenschutzgründen, die Icon möglichst lokal speichern, aber für diesen kleinen Test ist es so okay.
Fertig
Und hier wieder das Resultat: