Header-Footer Templates

Live Beispiel

tipp

In diesem Beispiel ändert sich die Kopf- und Fusszeile, wenn der Betrag höher ist als 500 Euro.

Beispielcode

context.enableModules();
const { TableGadget } = require("ou.sp.gadget.TableGadget");

const gadget = new TableGadget({
    allowEdit: true,
    showOptions: false,
    showFooter: false,
    select: false,
    columns: {
        id: {
            label: "Kreditorennummer",
            required: true,
            footerTemplate: "<span style='color: #888'>Bitte immer angeben!</span>",
        },
        amount: {
            label: "Gesamtbetrag",
            type: "currency",
            change: function (value, options) {
                var total = value * 1.19;
                options.row.set("totalAmount", Number(total.toFixed(2)));
            },
        },
        totalAmount: {
            label: "Brutto",
            type: "currency",
            allowEdit: false,
            allowInsert: false,
            attributes: {
                style: "color: #999",
            },
            headerTemplate: function (options) {
                var sum =
                    options.rows?.reduce(function sum(acc, row) {
                        return acc + row.totalAmount;
                    }, 0) || 0;
                var icon = sum > 500 ? "ion-md-warning" : "ion-md-checkmark";

                return "<div style='text-align:right'><span class='" + icon + "'></span></div>";
            },
            footerTemplate: function (options) {
                var sum =
                    options.rows?.reduce(function sum(acc, row) {
                        return acc + row.totalAmount;
                    }, 0) || 0;
                var formatted = formatNumber(sum, 2);
                var textColor = sum > 500 ? "#f44336" : "#000";

                var styles = [
                    "text-align:right",
                    "border-top: solid 2px #000",
                    "border-bottom: double 3px #000",
                    "margin: -4px",
                    "padding-right: 4px",
                    "font-weight: bold",
                    "color: " + textColor,
                ];

                return "<div style='" + styles.join(";") + "'>" + formatted + " €</div>";
            },
        },
    },
    rows: [
        {
            id: "123456",
            amount: 42.0,
            totalAmount: 49.98,
        },
        {
            id: "123456",
            amount: 50.0,
            totalAmount: 59.5,
        },
        {
            id: "123456",
            amount: 1200.3,
            totalAmount: 1428.36,
        },
    ],
});

context.returnValue = gadget.transfer();