Návrh interaktivního a dynamického panelu nabídek v aplikaci Qodly

V tomto blogu se podíváme na navigaci. Navigace je klíčovým prvkem každé webové aplikace. Dobře strukturovaný navigační systém umožňuje uživatelům rychle najít to, co potřebují, a zlepšuje jejich celkový zážitek.

S aplikací 4D Qodly Pro je správa navigace jednoduchá a flexibilní. Pomocí komponenty Page Loader můžete dynamicky načítat stránky na základě akcí uživatele.

V tomto článku prozkoumáme, jak nastavit efektivní navigační panel pomocí 4D Qodly Pro. Jako příklad použijeme naši aplikaci Performance Review, kterou si můžete stáhnout z GitHubu (odkaz bude doplněn). Budeme se zabývat jejím designem, interakcemi a správou oprávnění, abychom vytvořili bezproblémové prostředí přizpůsobené každé uživatelské roli.

Aplikace Performance Review

Načítání stránek pomocí nástroje Page Loader

Načtení stránky pomocí aplikace 4D Qodly Pro je intuitivní. Jednoduše přetáhněte komponentu Page Loader na rozhraní a přiřaďte ji k textovému zdroji dat.

Page Loader automaticky načte stránku odpovídající hodnotě uložené v datovém zdroji. Aktualizací této hodnoty mohou uživatelé plynule přecházet mezi různými stránkami v aplikaci.

Výběr správného typu navigace

Nyní, když jsme pochopili, jak načítat stránky pomocí nástroje Page Loader, musíme určit, jak dynamicky upravit tento datový zdroj, aby usnadnil plynulou a intuitivní navigaci.

Existují tři základní typy navigace:

• Lišta s nabídkou: Tradiční, vždy viditelná navigační lišta, která je ideální pro rychlý přístup.
• Nabídka Hamburger: Sbalitelná nabídka přístupná pomocí ikony, ideální pro mobilní aplikace.
• Boční nabídka: Umístěné na boku, vhodné pro komplexní aplikace s více sekcemi.

Typ navigace by měl být zvolen na základě konkrétních potřeb vaší aplikace a cílových uživatelů. Dobře navržený navigační systém zlepšuje uživatelský zážitek a zajišťuje snadný přístup ke klíčovým funkcím.

Pro aplikaci Performance Review jsme se rozhodli pro klasický panel nabídek. Tento přístup umožňuje rychlý přístup k různým sekcím a zároveň zajišťuje bezproblémové používání na počítačích i tabletech.

Vytvoření navigačního panelu

Náš navigační panel je navržen tak, aby byl jednoduchý, efektivní a uživatelsky přívětivý. Zde jsou její hlavní funkce:

• Navigační panel s pevnou výškou a možností přilepení, aby zůstal viditelný v horní části.
• Ikona a název aplikace.
• Rozbalovací nabídka Lidské zdroje obsahující:
  • Spolupracovník:
  • Přehled
  • Školení
• Tlačítko Manažer.
• Tlačítko Spolupracovník.
• Jméno přihlášeného uživatele.
• Tlačítko Odhlásit se.

Vytvoření horního panelu

Navigační lišta se vždy zobrazuje v horní části obrazovky. Abychom toho dosáhli, vytvoříme stylový rámeček s vlastností sticky:

• pozice: sticky zajišťuje, že lišta zůstane viditelná i během posouvání.
  
• top: 0 a left: 0 umístí lištu do levého horního rohu stránky.

Přidání ikony a názvu aplikace

K zarovnání prvků a zachování odezvy při různých velikostech obrazovky používáme stylový rámeček s funkcí Flexbox.

Uvnitř tohoto rámečku:

• Obrázková komponenta pro ikonu.
• Textová komponenta pro zobrazení názvu aplikace.

Vytvoření nabídek

Přidáme druhý stylový rámeček (s použitím Flexboxu), který bude obsahovat jak rozbalovací nabídku, tak dvě navigační tlačítka.

Vytvoření rozbalovací nabídky „Lidské zdroje“

K vytvoření rozbalovací nabídky použijeme vlastní komponentu Popover. Tuto komponentu si můžete stáhnout ze serveru GitHub.

• Přetáhněte komponentu Popover na stránku.
• Do části nabídky přidejte statický text s názvem Lidské zdroje.
• Do překryvné části vložte tři tlačítka s názvy Spolupracovník, Recenze a Školení.

Další podrobnosti o vlastních komponentách naleznete v našem předchozím příspěvku na blogu: „Rozšíření naší aplikace Qodly pomocí vlastních komponent“.

Přidání tlačítek Manažer a Spolupracovník

Jednoduše přidejte dvě samostatná tlačítka označená jako „Správce“ a „Spolupracovník„.

Vytvoření oblasti s přihlášenými informacemi

Třetí stylový rámeček (pomocí Flexboxu) slouží k zobrazení jména přihlášeného uživatele a k poskytnutí akce odhlášení.

• Komponenta Text, vázaná na datový zdroj Uživatelské jméno, zobrazuje jméno přihlášeného uživatele na pravé straně navigačního panelu.

• Tlačítko Odhlásit umožňuje uživatelům rychlé odhlášení. V události onClick tlačítka přiřaďte standardní akci odhlášení z ověřování.

