Dynamické řádky: skript

Proměnná typu Dynamické řádky má kromě JSON definice sloupců (viz Proměnné: Dynamické řádky) i vlastní Skript – kód v JavaScriptu, který běží v prohlížeči uživatele a řídí hodnoty, vzhled a chování buněk tabulky za běhu formuláře. Tento článek je referencí metod a kontextu skriptu v TAS 5.19.12.

Kontext skriptu

V kódu je k dispozici kontext aktuálního úkolu pod this.currentTask: this.currentTask.id (ID úkolu), this.currentTask.items (proměnné úkolu s počátečními hodnotami z databáze), this.currentTask.refs (reference na formulářové komponenty) a this.currentTask.processVars (proměnné případu). Aktuální data tabulky jsou pod this.table, aktuální jazyk formuláře v this.language. Příznak this.props.formIsPristine, resp. t['sloupec'][i].isPristine() (kde i je číslo řádku), řekne, zda uživatel danou buňku/formulář od načtení změnil. this.lastChangedCell odkazuje na poslední uživatelem změněnou buňku. Pro obecné pomocné funkce je k dispozici knihovna Lodash.

Ve všech metodách níže značí t kontext tabulky (referenci na všechny buňky, t['sloupec'][i]) a i/rowNumber číslo řádku; pokud je colName/rowNumber null, funkce se použije na celý sloupec, resp. celý řádek.

this.value – hodnota buňky

this.value(colName, rowNumber, args);
ParametrPopis
colNameNázev sloupce; null = všechny sloupce řádku.
rowNumberČíslo řádku; null = všechny řádky sloupce.
argsHodnota, nebo funkce function(t, i, original) vracející hodnotu. original je původní hodnota buňky.
this.value('totalPrice', null, function(t, i) {
    return t['unitPrice'][i].getValue() * t['quantity'][i].getValue();
});

// Součtový řádek (řádek 1 bývá totals)
this.value('totalPrice-total', 1, function(t, rows) {
    var total = 0;
    for (var i in rows) {
        total += t['totalPrice'][i].getValue();
    }
    return total;
});

this.task – styl buňky

this.task(colName, rowNumber, args);

Stejné parametry jako this.value, args ale vrací objekt se styly CSS.

this.task('totalPrice', null, function(t, i) {
    return t['totalPrice'][i].getValue() > 10000
        ? { textAlign: 'right', color: '#c00' }
        : { textAlign: 'right', color: '#555' };
});

this.changeDef – definice tabulky a sloupců

this.changeDef(newDef);

newDef je objekt {colName: {vlastnost: hodnota}, ..., table: {...}} (klíč table mění vlastnosti celé tabulky, např. side, showAddRemove, showTotals). Vlastnosti se kumulují: pokud chcete sloupec schovat jen za podmínky, musíte ho v opačné větvi zase zviditelnit. Víc volání changeDef se slučuje, stejnojmenná vlastnost platí naposledy vrácená.

this.changeDef(function() {
    return {
        totalPrice: { duty: 'readonly' },
        note: { isVisible: vSync('OrderType') === 'Goods' },
        table: { side: 'left', showTotals: false },
    };
});

this.changeCell – vlastnosti buňky

this.changeCell(colName, rowNumber, args);

Stejné parametry jako this.value; args vrací objekt vlastností konkrétní buňky (např. duty, isValid, validationErrors, zdroj dat pro DL/DT: dataUrl, urlFilter, colIndex).

this.changeCell('totalWithVat', null, function(t, i) {
    return t['totalPrice'][i].getValue() || t['totalPrice'][i].getValue() === 0
        ? { duty: 'mandatory' }
        : { duty: 'writeable' };
});

// Změní zdroj dat našeptávače podle zvoleného kraje
this.changeCell('city', null, function(t, i) {
    var region = t['region'][i].getValue() && t['region'][i].getValue().value;
    if (region) {
        return { colIndex: 2, dataUrl: '/dyn-table/52/values', urlFilter: 'col_1<eq>' + region };
    }
});

Další metody

MetodaSignaturaPopis
this.changeFormComponents(componentName, value)Nastaví hodnotu jiné proměnné formuláře úkolu (mimo tabulku). componentName je název proměnné, value nová hodnota nebo funkce.
this.formComponentsStyle(componentName, style)Nastaví styl jiné proměnné formuláře, typicky ji schová: this.formComponentsStyle('Sequence', {display: 'none'}).
this.insertHtml(html)Vloží vlastní HTML pod tabulku, např. součtová políčka mimo sloupce tabulky.
this.valueHtml(id, value)Nastaví hodnotu vloženého HTML elementu podle jeho id.
this.getDynTable(dt_id, dtc_id)Načte sloupec dtc_id dynamické tabulky dt_id (jde použít i název) do this.dynTable[dt_id]. Asynchronní – skript počká na dokončení.
this.deleteRow(args)Smaže řádek; args je boolean, nebo funkce function(t, rowId) vracející true/false.
this.handleErrors(error)Zapíše chybu z try/catch nebo odmítnuté promisy do konzole a znemožní splnění úkolu, dokud chyba trvá.
this.insertHtml('<div><span>Celkem s DPH</span><input id="totalSum" type="text" readonly></div>');
this.valueHtml('totalSum', function(t) {
    return numeral(t['totalWithVat-total'][1].getValue()).format('0,0.00 $');
});

this.getDynTable('Suppliers');
this.value('supplierVat', null, function(t, i) {
    var row = t['supplier'][i].getValue();
    if (!row) return null;
    var found = _.find(this.dynTable['Suppliers'], { dtv_index: row.value });
    return found ? found.col_4 : null;
});
watchVariables
Aby sloupec reagoval na změnu proměnné formuláře mimo tabulku, musí být proměnná v definici tabulky uvedená v table.watchVariables a musí být v úkolu namapovaná pro zápis – jinak se skript při její změně nepřepočítá. Úplný přehled vlastností definice je v článku Proměnné: Dynamické řádky.

Snippety

Tlačítko Vložit snippet v editoru skriptu nabízí hotové šablony volání výše uvedených metod (this.value, this.task, this.changeDef, this.changeCell, this.changeFormComponents, this.formComponentsStyle, this.insertHtml/this.valueHtml, this.getDynTable, this.deleteRow, this.handleErrors) – vloží se na místo kurzoru a stačí doplnit názvy sloupců a logiku.

Související: Proměnné: Dynamické řádky, Dynamické podmínky: skript, Dynamic Table API.

Dynamické podmínky: skript
Team assistant (opens in a new tab)

Powered by HelpDocs (opens in a new tab)