Čo je to?

Poznámka pre administrátora: Táto funkcia vám umožňuje prispôsobiť vzhľad a dojem platformy vašim špecifickým obchodným potrebám. Môžete pridať vlastné tlačidlá pre vaše najčastejšie úlohy, vytvoriť informačné panely pre váš personál a dokonca zmeniť farby na zvýraznenie dôležitých dát (napríklad nízky stav zásob).

Pre koho je to určené? Administrátori by si to mali prečítať, aby pochopili, ako môžu optimalizovať pracovný priestor svojho tímu. Hoci si tieto zmeny môžete naplánovať sami, nastavenie vlastných tlačidiel a panelov si zvyčajne vyžaduje pomoc od vášho vývojára, aby ich pripojil k správnym URL adresám alebo automatizovaným pracovným postupom.

Kľúčové výhody pre e-shop:

• Rýchlejšie pracovné postupy: Pridajte “Skratky” (vlastné tlačidlá) pre najčastejšie akcie vášho tímu, ako je export špecifickej správy alebo aktualizácia stavu produktu.
• Vylepšená viditeľnosť: Použite “Farby stĺpcov” na okamžité rozpoznanie naliehavých položiek, ako sú oneskorené objednávky alebo produkty, ktoré si vyžadujú vašu pozornosť.
• Integrované nástroje: Vložte svoje ďalšie obchodné aplikácie (ako CRM alebo helpdesk) priamo do rozhrania editora pomocou “Vlastných panelov”.
• Kontextové odkazy: Pridajte inteligentné odkazy vedľa dátových polí, ktoré otvoria správnu stránku vo vašich iných systémoch jediným kliknutím.

Prehľad

Systém prispôsobenia vám umožňuje rozšíriť používateľské rozhranie pridaním vlastných tlačidiel, panelov, odkazov na polia a vizuálneho štýlu do rôznych častí aplikácie. Tieto prispôsobenia sú špecifické pre entitu a môžu byť nakonfigurované tak, aby sa zobrazovali v rôznych kontextoch na základe používateľských oprávnení, stavu systému a vlastných podmienok.

Štyri typy prispôsobení

• Vlastné tlačidlá — Interaktívne akcie v dátových mriežkach a detailoch
• Vlastné panely — Dodatočné informačné panely v rozhraní editora
• Vlastné odkazy — Odkazy na úrovni polí na externé systémy na základe dát záznamu
• Farby stĺpcov — Podmienené farby pozadia buniek v dátových mriežkach

card: Vlastné tlačidlá
Interaktívne tlačidlá, ktoré sa zobrazujú v dátových mriežkach alebo detailoch dát a môžu vykonávať vlastné akcie na vybraných záznamoch. Podporujú otváranie URL s kontextovými premennými alebo spúšťanie automatizovaných pracovných postupov.
card: Vlastné panely
Rozbaľovacie panely, ktoré sa zobrazujú v rozhraní editora na zobrazenie dodatočných informácií, vloženie externého obsahu alebo poskytnutie vlastných ovládacích prvkov pre vylepšené pracovné postupy.
card: Vlastné odkazy
Odkazy na úrovni polí, ktoré sa zobrazujú v poliach editora a otvárajú externé aplikácie s kontextovými dátami. Viditeľné len vtedy, keď má pole hodnotu a sú splnené voliteľné podmienky.
card: Farby stĺpcov
Podmienené farby pozadia pre bunky dátovej mriežky na základe výrazov filtra. Používajú sa na všetky stĺpce alebo špecifické stĺpce pre vizuálne zvýraznenie dát.

Kľúčové možnosti
- Špecifické pre entitu — Pripojte prispôsobenia k akejkoľvek dátovej entite
- Kontextovo citlivé — Prístup k informáciám o používateľovi, vybraným záznamom a stavu systému
- Podmienená viditeľnosť — Zobrazenie/skrytie na základe vlastných výrazov filtra
- Citlivé na Sadu zmien a režim iba na čítanie — Rešpektuje systémové režimy a povolenia

Vlastné tlačidlá [badge:Buttons|warning]

