Jetstack
Zpět na blog Blog

Widgety na domovské stránce — přizpůsobená úvodní obrazovka

Publikováno 1. února 2023

Technická ilustrace k článku Jetstacku

Většina uživatelů začíná každou práci na úvodní obrazovce. Je to první, co uvidí, a jediná plocha, která jim den co den nastavuje tón celé aplikace. Statický uvítací banner, který řekne jen „Dobrý den“ a nic víc, tuhle pozornost promarní. Dashboard, který zohledňuje roli uživatele, ji naopak využije: operátorovi ukáže dnešní úkoly a nepřečtené zprávy, účetní faktury po splatnosti a tržby za tento měsíc, obchodnímu manažerovi stav pipeline a nové příležitosti z tohoto týdne. Právě tohle přizpůsobení umožňují widgety na domovské stránce — bez jakéhokoli vývoje na míru pro každou roli.

Widget je blok, který lze na úvodní obrazovku umístit. Některé widgety jsou postavené v Canvasu, takže vznikají s celou vyjadřovací silou tvorby stránek v Canvasu — napojení na data, dotazy, iterátory, podmíněné zobrazení, celá paleta. Jiné jsou předpřipravené — zkratky pro běžné situace, které nové prostředí nasadí bez nastavování. Obvyklé je obojí dohromady: pár standardních widgetů pro běžné potřeby a několik widgetů z Canvasu ušitých na míru datům daného prostředí.

Viditelnost podle role je to, co z dashboardu dělá opravdu užitečnou plochu. Widgety lze přiřadit jedné nebo více rolím a uživatel vidí ty, které jeho role dovolují. Obchodníkovi se na domovské stránce ukážou karty obchodů, graf pipeline a seznam posledních zmínek. Účetní faktury po splatnosti, přehled cash flow a nové zákazníky za měsíc. Vedoucímu podpory otevřené tikety podle stáří, graf délky fronty a dnešní přítomnost týmu. Stejná úvodní obrazovka, stejná komponenta stránky, a přitom čtyři úplně odlišné zážitky — protože widgety respektují přiřazení k rolím.

Uspořádání podle uživatele dává jednotlivým lidem trochu prostoru pro vlastní úpravy v rámci toho, co jim role dovoluje. Které widgety vidí, není na nich — to určuje role — ale pořadí a velikost jednotlivých widgetů si upravit mohou. Režim úprav dashboardu se zapne z horní lišty; uživatel widgety přetahuje, mění jejich velikost a uloží je; při příštím otevření domovské stránky je uspořádání jeho. Podstatné je to omezení: uživatel nemůže přidat widgety mimo rámec své role, protože by tím obešel model oprávnění. V rámci svého rozsahu si ale dashboard přizpůsobí tomu, jak doopravdy pracuje.

Režim úprav dashboardu pro administrátory je obdobná funkce s jiným publikem. Administrátoři nastavují, které widgety jsou pro které role dostupné, určují jejich výchozí rozvržení a mohou si prohlédnout, jak dashboard vypadá pro každou roli. To je hlavní místo pro návrh úvodní obrazovky podle rolí — ne roztroušené konfigurační soubory, ale jeden editor, kde jsou volby i jejich důsledky vidět pohromadě.

Widgety postavené v Canvasu jsou zdrojem té největší volnosti. Protože widget lze poskládat ze stejných bloků jako kteroukoli jinou stránku v Canvasu, jediným skutečným omezením je prostor, který má widget vyhrazený. Souhrnné karty s počty a trendy. Kompaktní tabulkové pohledy na nejnaléhavější záznamy. Iterátory nad vlastními úkoly uživatele. Grafy, když malá vizualizace rychle něco ukáže. Filtry, které ovlivní, co zobrazuje zbytek dashboardu. Kontrolní seznam pro nové uživatele s položkami, které mizí, jak je uživatel plní. Pokud si dokážete představit malý, soustředěný kousek rozhraní dashboardu, Canvas ho postaví.

Výchozí widgety podle role jsou drobnost, díky které jsou noví uživatelé užiteční hned první den. Když uživatel dostane roli, jeho dashboard rovnou obsahuje výchozí sadu widgetů dané role. Nekouká na prázdnou obrazovku a neláme si hlavu s nastavováním; vidí stejný dashboard, jaký používají jeho kolegové ve stejné roli. Odtud si může vše přizpůsobit, ale výchozí bod je už rozumný.

Vlastní prvky v hlavičce u jednotlivých widgetů řeší okrajové případy, kdy widget potřebuje vlastní CSS nebo skripty. Složitější vizualizace, vložený externí nástroj, specializovaná interaktivní komponenta — to všechno občas potřebuje doplňky v hlavičce, které by neměly platit pro celou aplikaci. Prvky hlavičky omezené na jeden widget umožní takovou práci provést čistě, v rámci bezpečnostních hranic platformy (seznam povolených prvků pro formátovaný text a pravidla sandboxu v Canvasu).

Widgety a oprávnění fungují stejně jako oprávnění všude jinde: pokud by widget zobrazil data, která aktuální uživatel nemá vidět, prostě se nezobrazí. Widget s fakturami po splatnosti ukáže jen faktury, ke kterým má prohlížející přístup. Widget se seznamem otevřených úkolů jen úkoly přiřazené lidem, které prohlížející vidí. Definice widgetu o oprávněních vědět nemusí; vynucují je dotazy pod ním a widget to vynucení automaticky přebírá. Právě proto je bezpečné postavit stejnou definici widgetu před uživatele s různým přístupem — každý stejně uvidí jen data, na která má nárok.

U prostředí, která na domovské stránce používají dlaždicovou navigaci — jednoduchou mřížku zkratek do modulů pro uživatele, kteří svou práci vnímají jako „ve které části aplikace dnes jsem?“ — widgety fungují přirozeně vedle ní. Dlaždice zajišťují navigaci, widgety souhrny a akce. Smíšená domovská stránka s obojím sedne spoustě publik: nahoře řada dlaždic pro přeskok do jednotlivých oblastí, pod nimi mřížka widgetů s informacemi na první pohled, které uživatel chce vidět, než někam přejde.

Ukázka z praxe: „dnešní otevřené úkoly“. Widget v Canvasu napojený na uložený dotaz pro otevřené úkoly uživatele se splatností dnes nebo dříve, který každý úkol vykreslí jako kompaktní kartu s názvem, termínem a tlačítkem rychlé akce pro označení za hotové. Jeden dotaz, jedna šablona nasazená na domovskou obrazovku každého uživatele. Každý vidí jen své úkoly, protože se dotaz odkazuje na currentUser. Tlačítko rychlé akce spustí automatizaci, která úkol upraví. Po dokončení akce se widget překreslí a úkol ze seznamu zmizí. Žádný kód na míru; celé je to jen konfigurace.

Pro řadu prostředí jsou widgety na domovské stránce tím, co posune platformu od „nástroje, který používáme, když ho potřebujeme“ k „místu, kde začíná den“. A na tom rámování záleží. Dobrá domovská stránka udrží uživatele v aplikaci, místo aby odbíhali kontrolovat, co se děje ve třech dalších systémech. Chceme, aby platforma tím přehledem raději byla, než aby k němu lidi odkazovala.