Zum Hauptinhalt springen

Externes Interface

warnung

Dieses Feature ist nur ab Library-Version VERSION_NEXT und bei Verwendung des MultiTableReact verfügbar.

Das Objekt externalInterface vom Type MultiTableExternalInterface ermöglicht es, den State des MultiTable innehalb von Callback-Funktionen zu verändern.

Folgenden Callbacks wird das externalInterface übergeben:

  • Jede Spalte: change
  • Button-Spalte: click
  • TableMonitor-Button: click

Beispiel Invoice: Nur Positionen ohne genauen DB-Match anzeigen​

Im Skript ou.spc.ptpINV.settings.monitorRMB gibt es einen Button, der eine Eigenschaft an oder ausschaltet, um nur Positionen ohne genauen DB-Match oder alle Positionen anzuzeigen. Dazu sind drei Bestandteile notwendig:

State-Variable​

Zum einen eine Eigenschaft monitorOptions.additionalParams.onlyShowUnmatchedPositions, die als State-Variable fungiert.

const monitorOptions = {
    (...)
    additionalParams: {
        (...)
        onlyShowUnmatchedPositions: false
        (...)
    }
    (..)
};
tipp

Das Objekt additionalParams ist dafür gedacht, alle möglichen zusätzlichen Variablen zu beinhalten, die nicht direkt Teil der MultiTable-Optionen sind.

Zeilen-Filter​

Des Weiteren wird eine Callback-Funktion monitorOptions.rowFilter definiert, die abhängig von der State-Variable onlyShowUnmatchedPositions entweder alle Positionen oder nur die Positionen ohne genauen DB-Match zurückgibt.

rowFilter: (options) => {
    const additionalParams = options.table.additionalParams;
    const { onlyShowUnmatchedPositions } = additionalParams;
    const matchResult: string = options.row.itemMatchesDatabase;
    return onlyShowUnmatchedPositions ? matchResult !== "FullMatch" : true;
},
tipp

Das Object options.table beinhaltet die gesamten MultiTable-Optionen.

Button mit Callback​

Zuletzt wird der Button monitorOptions.buttons.toggleShowUnmatchedPositions definiert:

toggleShowUnmatchedPositions: {
    label: "de:Unvollständige Positionen anzeigen;en:Show unmatched positions",
    icon: "mdi mdi-filter",
    onlyShowIcon: true,
    tooltip:
        "de:Nur Positionen ohne vollständigen Datenbankabgleich anzeigen;en:Show only positions without complete database match",
    click: ({ externalInterface }) => {
        const additionalParams = externalInterface.options.additionalParams;
        externalInterface.updateOptions({
            additionalParams: {
                ...additionalParams,
                onlyShowUnmatchedPositions: !additionalParams.onlyShowUnmatchedPositions,
            },
        });
    },
},

Hier wird die Funktion externalInterface.updateOptions verwendet, um die State-Variable onlyShowUnmatchedPositions zu toggeln. Dadurch wird die Callback-Funktion rowFilter automatisch mit den neuen Optionen aufgerufen und die Tabelle entsprechend gefiltert.

tipp

Best Practice: Wichtig ist hierbei, dass das Objekt additionalParams, das die State-Variable beinhaltet, als neues Objekt übergeben werden muss (daher der Spread-Operator ...additionalParams), dass React die Änderung erkennt und die Komponente neu rendert.