[3367 Aufrufe]

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: