DataGrid Extension

Eine Klasse, welche die Benutzung des DataGrids vereinfacht. Kann mit SPFx v1.4.1+ verwendet werden.

Installation

npm install datagrid-extension --save

SharePoint OnPrem

Ist deine Extension für SharePoint OnPrem, also SPFx Version 1.4.1, dann installiere zusätzlich den babel-loader: npm install [email protected] --save-dev.

Anschließend erweitere deine gulpfile.js um folgenden Code:

const build = require("@microsoft/sp-build-web");

build.configureWebpack.mergeConfig({
    additionalConfiguration: (generatedConfiguration) => {
        generatedConfiguration.module.rules.push({
            test: /\.js$/,
            include: [path.resolve(__dirname, "node_modules/datagrid-extension/lib")],
            use: {
                loader: "babel-loader",
                options: {
                    presets: ["@babel/preset-env"],
                    plugins: [],
                    cacheDirectory: true,
                },
            },
        });

        return generatedConfiguration;
    },
});

build.initialize(require("gulp"));

Verwendung

• Erstelle eine Datei pro Listen-Webpart mit welchem du interagieren möchtest
• Erstelle in dieser Datei eine Klasse, welche von ListWebpartAPI ableitet
• Implementiere onGridReady und setze die webpartId entsprechend
• Erfolg 🫶🏻

import { ListWebpartAPI } from "datagrid-extension";

class MyListWebpartAPI extends ListWebpartAPI<ListItemModel> {
    // Gebe die ID zurück, welche in den WebPart-Einstellungen gesetzt wurde
    protected webpartId: string = "d6ee148c-eb77-11ee-9716-12c190008588";

    public async onGridReady(): Promise<void> {
        // Aktiviere
        this.setActionFunction("edit", async (items: ListItemModel[]) => {
            console.log("edit", items);
        });

        // Deaktiviere einen Button
        this.setActionFunction("edit", null);

        // Stoppe das Grid-Rendering
        this.stopRenderingGrid();

        // Starte das Grid-Rendering
        this.startRenderingGrid();

        // Refreshe ListItems
        this.refreshListItems();
    }
}

const myListWebpartAPI = new MyListWebpartAPI();
myListWebpartAPI.init();

export default myListWebpartAPI; // Nutzbarer Client um mit Grid zu interagieren

Funktionen & Typen

init

Sollte nach Erstellung einer Instanz aufgerufen werden. Die API-Instanz lauscht nun, ob der Listen-Webpart erreichbar ist. Ist dieser erreichbar, wird automatisch und einmalig onGridReady aufgerufen. Anschließend kann die Instanz verwendet werden.

onGridReady

Eine abstrakte Methode, welche überschrieben werden muss. Diese Methode wird ausgeführt, sobald das Grid fertig geladen ist und stellt sicher, dass mit dem Grid interagiert werden kann.

setActionFunction

ACHTUNG: Ist die SharePoint-Seite im Bearbeitungsmodus, kann es sein, dass die Buttons nicht gesetzt werden!

Mit this.setActionFunction(functionName, CustomActionFunction) kann ein Button initialisiert werden.

Der functionName wird bei der Konfiguration der Aktion festgelegt.

stopRenderingGrid

Aufruf unterbricht das Rendering des Grids.

startRenderingGrid

Aufruf startet das Rendering des Grids.

exportGridSettings

Export die aktuellen WebPart-Einstellungen des Grids.

refreshListItems

Lädt alle angezeigten Listen-Elemente des Grids neu.