Vytvoření interaktivního seznamu dat pomocí aplikace 4D Qodly Pro

V tomto blogu se budeme zabývat vytvořením dynamické stránky pro zobrazování dat. Zaměříme se na praktickou aplikaci: vytvoření systému pro generování výročních zpráv o výkonnosti zaměstnanců. Tento projekt je k dispozici k nahlédnutí na GitHubu.

Naším cílem je navrhnout uživatelsky přívětivé rozhraní, které zobrazí seznam zaměstnanců s možností filtrování výsledků podle oddělení a stavu zaměstnání.

Aplikace pro hodnocení výkonnosti

Zde je konečný výsledek:

Nastavení zdrojů Qodly

V části Zdroje Qodly budeme definovat různé zdroje, které naše komponenty používají.

V tomto příkladu vytvoříme zdroj s názvem „Zaměstnanci“, typu výběr entit, založený na datové třídě „Zaměstnanec“. Počáteční hodnota je nastavena na všechny zaměstnance.

Poznámka:

• Zdroje seskupené pod „This.page“ mají omezený rozsah na aktuální stránku. Používejte je pro dočasnou manipulaci s daty nebo s daty specifickými pro danou stránku.
• Zdroje seskupené pod „Namespaces“ mají globální rozsah, takže jsou vhodné pro data nebo nastavení sdílená na více stránkách.

Vytvoření datové tabulky

V aplikaci 4D Qodly Pro můžete využít datové nebo maticové komponenty k efektivní prezentaci seznamu dat. V tomto příkladu použijeme komponentu datatable, podobnou seznamovému poli typu Collection nebo Entity Selection ve 4D.

Pole „Qodly source“ umožňuje přiřadit výběr entit, který naplní datovou tabulku. Pole „Vybraný prvek“ načte vybranou entitu, která je ekvivalentní položce „Aktuální prvek“ ve výběrovém seznamu.

V části „Sloupce“ pak můžeme přidat sloupce a definovat jejich výrazy. Například definujeme sloupec pro „Jméno“, což je přímý atribut datové třídy „Zaměstnanec“, a „Oddělení.Název“, což je související atribut.

Filtrování dat

V této implementaci lze seznam zaměstnanců filtrovat na základě jejich oddělení nebo stavu aktivního zaměstnance.

Funkce loadEmployees()

Na straně 4D přidáme do třídy „Zaměstnanec“ funkci, která vrátí výběr entit podle kritérií filtrování.

Zde je ukázka kódu:

exposed Function loadEmployees($departement: Object; $isActive: Boolean) : cs.EmployeeSelection
If ($departement#Null)
return This .query("ID_Departement = :1 AND isActive = :2"; $departement.ID; $isActive)
Else
return This .query("isActive = :1"; $isActive)
End if

Filtrování podle aktivního stavu

Pro implementaci filtrování podle stavu zaměstnání vytvoříme Qodly zdroj typu boolean s názvem „isActive“. Dále přidáme zaškrtávací políčko propojené s tímto zdrojem.

Abychom dosáhli vzhledu podobného přepínači, nastavíme vlastnost „Variant“ na hodnotu Switch.

Poté funkci „loadEmployees“ spojíme s událostí „On Change“ zaškrtávacího políčka.

Další podrobnosti o událostech najdete v dokumentaci k událostem Qodly.

Filtrování podle oddělení

Pro filtrování podle oddělení použijeme selectBox podobný rozbalovacímu seznamu ve 4D.

Vytvoříme dva zdroje dat:

• „departments“ typu entity selection
• „department“ typu entity

Poté přidáme komponentu selectBox tak, že jako zdroj Qodly nastavíme „departments“ a jako vybraný prvek „department“.

Dále dovnitř selectBoxu vložíme textovou komponentu propojenou se zdrojem „$This.Name“.

Nakonec při události „On Change“ komponenty SelectBox zavoláme funkci „loadEmployees“ s parametry „department“ a „year“.

Voilà!

Stylování datové tabulky

Posledním krokem je přizpůsobení datatabulky tak, aby odpovídala návrhovým směrnicím vaší společnosti nebo vizuální identitě vaší aplikace. Můžete jej buď přizpůsobit:

• úpravou vlastností widgetu, jako jsou barvy, okraje a další styly,
• nebo použít třídu CSS.

Použití třídy CSS nabízí výhodu zachování konzistentního stylu ve všech datových tabulkách v aplikaci, což zajišťuje jednotné uživatelské prostředí.

V některém z příštích příspěvků na blogu se budeme zabývat různými možnostmi použití CSS v aplikaci Qodly Studio. Pokud se nemůžete dočkat, třída CSS použitá v aplikaci Performance Review se nazývá „DataTable„.

Další kroky

Gratulujeme! Nyní máte funkční stránku schopnou zobrazovat a filtrovat data zaměstnanců. Tento interaktivní systém poskytuje pevný základ pro dynamickou práci s daty v aplikacích Qodly.

Chcete-li dále prohloubit své znalosti o datových tabulkách a jejich činnostech, prozkoumejte následující zdroje:

• Dokumentace ke komponentě datové tabulky,
• Dokumentace k akci,
• Podívejte se na naše video o datových tabulkách.

Šťastné kódování a na shledanou v příštím blogu!