Jetstack
Zpět na blog Blog

Formuláře v Canvasu – plně vlastní formuláře uvnitř stránek Canvasu

Publikováno 1. července 2023

Technická ilustrace k článku Jetstacku

Tvůrce formulářů zvládá běžný případ elegantně: formulář navázaný na jeden záznam jednoho typu, který z jeho vlastností vytvoří přehledné zakládání nebo úpravu. Tak vypadá devět z deseti běžných formulářů. Ta zbývající desetina se ale úplně nevejde. Vícekrokový průvodce úvodním nastavením, který postupně zapisuje do několika typů. Anketa, která sbírá názory, aniž by zakládala trvalý záznam. Kontaktní formulář na veřejné marketingové stránce. Úvěrová kalkulačka, která spočítá nabídku, ale nic neukládá. Formulář zpětné vazby, který kombinuje vlastnosti záznamu se samostatnými vstupními poli. Přesně pro tohle jsou formuláře v Canvasu.

Formulář v Canvasu je blok, který vložíte do stránky v Canvasu. Jako každý jiný blok Canvasu žije uvnitř rozvržení stránky – vedle textu, obrázků, záložek, tabulek či iterátorů – a lze ho umístit, nastavit velikost a nastylovat tak, aby zapadl do okolního návrhu. Na rozdíl od běžného formuláře není vázaný na vlastnosti jediného typu. Umí kombinovat pole z libovolného počtu typů s vlastními poli, která existují jen v Canvasu a neodpovídají žádné vlastnosti žádného záznamu. Právě tahle kombinace dělá z formulářů v Canvasu nástroj dost pružný na případy, které formulář vázaný na objekt nezvládne.

Uvnitř bloku se samozřejmě počítá s vlastním rozvržením. Pole rozmístíte ručně – vedle sebe, do skupin, s popisky v řádku, s vlastními rozestupy – místo abyste byli svázaní se sekvenčním tokem standardního formuláře. U formulářů, které jsou hlavní náplní stránky (průvodci nastavením, kalkulačky, veřejná odesílání), právě tahle volnost způsobí, že formulář vypadá, jako by byl pro stránku navržený, ne do ní narychlo vložený.

Formuláře v Canvasu si nesou kontext ze stránky, na které jsou. Když se stránka v Canvasu otevře pro konkrétního zákazníka, formulář o tomto zákazníkovi ví a může podle něj předvyplnit svá pole. Když je formulář uvnitř iterátoru, má k dispozici položku každého průchodu. A když se předaly parametry přes URL, dostane i je. Napojení probíhá stejným jazykem výrazů jako všude jinde, takže se kontext dostane k formuláři stejně jako ke všemu ostatnímu na stránce.

Kontext hraje dvě role. Formulář může vycházet z objektu – předvyplní svá pole aktuálními hodnotami objektu a při uložení do něj zapíše změny. Tak z formuláře v Canvasu vznikne pěkně navržená stránka pro úpravu. Nebo může formulář fungovat bez objektu a sbírat vstup, který po odeslání zpracuje automatizace. Tak se z něj stane průvodce, anketa, kalkulačka nebo odesílací formulář. Stejný blok, jen jinak napojený.

Pravidla kontroly vstupu se tam, kde to dává smysl, dědí z typů příslušných vlastností – pole napojené na vlastnost typu datum si s sebou automaticky přinese i kontrolu kalendáře – a pole existující jen v Canvasu si mohou určit vlastní pravidla: minimum, maximum, délku, regulární výraz. Platí tu stejné opětovné ověření na serveru, které chrání standardní formuláře. Co formulář přijme, to dostane i obslužná logika – nic se nespoléhá jen na prohlížeč.

Události formuláře jsou to, co z formuláře udělá místo pasivního sběrače vstupu kus aplikační logiky. Před vykreslením můžete připravit kontext nebo spočítat výchozí hodnoty. Před ověřením můžete vstup upravit dřív, než se spustí pravidla. Po odeslání se obvykle odehrává většina práce – tady se spouštějí automatizace, které zakládají nebo upravují záznamy, posílají oznámení, volají webhooky nebo dělají cokoli dalšího, co z odeslání vyplývá. Při přerušení se uklidí, když uživatel akci zruší. Sada událostí je zvolená s rozmyslem: pokryje běžné vzory aplikačních formulářů, ale neudělá z formuláře hromadu nahodilých skriptů.