Interaktívne tlačidlá, ktoré rozširujú funkčnosť zoznamu dát alebo detailov dát

[try:/customButtons|Spravovať vlastné tlačidlá →|right]

Kľúčové vlastnosti

• Zobrazujú sa v dátových mriežkach vedľa štandardných akčných tlačidiel
• Vykonávajú vlastné akcie na vybraných záznamoch
• Podporujú výber jedného aj viacerých záznamov
• Môžu byť podmienečne zobrazené na základe stavu záznamu
• Rešpektujú obmedzenia Sady zmien a režimu iba na čítanie

Konfiguračné polia

Základné vlastnosti

• name — Popis tlačidla zobrazený používateľom
• entityId — Cieľová entita pre tlačidlo
• icon — Ikona zobrazená na tlačidle
• color — Farebná téma tlačidla

Správanie

• allowMultiple — Či tlačidlo funguje s viacerými vybranými záznamami
• condition — Voliteľný výraz filtra na povolenie/zakázanie tlačidla
• action — Typ akcie: “openUrl” alebo “runAutomation”
• url — Cieľová URL (pre akciu openUrl)
• automation_id — Cieľová automatizácia (pre akciu runAutomation)

Kontrola viditeľnosti

• allowInChangeSet — Zobraziť tlačidlo, keď je Sada zmien aktívna
• allowInReadOnly — Zobraziť tlačidlo v režime iba na čítanie

Typy akcií

openUrl — Akcia Otvoriť URL

Otvorí URL v prehliadači s kontextovými informáciami z používateľského rozhrania. To umožňuje výkonné vlastné integrácie a pripojenia k externým systémom.

Dostupné kontextové premenné:

• {user.id} — ID aktuálneho používateľa
• {user.email} — E-mail aktuálneho používateľa
• {selectedIds} — Zoznam ID vybraných záznamov oddelených čiarkou
• {entityId} — Identifikátor cieľovej entity
• {orgId} — ID aktuálnej organizácie

Príklad URL:

https://external-system.com/api/export?records={selectedIds}&user={user.id}&org={orgId}

runAutomation — Akcia Spustiť automatizáciu

Vykoná preddefinovaný automatizačný pracovný postup na vybraných záznamoch. To umožňuje komplexné spracovanie dát, transformácie a vykonávanie obchodnej logiky.

Možnosti automatizácie:

• Úprava a aktualizácia dát
• Výpočty a transformácie polí
• Integrácia s externými systémami
• Operácie dávkového spracovania
• Vykonávanie spúšťačov pracovného postupu

Príklady použitia:

• Hromadné aktualizácie cien na základe výpočtov nákladov
• Automatická synchronizácia zásob
• Pracovné postupy obohatenia zákazníckych dát
• Generovanie a distribúcia správ

Príklady konfigurácií

Príklad akcie OpenUrl:

{
  "name": "Export to PDF",
  "entityId": "products",
  "icon": "FileText",
  "color": "blue",
  "allowMultiple": true,
  "allowInChangeSet": false,
  "allowInReadOnly": true,
  "condition": "status = 'active'",
  "action": "openUrl",
  "url": "https://export.company.com/pdf?ids={selectedIds}&user={user.id}"
}

Príklad akcie RunAutomation:

{
  "name": "Update Prices",
  "entityId": "products",
  "icon": "euro",
  "color": "green",
  "allowMultiple": true,
  "allowInChangeSet": true,
  "allowInReadOnly": false,
  "condition": "category.code = 'ELEC'",
  "action": "runAutomation",
  "automation_id": "code:bulk-price-update-automation"
}

Vlastné panely [badge:Panely|info]

Rozbaľovacie panely, ktoré rozširujú rozhranie editora

[try:/customPanels|Spravovať vlastné panely→|right]

Kľúčové vlastnosti

