Advanced Table¶
Advanced Table poskytuje editovatelnou tabulku uvnitř formuláře s podporou různých typů sloupců, výpočtů a stránkování.
Základní konfigurace¶
Minimální konfigurace s číselným sloupcem:
{
"Table": {
"MaxItemsOnPage": 10
},
"Columns": [
{
"Name": "Částka",
"Number": {
"aDec": ",",
"mDec": 2,
"aPad": true
}
}
],
"Resources": [],
"Extensions": {}
}
Vlastnosti¶
Konfigurace tabulky (Table)¶
- MaxItemsOnPage
"MaxItemsOnPage": 10— Maximální počet řádků na stránku. [Nepovinné] - ReadOnly
"ReadOnly": true— Zabrání editaci celé tabulky. Výchozí hodnota:false. [Nepovinné] - Reverse
"Reverse": true— Zobrazí řádky v opačném pořadí. [Nepovinné]
Společné vlastnosti sloupců¶
- Name
"Name": "Název sloupce"— Zobrazený název záhlaví sloupce. [Povinné] - InternalName
"InternalName": "columnKey"— Interní identifikátor sloupce pro ukládání dat. [Nepovinné] - ReadOnly
"ReadOnly": true— Zabrání editaci sloupce. [Nepovinné] - Required
"Required": true— Vyžaduje vyplnění sloupce. [Nepovinné] - Hidden
"Hidden": true— Skryje sloupec v tabulce. [Nepovinné] - InputStyle
"InputStyle": "width: 100px"— CSS styl pro vstupní prvek. [Nepovinné] - InputCSSClass
"InputCSSClass": "my-class"— CSS třída pro vstupní prvek. [Nepovinné] - HeaderStyle
"HeaderStyle": "min-width: 150px"— CSS styl pro záhlaví sloupce. [Nepovinné] - HeaderCSSClass
"HeaderCSSClass": "my-header"— CSS třída pro záhlaví sloupce. [Nepovinné] - CellStyle
"CellStyle": "text-align: right"— CSS styl pro buňky sloupce. [Nepovinné] - CellCSSClass
"CellCSSClass": "my-cell"— CSS třída pro buňky sloupce. [Nepovinné]
Další vlastnosti¶
- SaveAsOldData
"SaveAsOldData": true— Ukládá data ve starém formátu (pole polí řetězců). Výchozí hodnota:false. [Nepovinné] - Resources
"Resources": [...]— Lokalizační zdroje. [Nepovinné] - Extensions
"Extensions": {}— Rozšíření tabulky (Reference apod.). [Nepovinné]
Typy sloupců¶
Number¶
Číselný sloupec s formátováním.
{
"Name": "Cena",
"Number": {
"aDec": ",",
"mDec": 2,
"aPad": true
},
"Calc": {
"Operation": "sum"
}
}
Vlastnosti číselného formátování (autoNumeric):
- aDec — Oddělovač desetinných míst (např.
","pro český formát,"."pro anglický). Výchozí:. - mDec — Maximální počet desetinných míst (např.
2pro dvě desetinná místa). - aPad — Doplnění nulami na zadaný počet desetinných míst (
true= vždy zobrazímDecmíst).
DateTime¶
Sloupec pro datum a čas.
{
"Name": "Datum",
"DateTime": {
"Format": "Date"
}
}
- Format — Formát zobrazení:
Date(pouze datum) neboDateAndTime(datum a čas).
Boolean¶
Zaškrtávací políčko (checkbox).
{
"Name": "Aktivní",
"Boolean": true
}
User¶
Výběr uživatele.
{
"Name": "Schvalovatel",
"User": {}
}
DataList¶
Výběr z předdefinovaného seznamu hodnot.
{
"Name": "Kategorie",
"DataList": ["Materiál", "Služby", "Cestovné"]
}
ExternalLookup¶
Výběr z externího zdroje dat. Konfigurace odpovídá typu pole External Lookup.
{
"Name": "Dodavatel",
"ExternalLookup": {
"DataSourceType": "SP",
"DataSourceConfiguration": {
"SourceList": "{SiteUrl}/Suppliers"
},
"IndexValue": { "Expression": "{ID}" },
"TextValue": { "Expression": "{Title}" },
"RenderMode": "AutoComplete"
}
}
TemplateColumn¶
Vypočítaný sloupec s Handlebars šablonou. Konfigurace odpovídá klientskému zobrazení typu pole Template Column.
{
"Name": "Stav",
"InternalName": "status",
"TemplateColumn": {
"Expression": "{{#if (eq value 1)}}✅ Aktivní{{else}}❌ Neaktivní{{/if}}"
}
}
Při exportu dat z tabulky se HTML tagy automaticky odstraní a exportuje se pouze textový obsah.
Výpočty¶
Číselné sloupce podporují automatické výpočty v zápatí tabulky pomocí vlastnosti Calc:
{
"Calc": {
"Operation": "sum",
"CellStyle": "font-weight: bold"
}
}
Podporované operace:
| Operace | Popis |
|---|---|
sum |
Součet hodnot. |
min |
Minimální hodnota. |
max |
Maximální hodnota. |
avg |
Průměrná hodnota. |
Příklady¶
Příklad: Fakturační tabulka¶
{
"Table": {
"MaxItemsOnPage": 20
},
"Columns": [
{
"Name": "Položka",
"InternalName": "itemName"
},
{
"Name": "Množství",
"InternalName": "quantity",
"Number": {
"aDec": ",",
"mDec": 0,
"aPad": false
}
},
{
"Name": "Cena za kus",
"InternalName": "unitPrice",
"Number": {
"aDec": ",",
"mDec": 2,
"aPad": true
}
},
{
"Name": "Celkem",
"InternalName": "total",
"ReadOnly": true,
"Number": {
"aDec": ",",
"mDec": 2,
"aPad": true
},
"Calc": {
"Operation": "sum",
"CellStyle": "font-weight: bold"
}
}
],
"Resources": []
}