Krátké hlášky a přesměrování uzavírají celý cyklus po úspěšném odeslání. Krátká hláška ("Děkujeme – vaše odeslání jsme přijali") se ukáže na další stránce, kterou uživatel uvidí. Přesměrování ho pošle na děkovnou stránku, na potvrzení, nebo zpět tam, odkud přišel. U veřejných formulářů, které ukládají odeslaná data do prostředí, právě spojení hlášky a přesměrování způsobí, že formulář působí jako běžná veřejná stránka, ne jako podivná zajížďka do aplikace.

Zvýšená oprávnění řeší důležitý případ formulářů, které uživateli dovolí něco, co by jinak nesměl. Veřejný kontaktní formulář, který používá anonymní návštěvník, obvykle nemá právo zapisovat do typů v prostředí. Místo aby se tato oprávnění otevřela anonymním uživatelům obecně – což by byl široký a trvalý ústupek – lze formulář nastavit tak, aby běžel se zvýšenými oprávněními jen ve chvíli odeslání a jen pro přesně ty akce, které formulář určuje. Oprávnění tak zůstane úzce vymezené: anonymní návštěvník formulář odešle a jeho odeslání založí správné záznamy, ale jinak nemůže v prostředí nic číst ani zapisovat. Je to princip nejnižších nutných oprávnění uplatněný na úrovni formuláře.

Dynamické načítání voleb je funkce, po které složitější formuláře ožijí. Vyberete zemi a naplní se seznam krajů. Vyberete kategorii produktu a naplní se seznam dostupných produktů. Vyberete organizaci a naplní se seznam jejích kontaktů. Seznamy voleb se načítají podle potřeby, jak se mění vstup uživatele, takže formuláře zůstávají svižné i tehdy, když jsou podkladové seznamy velké.

Zobrazení v modálním okně umožní otevřít formulář v Canvasu jako dialog místo přímo na stránce. Pro akce, které na chvíli přeruší rozdělanou práci – rychlá úprava, potvrzení, menší vstup o několika polích – bývá modální formulář ta správná forma. Stejná definice formuláře v Canvasu funguje na stránce i v modálním okně; volba zobrazení je nastavení na úrovni bloku, ne samostatný formulář, který by se musel stavět znovu.

Podpora replikátoru pokrývá vzor opakující se skupiny uvnitř formuláře v Canvasu. Formulář, který potřebuje posbírat proměnlivý počet položek, příloh nebo kontaktů, využije replikátor – uživatel řádky během práce přidává a odebírá. Tomuto vzoru se podrobněji věnuje článek o opakujících se sekcích; tady je podstatné, že se formuláře v Canvasu do replikátoru zapojují přirozeně.

Možnost přerušení uzavírá další věc, na které u složitějších obslužných rutin záleží. Odeslání formuláře lze z obslužné logiky čistě přerušit – třeba proto, že selže kontrola proti vnějšímu systému – a uživatel zůstane na formuláři se srozumitelnou zprávou, místo aby skončil na chybové stránce. Právě takové detaily oddělují formulář, který můžete nasadit veřejně, od toho, který se dá použít jen interně.

Spojení formulářů v Canvasu, tvůrce automatizací, veřejných stránek a zvýšených oprávnění umožňuje platformě provozovat toky směřované k zákazníkům bez samostatného frontendového frameworku. Veřejný formulář pro poptávky, zákaznický portál, registrační tok, samoobslužné objednávání termínů – všechno jsou to formuláře v Canvasu s obslužnou logikou, běžící ve stejném prostředí, které používá i interní tým. Právě tahle jednotnost je skutečný přínos: jeden datový model, jeden systém oprávnění, jeden auditní záznam a stránky pro uživatele, které čtou a zapisují nad stejnými daty, s jakými pracuje interní tým.