• Zobrazujú sa na bočnom paneli editora spolu so štandardnými panelmi
• Rozbaľovacie s koordinovaným správaním rozbalenia/zbalenia
• Môžu zobrazovať vlastný obsah, dáta alebo ovládacie prvky
• Podporujú rôzne umiestnenia (vľavo, vpravo, hore, dole)
• Môžu sa zobrazovať v zobrazení zoznamu, detailnom zobrazení alebo v oboch
• Podpora pre panely nezávislé od dát s možnosťou requiresData
• Rešpektujú obmedzenia sady zmien a režimu iba na čítanie

Konfiguračné polia

Základné vlastnosti

• name — Názov panela zobrazený používateľom
• entityId — Cieľová entita pre panel
• icon — Ikona zobrazená v hlavičke panela
• position — Umiestnenie panela (left, right, top, bottom)
• location — Kde zobraziť panel (list, detail, both)
• size — Veľkosť panela (tiny, small, medium, large)

Obsah a správanie

• action — Typ akcie: “openUrl” alebo “showHtml”
• body — HTML obsah na zobrazenie (pre akciu showHtml)
• url — Cieľová URL (pre akciu openUrl)
• requiresData — Či panel závisí od vybraných dát
• condition — Voliteľný výraz filtra na zobrazenie/skrytie panela

Kontrola viditeľnosti

• allowInChangeSet — Zobraziť panel, keď je aktívna sada zmien
• allowInReadOnly — Zobraziť panel v režime iba na čítanie

Typy akcií

openUrl — Akcia Otvoriť URL

Otvorí URL v prehliadači s kontextovými informáciami z používateľského rozhrania, rovnako ako vlastné tlačidlá. To umožňuje externé integrácie a dynamický obsah na základe aktuálneho kontextu.

Podporuje rovnaké kontextové premenné ako CustomButtons:

• {user.id}, {user.email} — Informácie o aktuálnom používateľovi
• {selectedIds} — ID vybraných záznamov
• {entityId}, {orgId} — Identifikátory kontextu

⚠️ Dôležité: Požiadavky na vkladanie Iframe

Keď je URL načítaná v iframe v rámci aplikácie, cieľový server musí byť správne nakonfigurovaný:
- `X-Frame-Options: ALLOW-FROM {HOSTNAME}` — Povoliť vkladanie z vášho servera
- `Content-Security-Policy: frame-ancestors 'self' {HOSTNAME}` — Moderná alternatíva CSP
- HTTPS je vyžadované, ak rodičovská aplikácia používa HTTPS (politika zmiešaného obsahu)
- Súbory cookie nemusia správne fungovať kvôli obmedzeniam SameSite v iframe s rôznym pôvodom

showHtml — Akcia Zobraziť HTML

Zobrazí obsah z poľa body ako HTML v rámci panela. To umožňuje bohatý formátovaný obsah priamo v rozhraní.

Obmedzenia HTML:

• Z bezpečnostných dôvodov je podporovaná obmedzená podmnožina HTML
• JavaScript nie je povolený
• Externé značky skriptov a obsluhy udalostí sú filtrované
• Podporované sú bezpečné značky ako nadpisy, odseky, zoznamy a základné formátovanie

Príklad HTML tela:

<h3>Product Information</h3><p>Additional details about this product...</p><ul><li>Feature 1</li><li>Feature 2</li></ul>

Dátové závislosti

Vlastnosť requiresData

Určuje, či panel závisí od aktuálne vybraných dát. Ak je nastavená na false, panel sa môže zobraziť aj vtedy, keď nie sú vybrané žiadne dáta, čím sa stáva nezávislým od aktuálneho stavu výberu.

• requiresData: true — Panel sa zobrazí iba vtedy, keď sú vybrané dáta. Budú dostupné kontextové premenné ako selectedIds.
• requiresData: false — Panel sa môže zobraziť nezávisle. Užitočné pre text pomoci, statické informácie alebo globálne akcie.

Príklady konfigurácií

Príklad akcie ShowHtml:

{
  "name": "Product Help",
  "entityId": "products",
  "icon": "HelpCircle",
  "position": "right",
  "location": "detail",
  "size": "small",
  "requiresData": false,
  "allowInChangeSet": true,
  "allowInReadOnly": true,
  "action": "showHtml",
  "body": "<h3>Product Guidelines</h3><p>Follow these steps when editing products...</p>"
}

