Přeskočit obsah

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ř. 2 pro dvě desetinná místa).
  • aPad — Doplnění nulami na zadaný počet desetinných míst (true = vždy zobrazí mDec míst).

DateTime

Sloupec pro datum a čas.

{
  "Name": "Datum",
  "DateTime": {
    "Format": "Date"
  }
}
  • Format — Formát zobrazení: Date (pouze datum) nebo DateAndTime (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": []
}