Spaltendefinition (MultiTableColumn)

Über die Spaltendefinition kann die Darstellung jeder einzelnen Zellen gesteuert werden.

Beispiel

{
    rows: [{
            article: "de:Fahrradzubehör 1; en: Bike tool 1",
            amount: 100
        },
        {
            article: "de:Fahrradzubehör 2; en: Bike tool 2",
            amount: 50
        },
        {
            article: "de:Fahrradzubehör 3; en: Bike tool 3",
            amount: 200
        }
    ],
    columns: {
        article: "de:Artikel;en:Article",
        amount: {
            label: "de:Netto;en:net",
            type: "currency",
        }
    }
}

Daraus entstehen folgende Spalten (de):

Artikel	Netto
Fahrradzubehör 1	100,00 €
Fahrradzubehör 2	50,00 €
Fahrradzubehör 3	200,00 €

Fallback

Wird keine Spaltendefinition angegeben, so werden die Spalten anhand der Zeilen generiert.

Das folgende Beispiel enthält keine Spaltendefinition:

rows: [{
        article: "de:Fahrradzubehör 1; en: Bike tool 1",
        amount: 100
    },
    {
        article: "de:Fahrradzubehör 2; en: Bike tool 2",
        amount: 50
    },
    {
        article: "de:Fahrradzubehör 3; en: Bike tool 3",
        amount: 200
    }
]

Daraus entstehen folgende Spalten:

article	amount
Fahrradzubehör 1	100
Fahrradzubehör 2	50
Fahrradzubehör 3	200

Callbacks

Die Eigenschaften können im jeweiligen Typ oder als Callback angegeben werden.

Je nach Datentyp muss der Callback den entsprechenden Datentyp zurück geben. Soll der Standardwert verwendet werden, so darf die Callback-Funktion keinen Wert zurück geben ( return; ).

columns: {
    iban: {
        label: "IBAN",
        render: function(options) {
            if (!options.row.iban) {
                return ""
            }
            // Check for access profile
            return options.row.iban.substring(0, 5) + "xxxxxxxxxx" +
                options.row.iban.substring(options.row.iban.length - 3)
        }
    }
}

Achtung

Die Callbacks werden clientseitig ausgeführt! Somit steht nur der documentsContext zur Verfügung.

Die Callback Parameter besteht aus einem options Objekt. Dies enthält Informationen über die aktuelle MultiTable Instanz.

options Parameter

row?: MultiTableRow: (Optional) Steht nur bei folgenden Eigenschaften zur Verfügung: allowEdit, render, entries
rows: MultiTableRows: Enthält die Einträge
column: MultiTableColumn: Enthält das aktuelle Spalten-Objekt
columns: MultiTableColumns: Enthält das alle Spalten Informationen

Warnung

Im Callback darf das row nicht bearbeitet werden! Dies kann zur Inkonsistenz der Daten führen.

Optionen

`label` string

label: string
label: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => string

Die Überschrift der Spalte

Default: ``

label: "de:Netto;en:net"

label: function(options) {
    return "Anzahl " + options.rows.length
}

`type` string