Príklad akcie OpenUrl:

{
  "name": "Product Analytics",
  "entityId": "products",
  "icon": "BarChart",
  "position": "right",
  "location": "detail",
  "size": "medium",
  "requiresData": true,
  "allowInChangeSet": true,
  "allowInReadOnly": true,
  "action": "openUrl",
  "url": "https://analytics.company.com/product?id={selectedIds}&user={user.id}"
}

Kontrola viditeľnosti

Pochopenie, kedy sa prispôsobenia zobrazujú alebo skrývajú

Systémové stavy

Režim sady zmien

Keď je aktívna sada zmien, viditeľné sú iba prispôsobenia s allowInChangeSet: true.

Režim iba na čítanie

Keď je aktívny režim iba na čítanie, viditeľné sú iba prispôsobenia s allowInReadOnly: true.

Matica viditeľnosti

Úvahy o vkladaní do Iframe

Dôležité technické požiadavky a obmedzenia pri vkladaní externého obsahu

⚠️ Kritické požiadavky na konfiguráciu servera

Externé URL adresy načítané vo vlastných paneloch musia byť špeciálne navrhnuté pre vkladanie do iframe. Cieľový server MUSÍ poskytovať správne hlavičky zabezpečenia HTTP, aby umožnil vkladanie.

Požadované hlavičky HTTP

Kritické — Hlavička X-Frame-Options:

X-Frame-Options: ALLOW-FROM {HOSTNAME}

Použite svoju skutočnú doménu aplikácie. Táto hlavička umožňuje vašej aplikácii vložiť externý obsah do iframe.

Moderná alternatíva — Zásady zabezpečenia obsahu (CSP):

Content-Security-Policy: frame-ancestors 'self' {HOSTNAME}

Moderné prehliadače uprednostňujú CSP pred X-Frame-Options. Táto direktíva riadi, ktoré domény môžu vložiť stránku do rámcov. Nahraďte ju svojou skutočnou doménou aplikácie.

Odporúčané — Dodatočné hlavičky zabezpečenia:

X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin

Dodatočné hlavičky zabezpečenia, ktoré zlepšujú bezpečnostnú pozíciu vloženého obsahu.

Bežné problémy a riešenia s Iframe

Zmiešaný obsah HTTPS

Problém: Prehliadač blokuje obsah HTTP, keď nadradená stránka používa HTTPS

Riešenie: Zabezpečte, aby všetky externé URL adresy používali protokol HTTPS. Moderné prehliadače vyžadujú zabezpečené pripojenia pre vkladanie do iframe.

✅ https://external-app.com/panel
❌ http://external-app.com/panel

Problémy s cookies/reláciami

Problém: Autentifikačné cookies nefungujú v iframe s rôznym pôvodom

Riešenie: Použite SameSite=None; Secure pre cookies, ktoré musia fungovať v iframe, alebo implementujte autentifikáciu založenú na tokenoch prostredníctvom parametrov URL.

Skripty zabraňujúce vkladaniu do rámca

Problém: Kód JavaScript zabraňuje vkladaniu do iframe

Riešenie: Odstráňte alebo upravte skripty, ktoré kontrolujú window.top !== window.self alebo podobnú logiku zabraňujúcu vkladaniu do rámca.

Responzívny dizajn

Problém: Obsah sa zle prispôsobuje obmedzeniam iframe

Riešenie: Navrhnite rozloženia špecifické pre iframe alebo použite responzívne CSS, ktoré dobre funguje v obmedzených priestoroch. Zvážte nastavenia veľkosti panelu (veľmi malé, malé, stredné, veľké).

Komunikácia

Problém: Obmedzená komunikácia medzi iframe a nadradeným prvkom

Riešenie: Použite API postMessage pre bezpečnú komunikáciu medzi rôznymi pôvodmi, ak vložený obsah potrebuje interagovať s nadradenou aplikáciou.

Príklady konfigurácie servera

📝 Konfigurácia domény — nahraďte {HOSTNAME} vašou skutočnou doménou aplikácie.

