Zum Hauptinhalt springen

Umstieg auf die neuen React MultiTable-Gadgets

Ab Version 24.0.0 werden im Invoice-Standard ausschließlich die neuen React MultiTable-Gadgets und Funktionen

  • TableGadgetReact
  • TableMonitorReact
  • TableDialogReact
  • showTableDialogReact

verwendet.

Die alten Gadgets und Funktionen
  • TableGadget
  • TableMonitor
  • TableDialog
  • showTableDialog

werden vorerst weiterhin unterstützt, aber es wird empfohlen, auf die neuen Gadgets umzusteigen. Auch wenn der Umstieg nicht jetzt erfolgt, müssen die Breaking Changes dennoch evaluiert werden.

Breaking Changes​

Clientseitiger Zugriff​

Was ist passiert?​

Der clientseitige Zugriff auf eine MultiTable-Instanz über das globale Window-Objekt hat sich für die neuen Gadgets verändert. Anstatt über window.multiTableInstances["<id>"] kann nun über window.ouGadgetInstances["multitable-<id>"] auf die Instanz zugegriffen werden. Dabei ist <id> die ID der MultiTable-Instanz.

Über diesen Zugriff erhält man ein Objekt, das das Interface MultiTableExternalInterface erfüllt. Für mehr Infos siehe MultiTableExternalInterface.

Was muss angepasst werden?​

Beispiel OUSP Invoice:

Das MultiTable-Gadget der Eingangsrechnungspositionszeilen ist nicht mehr über window.multiTableInstances.invoiceItems erreichbar, sondern über window.ouGadgetInstances["multitable-invoiceItems"]. Auch die API der MultiTable-Instanz hat sich geändert, wie im Abschnitt davor beschrieben.

gefahr

Das bedeutet, dass jeglicher Customizing-Code, der clientseitig diesen alten Zugriff auf die Positionszeilen verwendet, angepasst werden muss.

Klick-Funktion der TableMonitor-Buttons​

Was ist passiert?​

Die Funktionalität hinter den click-Events der Buttons im TableMonitor hat sich ein wenig verändert. Es stehen immer noch die gleichen Funktionen am options-Objekt zur Verfügung, allerdings sind zwei neue Funktionen hinzugekommen:

  • options.getRowIndex(row: MultiTableRow): number;
  • options.commit(): void;

Was muss angepasst werden?​

Gibt es im Customizing Code in einer click-Funktion eines TableMonitor-Buttons, müssen Aufrufe dieser Art angepasst werden:

Vorher:

const currentIndex = options.rows.indexOf(options.selectedRows[0]);

Nachher:

const currentIndex = options.getRowIndex(options.selectedRows[0]);

Zudem muss am Ende jeder click-Funktion die commit()-Funktion aufgerufen werden, um die Änderungen wirksam zu machen. Z.B.:

moveRowUp: {
    label: "move up",
    icon: "ionicon ion-md-arrow-round-up",
    onlyShowIcon: true,
    tooltip: "de:Zeile nach oben verschieben;en:Move row up",
    enabled: "single",
    toggleGroup: "navgroup",
    click: (options) => {
        const currentIndex = options.getRowIndex(options.selectedRows[0]);
        options.moveSelectedRow(currentIndex - 1);
        options.commit();
    },
},

Benutzerdefinierte Zellen und Slots​

Was ist passiert?​

Benutzerdefinierte Zellen sowie Benutzerdefinierte Slots werden nicht mehr unterstützt.

Was muss angepasst werden?​

Sollte ein derartiges Customizing verwendet worden sein, sollte am besten ein Entwickler für die Klärung des weiteren Vorgehens hinzugezogen werden.

HTML-Templates​

Was ist passiert?​

Über die Eigenschaft html konnte in den Optionen für den MultiTable HTML definiert werden, das über bzw. unter dem MultiTable angezeigt wird. Hier ist nun keine Vue.js-Syntax mehr verwendbar, sondern es muss mit einem Callback, welches einen HTML-String zurückgibt, gearbeitet werden.

Was muss angepasst werden?​

So könnte eine Umstellung aussehen:

Vorher:

html: {
    header: "<div>Anzahl Zeilen: {{options.rows.length}}</div>"
}

Nachher:

html: {
    header: (options) => `<div>Anzahl Zeilen: ${options.rows.length}</div>`
}