Backend Module mit JavaScript und Styles

In meinem Beispiel will ich in einem eigenen Modul einen Datepicker verwenden und das Feld leeren können. Weiterhin soll ein kleines CSS im Backend-Modul eingebunden werden.

Die Registrierung der Module hat sich in TYPO3 12 geändert: Backend module configuration. Was ich dort in dieser Anleitung nicht gefunden habe: wie man in einem Modul z.B. einen Datepicker verwenden kann oder eigene CSS-Stylesheets einbindet.

Konfigurationsdatei JavaScriptModules.php im Order Configuration der Extension erstellen. Darin werden die Abhängigkeiten definiert und der Pfad zu den verfügbaren JS-Dateien. Als key in den Import gibt man an, wie das Modul dann im Template geladen werden kann.

Configuration/JavaScriptModules.php

return [
    'dependencies' => [
        'backend',
        'core',
    ],
    'imports' => [
        '@myextension/module/' => 'EXT:my_extension/Resources/Public/JavaScript/',
    ],
];

In der JS-Datei steht folgendes (das habe ich aus einem Core-Modul kopiert). Statt MyModule sollte der Name des eigenen Moduls eingesetzt werden.

Resources/Public/JavaScript/backend-module.js

import DateTimePicker from "@typo3/backend/date-time-picker.js";
import "@typo3/backend/input/clearable.js";
class MyModule {
    constructor() {
        this.clearableElements = null, this.dateTimePickerElements = null, DocumentService.ready().then((() => {
            this.clearableElements = document.querySelectorAll(".t3js-clearable"), this.dateTimePickerElements = document.querySelectorAll(".t3js-datetimepicker"), this.initializeClearableElements(), this.initializeDateTimePickerElements()
        }))
    }
 
    initializeClearableElements() {
        this.clearableElements.forEach((e => e.clearable()))
    }
 
    initializeDateTimePickerElements() {
        this.dateTimePickerElements.forEach((e => DateTimePicker.initialize(e)))
    }
}
 
export default new MyModule;

Im Template des Moduls kommt nun folgendes in die content-section, im Kommentar steht der Namespace des ViewHelpers, das muss natürlich ins html-Tag. Dort wird nun der Pfad eingesetzt, den man oben in JavaScriptModules.php festgelegt hat. Unter includeCssFiles kann man auch CSS-Dateien angeben, die im Modul eingebunden werden.

<!-- xmlns:be="http://typo3.org/ns/TYPO3/CMS/Backend/ViewHelpers" -->
 
<f:be.pageRenderer
    includeJavaScriptModules="{
        0: '@myextension/module/backend-module.js'
    }"
 
    includeCssFiles="{
        0: '{f:uri.resource(path: \'Css/backend.css\')}'
    }"
/>

Sobald in einem Feld die entsprechenden Klassen gesetzt werden, wird dort ein Datepicker generiert:

<div class="input-group">
    <f:form.textfield id="filter_datefrom"
                      property="datefrom"
                      class="form-control t3js-datetimepicker t3js-clearable"
                      data="{date-type: 'date'}"
    />
    <label class="mb-0 btn btn-default" for="filter_datefrom">
        <core:icon identifier="actions-calendar" />
    </label>
</div>

Ich weiß nicht, ob es der einzige Weg ist, oder ob es andere/bessere Möglichkeiten gibt. Ich schaue mir immer an, wie das die Core-Module machen und übernehme es für meine Module. Ich freue mich über Feedback 🙂