Apache (.htaccess):

Header always append X-Frame-Options "ALLOW-FROM {HOSTNAME}"
Header always set Content-Security-Policy "frame-ancestors 'self' {HOSTNAME}"
Header always set X-Content-Type-Options "nosniff"
Header always set X-XSS-Protection "1; mode=block"

Nginx:

add_header X-Frame-Options "ALLOW-FROM {HOSTNAME}" always;
add_header Content-Security-Policy "frame-ancestors 'self' {HOSTNAME}" always;
add_header X-Content-Type-Options "nosniff" always;
add_header X-XSS-Protection "1; mode=block" always;

Node.js/Express:

app.use((req, res, next) => {
  res.setHeader('X-Frame-Options', 'ALLOW-FROM {HOSTNAME}');
  res.setHeader('Content-Security-Policy', "frame-ancestors 'self' {HOSTNAME}");
  res.setHeader('X-Content-Type-Options', 'nosniff');
  res.setHeader('X-XSS-Protection', '1; mode=block');
  next();
});

💡 Testovanie kompatibility Iframe: Pred nasadením otestujte svoju externú URL adresu vytvorením jednoduchého súboru HTML s iframe, ktorý odkazuje na váš obsah. Otvorte ho v prehliadači a skontrolujte konzolu pre vývojárov, či neobsahuje chyby súvisiace s rámcom.

Vlastné odkazy [badge:Odkazy|info]

Odkazy na úrovni poľa, ktoré sa zobrazujú v poliach editora a otvárajú externé aplikácie s kontextovými dátami

[try:/customLinks|Spravovať vlastné odkazy →|right]

Na čo slúžia vlastné odkazy?

Vlastné odkazy vám umožňujú pridať kontextové odkazy na konkrétne polia v rozhraní editora. Tieto odkazy môžu otvárať externé aplikácie, vyhľadávať v databázach alebo navigovať na súvisiace systémy, pričom všetky sú naplnené dátami z aktuálneho záznamu.

• Pridajte odkazy priamo na štítky polí, ikony vedľa vstupných polí alebo tlačidlá pod poľami
• Otvárajte externé aplikácie s kontextom z aktuálneho záznamu (napr. meno, ID, informácie o používateľovi)
• Odkazy sú viditeľné iba vtedy, keď má vybrané pole hodnotu
• Podpora podmieneného zobrazenia na základe výrazov filtra
• Rešpektujú obmedzenia sady zmien a režimu iba na čítanie

Bežné prípady použitia

🔗 Odkaz na systém CRM

Pridajte odkaz na pole mena zákazníka, ktorý otvorí záznam zákazníka vo vašom systéme CRM.

🔍 Vyhľadať v databáze EAN

Pridajte odkaz na pole EAN na vyhľadanie informácií o produkte v externej databáze.

🛒 Otvoriť v e-commerce

Pridajte odkaz na zobrazenie produktu na frontende vašej e-commerce platformy.

Pozície odkazov

Vlastné odkazy sa môžu zobraziť v troch rôznych pozíciách vzhľadom na pole:

Pozícia štítku

Štítok poľa sa stane klikateľným odkazom. Po kliknutí sa otvorí externá URL adresa. To je užitočné na to, aby bol celý štítok interaktívny.

Pozícia ikony

Malé tlačidlo s ikonou sa zobrazí za vstupným poľom. Viaceré odkazy s ikonami sa môžu zobraziť vedľa seba. To je užitočné na poskytnutie rýchleho prístupu bez zmeny vzhľadu poľa.

Pozícia pod

Odkaz sa zobrazí ako malý textový odkaz pod vstupným poľom. Viacero odkazov sa môže zalomiť do viacerých riadkov. To je užitočné pre sekundárne akcie, ktoré nepotrebujú okamžitú viditeľnosť.

Konfiguračné polia

Základné vlastnosti

• name — Text odkazu zobrazený používateľom
• entityId — Cieľová entita pre odkaz
• columns — Pole ID polí, kde sa má odkaz zobraziť
• icon — Ikona zobrazená s odkazom (pre pozície ikony a pod)
• position — Kde zobraziť odkaz: “label”, “icon” alebo “under”

