Jetstack
Zpět na blog Blog

Tvorba stránek v Canvasu — vlastní stránky bez psaní šablon

Publikováno 1. května 2023

Technická ilustrace k článku Jetstacku

Výchozí pohledy — tabulka, kanban, kalendář, seznam — pokryjí většinu každodenní práce. Uživatelé v aplikaci hlavně prohlížejí záznamy, upravují je a posouvají mezi stavy, a přesně na to jsou výchozí pohledy stavěné. V každém reálném nasazení se ale objeví stránky, které se do téhle šablony nevejdou: úvodní dashboard shrnující stav firmy, zákaznický portál, který externím uživatelům ukáže jen vybraný výřez platformy, tisková faktura s přísnými pravidly vizuálního stylu, vícekrokový průvodce registrací nebo report kombinující grafy, tabulky a doprovodný text. Postavit je ručně znamená psát šablony — tedy sáhnout do kódu a zapojit vývojáře. Canvas umožňuje sestavit je vizuálně.

Stránka v Canvasu je strom bloků. Paleta obsahuje běžné stavební prvky — text, obrázky, oddělovače, tlačítka, odkazy, záložky — a k tomu i bloky pracující s daty, díky nimž je Canvas víc než jen nástroj na rozvržení: blok formulář vykreslí formulář pro objekt, blok tabulka zobrazí pohled na dotaz a blok iterátor zopakuje vnořenou strukturu nad seznamem. Bloky lze libovolně vnořovat — záložka obsahuje tabulku, tabulka iterátor a iterátor vlastní rozvržení karet — takže strom bloků na stránce odpovídá struktuře obsahu, který má stránka zachytit.

Každý blok můžete napojit na datový kontext: na konkrétní dotaz, konkrétní objekt nebo na předanou proměnnou. Právě tímto napojením stránka ví, s jakými daty pracuje. Tabulka napojená na dotaz otevřené obchody s vysokou hodnotou zůstává s tímto dotazem synchronizovaná — úpravy dotazu se promítnou do každé stránky, která ho vykresluje. Iterátor nad objednávkami aktuálního zákazníka projde jeho objednávky ve chvíli, kdy se stránka pro daného zákazníka otevře. Napojení se zapisuje stejně jako filtry a výrazy jinde v platformě, takže tuhle dovednost využijete i tady.

Podmíněné zobrazení nechává bloky objevit se, nebo zmizet podle výrazů. Upozornění na dluh po splatnosti se ukáže jen tehdy, když je zákazník skutečně po splatnosti. Výzva k přechodu na vyšší tarif se zobrazí jen zákazníkům na základním plánu. Sekce s interními poznámkami jen uživatelům v roli podpory. Podmínky se vyhodnocují při vykreslení a znovu se přepočítají, když se změní kontext stránky, takže rozvržení vždy odpovídá tomu, co aktuální uživatel a data opravňují zobrazit.

Dynamické oblasti promění statické stránky v interaktivní. Dynamická oblast je zóna, která se sama překreslí, když se změní její vstupy nebo když nastane vnější událost. Ovládací filtr v horní části dashboardu spustí překreslení grafů pod ním, aniž by se znovu načítala celá stránka. Tlačítko, které spustí automatizaci, upraví záznam a okolní panely změnu ihned zohlední. Na stránkách, kde jde právě o interaktivitu, stojí dynamické oblasti za vším.

Iterátory odvedou hlavní práci tam, kde se struktura opakuje. Iterátor napojený na dotaz vykreslí své vnitřní bloky jednou pro každý záznam — takhle vznikají katalogy produktů, portfoliové mřížky, seznamy členů týmu i jakákoli další stránka ve stylu „seznam věcí v pěkném rozvržení“. Iterátory se dají napojit na dotazy, na proměnné se seznamem i na průběžně přijímané odpovědi ve formátu JSON z externích systémů, takže pokryjí data z prostředí i živá data z integrací.

Vstupní parametry umožňují, aby se stránka v Canvasu chovala jako funkce. Stránka může přijmout parametry z URL, z odeslaného formuláře nebo od toho, kdo ji otevřel. Napojení a podmínky na stránce se na tyto parametry odkazují stejně, jako se automatizace odkazuje na své argumenty. Jedna stránka pak může sloužit jako obecná šablona pro mnoho situací: detail zákazníka podle jeho ID, report kampaně podle rozsahu dat nebo úvodní stránka portálu podle organizace aktuálního externího uživatele.

Napojení akcí na tlačítka a odkazy propojuje zobrazení s chováním. Tlačítko na stránce v Canvasu může spustit automatizaci — s aktuálním kontextem stránky předaným jako argumenty — nebo přejít na jinou adresu, odeslat formulář či provést kteroukoli z akcí, které nabízí tvůrce automatizací. Právě tím se z Canvasu stává nejen plocha pro zobrazení, ale funkční stránka aplikace: uživatelé pracují s tím, co vidí, a platforma reaguje spuštěním automatizací, které realizují firemní logiku daného prostředí.

Vlastní HTML v izolovaném režimu (sandbox) je pojistkou pro případy, kdy vestavěné bloky přesně nepokryjí, co stránka potřebuje. Vlastní HTML se řídí stejným seznamem povolených prvků, jaký hlídá čištění obsahu jinde v platformě — co je povolené na jednom místě, je povolené i tady a nic nebezpečného neprojde. Vlastní hlavičky se styly a skripty na úrovni stránky umožňují přidat CSS a JavaScript specifický pro danou stránku, a to v rámci bezpečnostního modelu platformy.

Autorskou práci usnadňuje několik drobností. Kopírování a vkládání bloků (včetně celých vnořených podstromů) urychlí opakované úpravy — navrhnete jednu kartu, zkopírujete ji a kopii použijete jako základ pro další. Podpora tmavého režimu zajistí, že se bloky správně vykreslí v obou motivech bez nastavování u každého z nich. Dědičnost šablon umožňuje, aby základní rozvržení definovalo sdílený rámec mnoha stránek a jednotlivé stránky měnily jen to, co potřebují.

Nabízí se otázka, kdy sáhnout po Canvasu a kdy si vystačíte se stávajícími rozvrženími pohledů. Hrubé vodítko: pokud chcete data existujícího pohledu s vlastním rámcem okolo — lištou tlačítek, pruhem filtrů, trochou obsahu navíc — jsou rozvržení pohledů lehčí volbou. Pokud chcete stránku, která skládá několik různých částí obsahu do něčeho na míru, je správnou odpovědí Canvas. Oba nástroje mohou fungovat vedle sebe ve stejném prostředí; jde jen o to zvolit přiměřenou míru úsilí pro danou stránku, ne se jednou provždy upsat jedné cestě.

Formulářům v Canvasu — té části stejného nástroje, která staví formuláře — se věnuje samostatný článek, protože si pozornost zaslouží. Vlastní článek mají i dlaždice (widgety) na domovské stránce, tedy menší kousky Canvasu, které žijí na dashboardu. Spolu s jazykem výrazů a automatizacemi je Canvas tím, co nasazení dovede od „evidujeme tyhle věci“ až po „tohle je portál na míru pro naše zákazníky“, a to bez kódu bokem. To je hlavní příslib platformy a Canvas je jedno z míst, kde je nejvíc vidět.