type: string | (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => string

Verfügbare Datentypen:

"default"
"textarea"
"date"
"currency"
"checkbox"
"select"
"link"
"badge"
"button"
"icon"
"image"
"number"

(Optional) Der Datentyp der Spalte.

Default: default

type: "currency"

Weitere Beispiele sind unterhalb Beispiele / Spaltentypen zu finden.

Pro-Tip

Die Typen können durch eigene Zelltypen erweitert werden. Siehe dazu Benutzerdefinierte Zellen.

`visible` boolean

visible?: boolean
visible?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => boolean

(Optional) Soll die Spalte angezeigt werden?

Default: true

visible: true

`field` string

field?: string
field?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => string

(Optional) Name des Mappenfeld für Mapping. Ist kein Mapping gewünscht, so muss der Wert leer sein (field: "").

Default: null

field: "vendorName"

`allowEdit` boolean

allowEdit?: boolean
allowEdit?: (options: { row: MultiTableRow, rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => boolean

(Optional) Darf die Spalte im Editiermodus bearbeitet werden?

Default: true

allowEdit: false

allowEdit: function(options) {
    // z.B. Abfrage auf andere Werte
    return options.row.vendorId != ""
}

`allowInsert` boolean

allowInsert?: boolean
allowInsert?: (options: { row: MultiTableRow, rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => boolean

(Optional) Ist eine Eingabe beim Hinzufügen einer Zeile möglich?

Default: true

allowInsert: false

allowInsert: function(options) {
    // z.B. Abfrage auf andere Werte
    return options.rows.length <= 0
}

`sortable` boolean

sortable?: boolean
sortable?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => boolean

(Optional) Spalte sortierbar?

Default: true

sortable: false

`defaultValue` any

defaultValue?: any
defaultValue?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => any

(Optional) Vordefinierter Wert bei Neuanlage einer Zeile. Dieser Wert wird in der Zeile zum Anlegen eines Datensatzes vorbefüllt.

Default: true

defaultValue: "Daten erfasst"

`required` boolean

required?: boolean
required?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => boolean

(Optional) Ist die Spalte ein Pflichtfeld?

Default: true

required: false

`validation` Function

validation?: string
validation?: (cellValue: any, options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => boolean

(Optional) Benutzerdefinierte Validierung

Default: null

validation: "globaleFunktionZurValidierung"

validation: function(cellValue, options) {
    // Wert muss größer 0 sein (da 0 auch ein gültiger Wert ist)
    return cellValue > 0
}

`attributes` Object

attributes?: {
    [key: string]: string | ((cellValue: any, options: {
        row: MultiTableRow,
        rows: MultiTableRows,
        column: MultiTableColumn,
        columns: MultiTableColumns
    }) => string)
}

(Optional) Zusätzliche Feld attribute

Default: null

attributes: {
    class: 'some-class',
    title: 'Ein Tooltip'
}

attributes: {
    class: "text-right",
    style: function(value, options) {
        return "color: " + (value > 1000 ? "#f00" : "inherit")
    }
}

`selectOnFocus` boolean

selectOnFocus?: boolean
selectOnFocus?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => boolean

(Optional) Soll der Text im Eingabefeld selektiert werden, wenn Feld Fokus bekommt.

Default: true

selectOnFocus: false

tipp

Bei type: "textarea" kann es nützlich sein, diese Option auf false zu setzen, damit nicht der komplette Text markiert wird.

`change` Function

change?: string

change?: Function(
    value: any,
    options: {
        rows: MultiTableRows,
        column: MultiTableColumn,
        columns: MultiTableColumns,
        $row: MultiTableRow,
        row: {
            get: (columnName: string) => any
            set: (fieldOrObject: string | Object, value ? : any) => void
            focus: (columndIndex: number) => void
        }
    }
): any

(Optional) Callback wenn der Wert geändert worden ist.

Default: null

Beispiel Daten modifizieren:

change: (amount, options) => {
    if (amount < 0) {
        return 0
    }
}

Beispiel mit Verwendung von row-Funktionen:

change: function(value, options) {
    var total = value * options.row.get("taxRate") / 100
    options.row.set("totalAmount", total.toFixed(2))
    options.row.focus("taxRate")
}

`headerTemplate` string

headerTemplate?: string
headerTemplate?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => string

(Optional) HTML für den Kopfbereich

Default: null

headerTemplate: "Zusätzliche Spaltenüberschrift"

headerTemplate: function(options) {
    return "Hier könnte Ihre Werbung stehen"
}

`footerTemplate` string

footerTemplate?: string
footerTemplate?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => string

(Optional) HTML für den Fussbereich

Default: null

footerTemplate: "Zusätzliche Angaben"

footerTemplate: function(options) {
    var sum = options.rows.reduce(function(acc, row) {
        return acc + row.amount
    }, 0)
    return "<div style='text-align:right; border-top: solid 2px #000; border-bottom: double 3px #000; margin: -4px; padding-right: 4px'>" + sum + " €</div>"
}

`width` string

width?: string
width?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => string

(Optional) Breitenangabe für Spalte.

Default: "auto"

Beispiel:

width: "60px"

Beispiel (Lokalisierung):

width: "de:60px;en:80px"

Beispiel Callback:

width: function(options) {
    var anyBigNumber = options.rows.some(function(row) {
        return row.totalAmount > 999
    })
    return anyBigNumber ? "100px" : "60px"
}

`render` string

render?: string
render?: (options: { row: MultiTableRow, rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => string

(Optional) Anzeigetext für Zelle.

Default: null

render: function(options) {
    return options.row.taxRate + "%"
}

render: function(options) {
    // Check for access profile
    return options.row.iban.substring(0, 5) + "xxxxxxxxxx" +
        options.row.iban.substring(options.row.iban.length - 3)
}

`disableInternationalization` boolean (nur React-MultiTable)

disableInternationalization?: boolean
disableInternationalization?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns, row?: MultiTableRow }) => boolean

(Optional) Deaktiviert die Lokalisierung für die Spalte. Dies ist nützlich, wenn die Zellen einer Spalte Strichpunkte enthalten, die nicht Teil einer Lokalisierung sind.

Default: false

disableInternationalization: true

`cellBackgroundColor` string (nur React-MultiTable)

cellBackgroundColor?: string
cellBackgroundColor?: (cellValue: any, options: { row: MUltiTableRow, column: MultiTableColumn, table: MultiTableClientOptions }) => boolean

(Optional) Setzt die Hintergrundfarbe der Zelle.

Default: ""

cellBackgroundColor: "#ff0000"

Zusätzliche Optionen für Typ default

`charLimit` Number (nur React-MultiTable)

charLimit?: Number
charLimit?: (options: ColumnAttributeCallbackOptions) => Number

(Optional) Bei type: "default" kann hier die maximale Anzahl der Zeichen definiert werden.

Default: undefined

charLimit: 50

`placeholder` String (nur React-MultiTable)

placeholder?: String
placeholder?: (options: ColumnAttributeCallbackOptions) => String

(Optional) Bei type: "default" kann hier ein Platzhaltertext für das Eingabefeld definiert werden.

Default: undefined

placeholder: "Maximal 50 Zeichen"

Zusätzliche Optionen für Typ number

`decimalPrecision` Number

decimalPrecision?: Number
decimalPrecision?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => Number

(Optional) Bei type: "number" kann hier die Anzahl der Nachkommastellen definiert werden.

Default: 2

decimalPrecision: 0

`placeholder` String (nur React-MultiTable)

placeholder?: String
placeholder?: (options: ColumnAttributeCallbackOptions) => String

(Optional) Bei type: "number" kann hier ein Platzhaltertext für das Eingabefeld definiert werden.

Default: undefined

placeholder: "Maximal 50 Zeichen"

Zusätzliche Optionen für Typ currency

`decimalPrecision` Number

decimalPrecision?: Number
decimalPrecision?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => Number

(Optional) Bei type: "number" kann hier die Anzahl der Nachkommastellen definiert werden.

Default: 2

decimalPrecision: 0

`currency` String

currency?: String
currency?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => String

(Optional) Currency Symbol.

Default: €

currency: "EUR"

Zusätzliche Optionen für Typ date

`dateFormat` string

dateFormat?: string
dateFormat?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => string

(Optional) Datumsformat. Wird kein Datumsformat angegeben, wird das Format des angemeldeten User verwendet (userContext.dateFormatPattern)

Default: null

dateFormat: "yyyy-mm-dd"

`minDate` Date

(Optional) Kleinstes Datum im Auswahldialog.

minDate?: Date | (options: { row: MultiTableRow, rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => Date | Number

Default: null
Ab Version: 20.4.0

minDate: function(options) {
    if (options.row.fromDate) {
        return moment(options.row.fromDate).toDate()
    }
    return moment().add(-1, "year").toDate()
}

`maxDate` Date

(Optional) Größtes Datum im Auswahldialog.

maxDate?: Date | (options: { row: MultiTableRow, rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => Date | Number

Default: null
Ab Version: 20.4.0

maxDate: function(options) {
    if (options.row.endDate) {
        return moment(options.row.endDate).toDate()
    }
    return moment().add(1, "year").toDate()
}

Zusätzliche Optionen für Typ select

`entries` string[]

entries?: string[]
entries?: { text: string, value: string }[]
entries?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => string[] | { text: string, value: string }[]

(Optional) Einträge für die Auswahlliste.

Default: []

Option 1: String-Array

entries: [
    "key1;de:Eintrag 1;en:Entry 1",
    "key2;de:Eintrag 2;en:Entry 2",
    "key3;de:Eintrag 3;en:Entry 3"
]

Option 2: Objekt-Array

entries: [{
        text: "Eintrag 1",
        value: 1
    },
    {
        text: "Eintrag 2",
        value: 2
    },
    {
        text: "Eintrag 3",
        value: 3
    }
]

Option 3: documents Autotext Enum-String-Array

warnung

Verwenden von context.getEnumAutoText ist nur im Portalscript möglich!

entries: context.getEnumAutoText("%loginFullname%")

Option 4: Callback

vorsicht

Callbacks werden am Client ausgeführt!

entries: function(options) {
    const fileContext = documentsContext.getFileContext();

    if (fileContext.getFileFieldValue("state") === "unauthorized") {
        return []
    }

    return [{
            text: "Eintrag 1",
            value: 1
        },
        {
            text: "Eintrag 2",
            value: 2
        },
        {
            text: "Eintrag 3",
            value: 3
        }
    ]
}

`onlyShowUnusedEntries` boolean

onlyShowUnusedEntries?: boolean

(Optional) Für diese Spalte werden nur noch Einträge zur Auswahl angezeigt, die noch in keiner anderen Zeile verwendet werden.

Zusätzliche Optionen für Typ badge

`badges` Object

badges?: { [value: string]: string }
badges?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => { [value: string]: string }

(Optional) Hierüber können Werte lokalisiert und optisch angepasst werden.

Default: null
Styling ab Version: 20.6.1

Beispiel Badge mit Lokalisierung und Styling über CSS-Klassen

badges: {
    "10;de:Erfassung;en:Created": "info",
    "30;de:In Prüfung;en:Validating": "",
    "98;de:Fehler;en:Error": "error",
    "100;de:Abgeschlossen;en:Done": "success",
}

Es stehen folgende CSS-Klassen zur Verfügung:

error
success
info

hinweis

Ist der Wert leer, so wird das Badge grau angezeigt.

Beispiel Badge mit optischen Anpassungen über Styling

tipp

Beginnt der Wert mit einer #, so wird keine CSS-Klasse angewendet, sondern als style-Attribute hinterlegt.

badges: {
    "10;de:Erfassung": "#ff5722; color:#fff",
}

`badgeAsPill` boolean

badgeAsPill?: boolean
badgeAsPill?: (options: { rows: MultiTableRows, column: MultiTableColumn, columns: MultiTableColumns }) => boolean

(Optional) Badge mit komplett runden Ecken (Pille) darstellen.

Default: false
Ab Version: 20.5.0

badgeAsPill: true

Zusätzliche Optionen für Typ button

`click` Function

click?: string
click?: (column: MultiTableColumn, row: MultiTableRow, options: ClickCallbackOptions }) => void

click?: Function(
    column: MultiTableColumn,
    row: MultiTableRow,
    options: {
        row: {
            get: (columnName: string) => any
            set: (fieldOrObject: string | Object, value ? : any) => void
            focus: (columndIndex: number) => void
        },
        table: MultiTableClientOptions
    }
): any

(Optional) Bei type: "button" kann hier eine Callback-Funktion definiert werden.

Parameter options erst ab Version: VERSION_NEXT

click: function(column, row, options) {
    alert("Works on my machine!")
}

Zusätzliche Optionen für Typ textarea

`placeholder` String (nur React-MultiTable)

placeholder?: String
placeholder?: (options: ColumnAttributeCallbackOptions) => String

(Optional) Bei type: "textarea" kann hier ein Platzhaltertext für das Eingabefeld definiert werden.

Default: undefined

placeholder: "Maximal 50 Zeichen"

Beispiel​

Fallback​

Callbacks​

options Parameter​

Optionen​

label string​

type string​

visible boolean​

field string​

allowEdit boolean​

allowInsert boolean​

sortable boolean​

defaultValue any​

required boolean​

validation Function​

attributes Object​

selectOnFocus boolean​

change Function​

headerTemplate string​

footerTemplate string​

width string​

render string​

disableInternationalization boolean (nur React-MultiTable)​

cellBackgroundColor string (nur React-MultiTable)​

Zusätzliche Optionen für Typ default​

charLimit Number (nur React-MultiTable)​

placeholder String (nur React-MultiTable)​

Zusätzliche Optionen für Typ number​

decimalPrecision Number​

placeholder String (nur React-MultiTable)​

Zusätzliche Optionen für Typ currency​

decimalPrecision Number​

currency String​

Zusätzliche Optionen für Typ date​

dateFormat string​

minDate Date​

maxDate Date​

Zusätzliche Optionen für Typ select​

entries string[]​

Option 1: String-Array​

Option 2: Objekt-Array​

Option 3: documents Autotext Enum-String-Array​

Option 4: Callback​

onlyShowUnusedEntries boolean​

Zusätzliche Optionen für Typ badge​

badges Object​

Beispiel Badge mit Lokalisierung und Styling über CSS-Klassen​

Beispiel Badge mit optischen Anpassungen über Styling​

badgeAsPill boolean​

Zusätzliche Optionen für Typ button​

click Function​

Zusätzliche Optionen für Typ textarea​

placeholder String (nur React-MultiTable)​

Beispiel

Fallback

Callbacks

options Parameter

Optionen

`label` string

`type` string

`visible` boolean

`field` string

`allowEdit` boolean

`allowInsert` boolean

`sortable` boolean

`defaultValue` any

`required` boolean

`validation` Function

`attributes` Object

`selectOnFocus` boolean

`change` Function

`headerTemplate` string

`footerTemplate` string

`width` string

`render` string

`disableInternationalization` boolean (nur React-MultiTable)

`cellBackgroundColor` string (nur React-MultiTable)

Zusätzliche Optionen für Typ default

`charLimit` Number (nur React-MultiTable)

`placeholder` String (nur React-MultiTable)

Zusätzliche Optionen für Typ number

`decimalPrecision` Number

`placeholder` String (nur React-MultiTable)

Zusätzliche Optionen für Typ currency

`decimalPrecision` Number

`currency` String

Zusätzliche Optionen für Typ date

`dateFormat` string

`minDate` Date

`maxDate` Date

Zusätzliche Optionen für Typ select

`entries` string[]

Option 1: String-Array

Option 2: Objekt-Array

Option 3: documents Autotext Enum-String-Array

Option 4: Callback

`onlyShowUnusedEntries` boolean

Zusätzliche Optionen für Typ badge

`badges` Object

Beispiel Badge mit Lokalisierung und Styling über CSS-Klassen

Beispiel Badge mit optischen Anpassungen über Styling

`badgeAsPill` boolean

Zusätzliche Optionen für Typ button

`click` Function

Zusätzliche Optionen für Typ textarea

`placeholder` String (nur React-MultiTable)