Das Release 4.4.0 wurde im Mai 2024 veröffentlicht. Dieses Release umfasst:
Date-Time-Picker entfernt- Verbesserung der Barrierefreiheit
Vorbereitungen für die Mängelmelder-App
Funktionserweiterungen
Designoptimierungen
Date-Time-Picker entfernt
Die Komponenten DatePickerField und DateTimePickerField wurden entfernt und müssen in allen Konfigurationen durch DateTimeInput ersetzen werden und das Format über den inputType (date, time) angegeben. Wird kein inputType bestimmt, werden Datum und Uhrzeit angezeigt.
Beispiele:
reporting.json{ "component": "GridRowCols", "childrenConfig": [ { "component": "DateTimeInput", "colProps": { "breakpoints": { "sm": 12, "md": 3 } }, "props": { "id": "received$TimestampFrom", "labelText": "labels.createdBy", "inputType": "date", "doSubmitOnChange": true, "inputProps": { "className": "w-100" } } }, ] }
setDeadline.json{ "component": "DateTimeInput", "props": { "id": "deadline", "labelText": "ticketView.labels.setDeadline", "helpText": "", "defaultTime": "08:00", "defaultDate": "now", "errorMessages": { "required": "errorMessages.deadlineRequired" }, "validation": [ "required", { "dateTimePicker": { "onlyFuture": true } } ] } }
setReminder.json{ "component": "DateTimeInput", "props": { "id": "reminder", "labelText": "ticketView.labels.setReminder", "helpText": "", "defaultTime": "08:00", "defaultDate": "now", "errorMessages": { "required": "errorMessages.reminderRequired" }, "validation": [ "required", { "dateTimePicker": { "onlyFuture": true } } ] } }
Verbesserung der Barrierefreiheit
Zur Verbesserung der Barrierefreiheit wurden eindeutigere Bezeichnungen, Platzhalter und mehr Aria-Label hinzugefügt. Um diese Änderungen in bestehenden Projekten mit Überschreibung der Konfiguration zu übernehmen, müssen folgende Konfigurationen angepasst werden.
Auf der Ticketliste wird nun im Standard besser formuliert, nach welchen Kriterien gefiltert wird. Dafür wurde derplaceholderder Felder “Bearbeitung von” und “Zugewiesene Gruppe" in derreporting.jsonundsearchForm.jsongeändert:{ "component": "AutocompleteField", "colProps": { "breakpoints": { "sm": 12, "md": 6, "lg": 3 } }, "props": { "id": "assignedUser", "labelText": "ticketList.labels.assignedUser", "doSubmitOnChange": true, "controllerPath": "users", "scope": "ticketListGroupFilter", "labelTemplate": "{firstname} {lastname} ({email})", "inputProps": { "placeholder": "ticketList.labels.assignedUserPlaceholder" } } }, { "component": "AutocompleteField", "colProps": { "breakpoints": { "sm": 12, "md": 6, "lg": 3 } }, "props": { "id": "assignedGroup", "labelText": "ticketList.labels.assignedGroup", "doSubmitOnChange": true, "controllerPath": "groups", "scope": "ticketListGroupFilter", "labelTemplate": "{name}", "inputProps": { "placeholder": "ticketList.labels.assignedGroupPlaceholder" } } },Sind auf der auf Detailansicht eines Tickets im Abschnitt “Neue Nachricht verfassen” keine Textbausteine vorhanden, kann in
newMessageForm.jsonunter dem key"noOptionsPlaceholder"ein Platzhaltertext eingefügt werden:{ "component": "GridRow", "childrenConfig": [ { "component": "TextModule", "props": { "id": "textModule", "labelText": "ticketView.labels.textmodule", "noOptionsPlaceholder": "ticketView.labels.noTextmodule", "labelClass": "px-1", "seperateCols": true, "editorId": "messageToUser", "noErrorClassName":"mb-2" } } ] },Im
searchForm.jsonmuss der KomponenteMultiSelectFieldein Label für den Lösch-Button übergeben werden:{ "component": "MultiSelectField", "props": { "breakpoints": { "sm": 12, "xl": 6 }, "id": "tag", "inputProps": { "btnLabel": "buttons.delete" }, "labelText": "ticketList.labels.tag", "helpText": "ticketList.helpTexts.tag", "custom": false, "options": "tags", "doSubmitOnChange": true } }Komponenten, die kein sichtbares Label haben, bekommen für eine barrierefreie Bedienung ein Aria-Label. Dieses muss in
massoperationForm.jsonundtextmoduleFilter.jsondurch die AngabeariaLabelClassName": "sr-only"gesetzt werden:massoperationForm.json:{ "component": "TicketRowSelectField", "colProps": { "breakpoints": { "sm": 6, "md": 4, "lg": 2 } }, "props": { "id": "selection", "dataId": "selection", "dataItem": "oid", "controllerPath": "users", "ariaLabelClassName": "sr-only", "labelText": "ticketList.labels.selectEntrys", "doSubmitOnChange": true, "options": [ { "value": "all", "label": "ticketList.labels.all" }, { "value": "no", "label": "ticketList.labels.no" } ] } }, { "component": "SelectSearchField", "colProps": { "breakpoints": { "sm": 6, "md": 4, "lg": 2 } }, "props": { "id": "status_massop", "options": "UMATTR:sd_status", "className": "w-100", "labelText": "ticketList.labels.assignStatus", "ariaLabelClassName": "sr-only", "inputProps": { "placeholder": "ticketList.labels.assignStatus" } } }, { "component": "AutocompleteField", "colProps": { "breakpoints": { "sm": 6, "md": 4, "lg": 2 } }, "props": { "id": "user", "dataId": "assignedUser", "dataItem": "oid", "controllerPath": "users", "scope": "assignment", "labelText": "ticketAdd.labels.user", "ariaLabelClassName": "sr-only", "labelTemplate": "{firstname} {lastname} ({email})", "inputProps": { "placeholder": "ticketList.labels.assignUser" } } }, { "component": "AutocompleteField", "colProps": { "breakpoints": { "sm": 6, "md": 4, "lg": 2 } }, "props": { "id": "group", "dataId": "assignedGroup", "dataItem": "oid", "controllerPath": "groups", "scope": "assignment", "labelText": "ticketAdd.labels.group", "ariaLabelClassName": "sr-only", "labelTemplate": "{name}", "inputProps": { "placeholder": "ticketList.labels.assignGroup" } } }
textmoduleFilter.json:{ "filterForm": [ { "component": "TextModuleFilterWrapper", "childrenConfig": [ { "component": "AutocompleteField", "props": { "id": "category", "dataItem": "cat", "doSubmitOnChange": true, "controllerPath": "texts-categories", "noOptionsPlaceholder": "textmodules.noOptionsPlaceholder", "ariaLabelClassName": "sr-only", "labelText": "aria.filterTextByCategory", "inputProps": { "placeholder": "textmodules.filter" } } } ] } ] }
Vorbereitungen für die Mängelmelder-App
Als Vorbereitung auf die geplante Mängelmelder-App wurden einige Features hinzugefügt. Unter anderem können Meldungen mit GPS-Koordinaten eingereicht werden. Damit diese im Ticket angezeigt werden, muss folgende Konfiguration in ticketView.json hinzugefügt werden:
{
"component": "TextFieldWithLabelSidebar",
"props": {
"binding": "gps",
"umAttr": "sd_gps"
}
},
Außerdem können Kategorien nun Icons zugeordnet werden, welche in der App an der jeweiligen Kategorie hängen.
Funktionserweiterungen
Im Texteditor werden Links nun automatisch mit Protokoll (http) versehen
Designoptimierungen
Das Design einiger Backoffice-Inputs wurde angepasst.