Budování dynamické správy dat v aplikaci Qodly: Vytváření, přidávání, úpravy a mazání

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í.