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 🙂
Neueste Kommentare