Konfigurácia akcie

• action — Typ akcie (momentálne je podporovaná iba “openUrl”)
• url — Šablóna cieľovej URL s premennými zástupnými symbolmi

Podmienené zobrazenie

• condition — Voliteľný výraz filtra na zobrazenie/skrytie odkazu
• allowInChangeSet — Zobraziť odkaz, keď je sada zmien aktívna
• allowInReadOnly — Zobraziť odkaz v režime iba na čítanie

Premenné šablóny URL

URL môže obsahovať zástupné symboly, ktoré sa po kliknutí na odkaz nahradia skutočnými údajmi:

Dáta záznamu

• {data.fieldName} — Hodnota ľubovoľného poľa z aktuálneho záznamu (napr. {data.name}, {data.ean})
• {objectIds} — ID aktuálneho záznamu
• {entityId} — Identifikátor entity

Informácie o používateľovi

• {user.id} — ID aktuálneho používateľa
• {user.username} — Používateľské meno aktuálneho používateľa
• {user.email} — E-mailová adresa aktuálneho používateľa

Systémové informácie

• {language} — Kód aktuálneho jazyka používateľského rozhrania
• {orgId} — ID aktuálnej organizácie

Príklad šablóny URL:

https://crm.example.com/customer?name={data.name}&email={data.email}&lang={language}&user={user.username}

Pravidlá viditeľnosti

⚠️ Dôležité: Požiadavka na hodnotu poľa

Vlastné odkazy sú **viditeľné iba vtedy, keď má priradené pole hodnotu**. Ak je pole prázdne (null, nedefinované alebo prázdny reťazec), odkaz sa nezobrazí, aj keď sú splnené všetky ostatné podmienky.

Príklad podmieneného zobrazenia

Môžete použiť výrazy filtra na zobrazenie odkazov iba vtedy, keď sú splnené špecifické podmienky:

platform.code = 'shoptet'

Tento odkaz sa zobrazí iba vtedy, keď je Produkt na platforme Shoptet.

Príklad konfigurácie

Kompletný príklad vlastného odkazu:

{
  "name": "View in CRM",
  "entityId": "products",
  "columns": ["name", "ean"],
  "icon": "ExternalLink",
  "position": "icon",
  "action": "openUrl",
  "url": "https://crm.example.com/product?ean={data.ean}&name={data.name}&user={user.email}",
  "condition": "platform.code = 'shoptet' AND status = 'active'",
  "allowInChangeSet": false,
  "allowInReadOnly": true,
  "disabled": false
}

Tento odkaz sa zobrazí ako ikona vedľa polí “name” a “ean”, keď je Produkt na platforme Shoptet, je aktívny a pole má hodnotu. Otvorí CRM s EAN Produktu, názvom a e-mailom aktuálneho používateľa.

💡 Osvedčené postupy
- Použite pozíciu ikony pre často prístupné odkazy, aby bolo používateľské rozhranie čisté
- Použite pozíciu štítku, keď je odkaz primárnou akciou pre dané pole
- Použite pozíciu pod pre sekundárne alebo menej časté akcie
- Názvy odkazov udržujte krátke a popisné
- Otestujte šablóny URL s rôznymi údajmi záznamov, aby ste sa uistili, že fungujú správne
- Použite podmienky na zobrazenie odkazov iba vtedy, keď sú relevantné
- Zvážte použitie `allowInReadOnly=true` pre odkazy iba na zobrazenie

Farby stĺpcov [badge:Colours|success]

Podmienené farby pozadia pre bunky dátovej mriežky

[try:/columnColours|Spravovať vlastné farby →|right]

Kľúčové vlastnosti

• Použite farby pozadia na bunky dátovej mriežky na základe podmienok filtra
• Zacieľte na všetky stĺpce alebo konkrétne stĺpce v entite
• Pre každú entitu je možné definovať viacero pravidiel farieb
• Vyhodnocované v reálnom čase, keď sa menia dáta
• Skvelé pre vizuálne zvýraznenie dôležitých dát (napr. oneskorené položky, úrovne zásob)