Další podrobnosti o autentizaci najdete v tomto předchozím příspěvku na blogu: Integrace ověřování uživatelů do aplikací Qodly.

Implementace navigačních interakcí

Navigace je spravována prostřednictvím proměnné pageName, která slouží jako zdroj dat pro Page Loader.

• Každý prvek nabídky je spojen s akcí, která aktualizuje hodnotu pageName.
• Když uživatel klikne na tlačítko, dynamicky se načte odpovídající stránka.
• Pro každé tlačítko použijeme akci Set Datasource na událost onClick:
  • pageName = „CollaboratorPage“ pro zobrazení stránky Collaborator.
  • pageName = „ManagerPage“ pro zobrazení stránky Manager.
  • A tak dále…

Tento přístup zajišťuje plynulou a rychlou navigaci bez nutnosti opětovného načítání aplikace.

Správa oprávnění

Ne všechna tlačítka nabídky jsou viditelná pro každého uživatele. Jejich viditelnost závisí na uživatelských rolích:

• Spolupracovník: Přístup pouze na stránku Spolupracovník.
• Manažer: možnost Spolupracovník: možnost Spolupracovník: možnost Spolupracovník: Přístup na stránky Správce a Spolupracovník.
• HR: Přístup ke všem stránkám.

Pomocí správy stavu dynamicky řídíme, které možnosti jsou viditelné na základě role přihlášeného uživatele.

Obsluha více rolí

Manažer má dvojí roli:

• Jako Spolupracovník vyplňuje své vlastní hodnocení výkonnosti.
• Jako manažer přezkoumává a potvrzuje hodnocení výkonnosti členů svého týmu.

Abychom to zvládli, definujeme dva datové zdroje:

• userInfo.maxRole: Představuje nejvyšší roli přidělenou uživateli.
• userInfo.role: Reprezentuje aktuálně aktivní roli, kterou uživatel používá.

Naplnění datových zdrojů:

Během ověřování pomocí funkce ds.authentify() se informace o uživateli ukládají do úložiště relací:

var $obj : Object
$obj :=Session.storage

If ($obj.Employee=Null)
Use ($obj)
$obj .Employee:=New shared object
End use
End if

Use ($obj.Employee)
$obj .Employee.ID:=$employee.ID
$obj .Employee.name:=$employeeFirstname+" "+$employee.Lastname
$obj .Employee.role:="Spolupracovník"
$obj .Employee.maxRole:="Spolupracovník"
End Use

Pro získání údajů o uživateli v rámci webové stránky je k dispozici pomocná funkce getUserInfo():

exposed Function getUserInfo: Object
If (Session=Null)
return Storage .Employee
Else
return Session .storage.Employee
. End if

Při události onClick přihlašovacího tlačítka jsou volány obě funkce:

• ds.authentify()
• ds.getUserInfo()

Vytváření a konfigurace stavů:

• Klepnutím na tlačítko „+“ přidáte stavy.

• Vytvořte stav maxManager, ve kterém je nabídka Lidské zdroje skrytá (display: none).

• Vytvořte stav maxCollaborator, ve kterém jsou možnosti Human Resources, Manager a Collaborator skryté. Protože má Spolupracovník přístup pouze k jedné stránce, navigační nabídka se stává zbytečnou.

Definujte podmíněná pravidla zobrazení:

Chceme:

• Pokud userInfo.maxRole = „hr“, zobrazit výchozí stav.
• Pokud userInfo.maxRole = „manager“, zobrazit stav Manager.
• Pokud userInfo.maxRole = „collaborator“, zobrazte stav Collaborator.

Tato pravidla lze snadno implementovat pomocí editoru konfigurace podmíněných stavů aplikace Qodly Studio.

Další podrobnosti o správě stavů naleznete v našem předchozím příspěvku na blogu: Udělejte své aplikace Qodly dynamické a interaktivní pomocí stavů.

Další stavy existují pro správu nabídky, přihlašovacího okna nebo vybrané položky nabídky. Je na vás, abyste prozkoumali, jak jsou nakonfigurovány, a neváhejte se k nám připojit na fóru, pokud máte nějaké otázky.

Optimalizace pro různé velikosti obrazovky

Naše aplikace je navržena pro použití na stolních počítačích i tabletech. Pro zajištění optimálního uživatelského zážitku je navigační panel plně responzivní.

• Skrytí některých prvků při příliš malé obrazovce (např. název aplikace a jméno přihlášeného uživatele).
• Přeskupení nabídky do sloupcového uspořádání na menších obrazovkách pro maximalizaci prostoru.

Dynamické skrývání prvků je řízeno pomocí dotazů CSS media queries (např. pomocí max-width), zatímco Flexbox s možností Wrap zajišťuje automatické přizpůsobení nabídky na základě dostupného prostoru.

• Velká obrazovka

• Střední obrazovka

• Malá obrazovka

Další poznatky o přizpůsobení CSS v aplikaci Qodly Studio naleznete v našem předchozím příspěvku: Přizpůsobte si rozhraní Qodly pomocí CSS.

Další kroky

Nyní máte k dispozici základní prvky pro vytvoření interaktivního a dynamického navigačního panelu pomocí aplikace 4D Qodly Pro.

Doporučujeme vám, abyste se podělili o své implementace a položili otázky na 4D fóru a pokračovali tak v zapojení komunity.