V našem seriálu o aplikaci 4D Qodly Pro jsme se zabývali zobrazováním dat pomocí datové tabulky. Dnes uděláme další krok: naučíme se přidávat, upravovat a mazat záznamy. Tyto operace jsou nezbytné pro vytváření dynamických, interaktivních aplikací.
Abychom si tyto funkce ukázali, budeme pokračovat v naší aplikaci pro správu hodnocení výkonnosti. Cílem je navrhnout obrazovku, která uživatelům umožní přidávat nebo upravovat informace o zaměstnancích. Tento projekt je k dispozici na serveru GitHub, kde si jej můžete prohlédnout.
Aplikace pro hodnocení výkonnosti
Přidání tlačítek pro vytváření a úpravy
Vedle datové tabulky přidáme dvě tlačítka: Vytvořit a Upravit.
Máte dvě možnosti zobrazení formuláře pro zadávání dat:
- Inline zobrazení formuláře: Při kliknutí na tlačítka „Vytvořit“ nebo „Upravit“ se vedle datové tabulky zobrazí vstupní formulář. Formulář lze zapnout nebo vypnout pomocí stavů. Podmíněné nebo nepodmíněné stavy poskytují flexibilitu a tomuto tématu budeme věnovat budoucí blog. Pokud se prozatím chcete o stavech dozvědět více, podívejte se na tuto dokumentaci s přehledem stavů a na tento blog Dynamická uživatelská rozhraní se stavy stránek.
- Zobrazení modálního dialogu: Otevřete formulář v modálním dialogu, když uživatel klikne na tlačítka „Vytvořit“ nebo „Upravit“. Tento přístup jsme zvolili pro tento výukový program.
Vytvoření dialogového okna
Chcete-li vytvořit dialog, klepněte na tlačítko dialog v horní liště.
K dispozici máte několik vlastností, kterými můžete dialog přizpůsobit:
- Překrytí: Při nastavení na hodnotu true se aktivuje překrytí obrazovky.
- Přetahování: Tato volba umožňuje přetáhnout obrazovku: Umožňuje změnu polohy řízenou uživatelem. Obsahuje přizpůsobitelnou ikonu přesunu.
- Zavíratelné: Integruje funkci zavření, kterou lze ovládat pomocí tlačítka nebo kliknutím mimo dialogové okno.
- Animované: Implementuje efekt blikání při otevření pro vizuální zvýraznění.
Další podrobnosti naleznete v dokumentaci k dialogu.
Vytvoření formuláře pro zadávání dat
Nyní vytvoříme formulář pro zadávání dat, který bude shromažďovat informace o zaměstnancích. Tento formulář umožní uživatelům vytvářet nebo aktualizovat záznamy v databázi.
Propojení formuláře se zdrojem dat
Připomeňme si, že v předchozím blogu jsme vytvořili datovou tabulku propojenou s datovým zdrojem employees a vybraný prvek jsme připojili k datovému zdroji „theEmployee“. Tento datový zdroj „theEmployee“ bude vyplňovat vstupní formulář.
Přidání vstupních polí
Pro základní pole, jako je jméno, příjmení, e-mail a zaměstnání, použijeme komponentu Text Input.
Příklad: Příklad: Konfigurace pole Jméno
- Přetáhněte komponentu Text Input do formuláře.
- Nastavte vlastnost Qodly source na „theEmployee.Firstname“.
Tento postup opakujte pro ostatní pole tak, že je propojíte s příslušnými atributy pole „theEmployee“.
Konfigurace dlouhých textových polí
Pro delší textová pole, jako je popis, použijeme také komponentu Text Input, ale nakonfigurujeme ji jako Text Area:
- Přetáhněte komponentu Text Input do formuláře.
- Změňte vlastnost Type na Text Area.
- Nastavte zdroj Qodly na „theEmployee.Description“.
Rozbalovací nabídky pro oddělení a vedoucí pracovníky
Pro pole, jako jsou pole oddělení a manažerů, použijeme komponentu Select Box, která umožňuje uživatelům vybrat předem definované hodnoty.
- Vytvořte zdroj dat: „department“ typu entita,
- přetáhněte komponentu Select Box,
- Jako zdroj Qodly nastavte „theEmployee.Departement“ a jako vybraný prvek „department“.
- Definujte vlastnost placeholder s textem „Department“,
- Přetáhněte komponentu Text Input dovnitř pole Select Box,
- propojte textový vstup se zdrojem „$This.Name“.
Zaškrtávací políčko se vzhledem přepínače
Pro logické pole typu „isActive“ použijeme komponentu Check box. Chceme-li mít moderní vzhled, použijeme vzhled Switch.
- Přetáhněte komponentu Check Box do formuláře,
- Změňte vlastnost Variant na Switch,
- Nastavte zdroj Qodly na „theEmployee.isActive“.
Správa akcí
4D Qodly Pro zjednodušuje vytváření, ukládání a mazání záznamů tím, že poskytuje vestavěné standardní akce, podobné těm v 4D.
Příklad: Akce Uložit
- Přidejte tlačítko a označte jej jako Uložit.
- Na panelu Akce klepněte v části Akce při kliknutí na tlačítko Přidat standardní akci.
- Zadejte zdroj dat (v tomto případěEmployee) a vyberte akci Uložit.
- Zaškrtnutím políčka Provide Feedback (Poskytnout zpětnou vazbu) přizpůsobte zpracování neočekávaných chybových hlášení a určete, co se zobrazí koncovým uživatelům.
Vlastní funkce pro obchodní logiku
Kromě standardních akcí můžete volat vlastní funkce pro operace, jako je vytváření, mazání nebo ukládání záznamů. Například:
- Ověřit data před uložením.
- Provést výpočty pro vyplnění dalších polí.
V této aplikaci jsme vše zjednodušili tím, že jsme se spolehli na standardní akce, všechny možnosti standardních akcí můžete prozkoumat v dokumentaci Qodly.
Obnovení datové tabulky po aktualizacích
Po přidání nebo úpravě záznamu je důležité datovou tabulku obnovit, aby se v ní promítly změny. Toho lze snadno dosáhnout pomocí akce Reload.
Obnovení datové tabulky po uložení:
- Přidejte akci Reload do datového zdroje employees propojeného s datovou tabulkou.
- Přiřaďte tuto akci tlačítku Uložit spolu s akcí Uložit.
Otevírání a zavírání modálního dialogového okna
Chcete-li zlepšit interakci uživatele, přiřaďte k modálnímu dialogu příslušné akce:
- K tlačítkům Upravit a Vytvořit přidejte akci Otevřít dialogové okno.
- Uvnitř dialogu, na tlačítka Uložit a Zrušit, přidejte akci Zavřít dialog.
Další kroky
Gratulujeme! Nyní máte plně funkční systém pro přidávání, úpravy a mazání dat. Chcete-li dále prozkoumat širokou škálu komponent, které jsou k dispozici pro vytváření stránek Qodly, podívejte se na obsáhlou dokumentaci ke komponentám Qodly.
Dejte nám vědět své názory a podělte se o své pokroky na fóru 4D. Zůstaňte naladěni na náš příští blog, kde se budeme zabývat stavy pro dynamické ovládání uživatelského rozhraní.