Konfiguračné polia

Základné vlastnosti

• name — Popisný názov pre pravidlo farby
• entityId — Cieľová entita pre pravidlo farby
• colour — Farba pozadia (hex formát, napr. #ff0000)
• description — Voliteľný popis pravidla

Filtrovanie

• filter — Podmienka podobná SQL, ktorá určuje, kedy sa má farba použiť
  • Príklad: status = 'overdue' AND priority = 'high'

Cielenie stĺpcov

• allColumns — Použiť farbu na všetky stĺpce v riadku
• columns — Pole konkrétnych názvov stĺpcov na zafarbenie (ak je allColumns false)
  • Príklad: ["price", "discount", "total"]

Ovládanie

• disabled — Dočasne zakázať pravidlo farby bez jeho odstránenia

Prípady použitia

Zvýraznenie stavu

Zvýraznite riadky na základe hodnôt stavu. Napríklad, zobrazte oneskorené úlohy červenou, dokončené úlohy zelenou a prebiehajúce úlohy žltou.

Príklad konfigurácie:

Entity: tasks
Filter: status = 'overdue'
Colour: #ffcccc (light red)
All Columns: true

Upozornenia na prahové hodnoty

Zvýraznite konkrétne stĺpce, keď hodnoty prekročia prahové hodnoty. Napríklad, zvýraznite stĺpec zásob červenou, keď inventár klesne pod minimálne úrovne.

Príklad konfigurácie:

Entity: products
Filter: stock < minimumStock
Colour: #ff6666 (red)
All Columns: false
Columns: ["stock"]

Vizualizácia priority

Použite rôzne farby pre rôzne úrovne priority, aby ste pomohli používateľom rýchlo identifikovať položky s vysokou prioritou vo veľkých súboroch dát.

Príklad konfigurácie:

Entity: orders
Filter: priority = 'urgent'
Colour: #ffe6e6 (light red)
All Columns: true

Finančné ukazovatele

Zvýraznite finančné dáta na základe podmienok, ako sú záporné zostatky, neuhradené platby alebo ziskové marže pod cieľmi.

Príklad konfigurácie:

Entity: invoices
Filter: balance < 0
Colour: #fff3cd (light yellow)
All Columns: false
Columns: ["balance", "status"]

Správanie a priorita

Poradie vyhodnocovania

Pravidlá farieb stĺpcov sa vyhodnocujú pre každý riadok v mriežke. Ak sa viaceré pravidlá zhodujú s riadkom, použije sa posledné zodpovedajúce pravidlo (v poradí, v akom sa objavujú v databáze).

Úvahy o výkone

Farby stĺpcov sa vyhodnocujú v reálnom čase, ako sa menia dáta. Udržujte výrazy filtra jednoduché a efektívne pre najlepší výkon, najmä pri veľkých súboroch dát.

Deaktivované pravidlá

Použite pole disabled na dočasné vypnutie pravidiel farieb bez ich odstránenia. To je užitočné pre testovanie alebo sezónne úpravy.

💡 Osvedčené postupy
- Používajte jemné farby, ktoré nenarúšajú čitateľnosť textu
- Obmedzte počet farebných pravidiel na entitu, aby ste predišli vizuálnemu neporiadku
- Testujte farebné kombinácie pre prístupnosť (kontrastné pomery)
- Dajte pravidlám popisné názvy, aby ste ich neskôr ľahšie udržiavali
- Zvážte preferencie používateľov – niektorí používatelia môžu byť farboslepí

Poznámky k implementácii

Výkon

Prispôsobenia sa efektívne načítavajú a filtrujú pomocou React hookov so správnou správou závislostí a atomickými aktualizáciami stavu, aby sa predišlo blikaniu používateľského rozhrania.

Bezpečnosť

Všetky prispôsobenia rešpektujú základný systém povolení a kontroly prístupu k entitám. Používatelia môžu vidieť a interagovať iba s prispôsobeniami pre entity, ku ktorým majú prístup.