Deklarativní úprava vykreslování sloupců v SharePoint

Microsoft v říjnu začal rolovat funkcionalitu „jednoduché“ úpravy vykreslování sloupců v moderních seznamech zvanou „Column formatter“. Jednoduché je záměrně v uvozovkách, neboť se vše může zvrtnout a výsledný JSON vypadá hrozivě. Nicméně výsledek stojí za to.

V článku budeme pracovat se seznamem se dvěma typy sloupců – Číslo a Ano/Ne, na nichž si demonstrujeme základní formátování a podmínky.  Podotýkám, že tato funkcionalita je dostupná jen v moderních seznamech, ve starém vzhledu se úprava sloupce neprojeví.

Začínáme

Jak jsem již zmínil výše, úprava formátování se definuje v JSON. Pro tvorbu můžete použít libovolný editor, osobně doporučuji využít Visual Studio Code. Tento editor je dostupný zdarma na všech platformách (Windows, Linux i Mac).

Pro zjednodušení práce bylo vytvořeno schéma, která napovídá pomocí IntelliSense. Do prázdného objektu postačí přidat $schema s příslušnou URL adresou. Schéma je určeno jen pro usnadnění vývoje, pro nasazení na SharePoint není potřeba.

Nastavení sloupce

Poté, co si vytvoříme sloupec, můžeme přímo z pohledu upravit jeho formátování.

JSON, který vytvoříme, následně vložíme do textového pole a změny uložíme. Ještě předtím je ale možné nechat si vykreslit náhled, který v reálném čase aplikuje změny na aktuálně otevřený pohled.

Základní formátování

Teď už víte, jak vytvořený JSON aplikovat na sloupec a začneme s formátováním. Tím nejjednodušším je základní formátování, které sice na první pohled nic neudělá, ale funguje, a to tak, že vykreslí hodnotu ve sloupci. Nastavením @currentField do txtContent vyrenderujeme obsah sloupce.

Dojde-li k chybě při vykreslování a nastavíte-li debugMode na true, zobrazí se vám detailní chybová hláška přímo ve sloupci.

Podmínky

Aby nebylo vše tak jednoduché, můžeme stanovit podmínky, při jejichž splnění se použijí různé typy formátování. V následující ukázce pracujeme s číslem a stanovujeme 3 prahové hodnoty, resp. podmínky. Je nutné vedět, že zpracování podmínek probíhá ve stejném pořadí, jaké jsme definovali v JSON. Jakmile je tedy podmínka vyhodnocena kladně, ukončí se proces a další se již nevyhodnocuje. Pokud bychom pořadí podmínek v této ukázce otočili, číslo by se nikdy neobarvilo na oranžovou resp. červenou barvu a bylo by vždy zelené.

Abychom se oprostili od jednoduchého čísla nebo textu, ukážeme si v další demonstraci, jak funguje např. pole typu Ano/Ne. V tomto případě pracujeme s datovým typem boolean. Díky tomu podmínka funguje na všech jazykových mutacích Sharepointu.

Z následující ukázky je patrné, že nemusíte vykreslovat jen hodnotu, která je ve sloupci uložena, ale lze zobrazit např. i ikonu. Tyto ikony jsou součástí Office UI Fabric front-end frameworku použitého na moderních stránkách SharePoint a také na mnoha dalších webech.

V případě, že je potřeba pracovat se sloupcem typu Vyhledávání na webu (Lookup field), musí se mírně upravit načítání hodnoty ze sloupce.

Závěr

Kladným shledávám fakt, že si konečně každý Power User může upravit vykreslování jednotlivých sloupců, aniž by musel vybírat lokaci na SharePointu, kam uložit Javascript a ten pak pomocí PowerShell registrovat jako JSLink.

Na druhou stranu, ne všechny typy sloupců jsou podporovány. Dle mého názoru je škoda zejména následujících typů sloupců:

  • Spravovaná metadata (Managed Metadata)
  • Vypočítaná hodnota (Calculated)

Další ukázky: https://github.com/SharePoint/sp-dev-column-formatting

Dostupné ikony: https://developer.microsoft.com/en-us/fabric#/styles/icons

Detailní popis syntaxe: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#detailed-syntax-reference

Napsat komentář

Tato stránka používá Akismet k omezení spamu. Podívejte se, jak vaše data z komentářů zpracováváme..