Modaler

Modaler bruges i EnergyConnect til at vise indhold eller handlinger, uden at brugeren forlader den side, de allerede befinder sig på.

De anvendes typisk til formularer, oprettelser, redigeringer, bekræftelser og andre handlinger, hvor brugeren skal udfylde oplysninger eller tage stilling til en konkret opgave.

Modaler er kontekstafhængige. Det betyder, at indholdet i modalens felter, faner og handlinger afhænger af den side eller det element, brugeren arbejder med.

Placering og visning

Modaler kan vises på forskellige måder afhængigt af indhold og arbejdsgang.

Den mest almindelige type vises som en sidepanel-modal, der åbner fra højre side af skærmen. Denne visning bruges ofte til formularer og redigeringer, hvor brugeren skal kunne arbejde med flere felter, samtidig med at den bagvedliggende side stadig er synlig.

Mindre modaler kan også vises centralt på skærmen. Denne type bruges typisk til kortere beskeder, bekræftelser eller handlinger, hvor brugeren kun skal tage stilling til få oplysninger.

Når en modal er åben, nedtones den bagvedliggende side. Det gør det tydeligt, at brugeren aktuelt arbejder i modalens indhold.

Modalens opbygning

En modal består typisk af følgende elementer:

Element	Beskrivelse
Titel	Viser hvad modalen bruges til, eksempelvis Rediger, Opret eller navnet på den handling, brugeren er i gang med.
Luk	Giver brugeren mulighed for at lukke modalen. Hvis der er ugemte ændringer, kan brugeren blive bedt om at bekræfte, at ændringerne må gå tabt.
Faner	Nogle modaler er opdelt i faner, hvis indholdet er større eller består af flere logiske områder.
Indhold	Indeholder formularfelter, beskeder eller anden information, som brugeren skal forholde sig til.
Fejl og validering	Fejl vises enten ved det relevante felt eller øverst i modalen, afhængigt af fejlens type.
Handlinger	Nederst i modalen findes typisk de knapper, der gennemfører eller afbryder handlingen.

Formularer i modaler

Mange modaler indeholder formularer, hvor brugeren kan oprette eller redigere oplysninger.

Formularfelter i modaler følger samme principper som øvrige input-felter i løsningen. Det betyder, at felterne kan have label, hjælpetekst, placeholder, validering og fejltekst.

Felter markeret med * er påkrævede og skal udfyldes, før brugeren kan gennemføre handlingen.

Hvis brugeren forsøger at gemme eller fortsætte med manglende eller ugyldige oplysninger, vises fejl tæt på de relevante felter.

Faner i modaler

Nogle modaler kan være opdelt i faner. Faner bruges, når indholdet naturligt kan deles op i flere områder, eksempelvis stamdata, lokationsdetaljer eller nøgler.

Fanerne gør det lettere at bevare overblikket i større formularer, fordi brugeren kun ser én del af indholdet ad gangen.

Hvis der findes fejl i en formular med faner, skal brugeren være opmærksom på, at fejlen kan befinde sig på en anden fane end den, der aktuelt er åben.

Handlinger i modaler

Handlinger i modaler findes typisk nederst i modalen.

Der vil ofte være en primær handling og en sekundær handling:

Handlingstype	Beskrivelse
Primær handling	Gennemfører handlingen, eksempelvis Opret, Rediger, Gem eller Bekræft.
Sekundær handling	Afbryder handlingen eller lukker modalen, eksempelvis Annullér.

Den primære handling er den handling, der afslutter arbejdsgangen, hvis formularen er udfyldt korrekt. Den sekundære handling bruges, hvis brugeren ønsker at forlade modalen uden at gennemføre ændringen.

Fokus og tastaturnavigation

Når en modal åbnes, sættes fokus automatisk i det første inputfelt, hvis modalen indeholder formularfelter. Det gør det hurtigere for brugeren at komme i gang og fortsætte navigationen med tastaturet uden først at skulle klikke i formularen.

Modaler kan betjenes med almindelig tastaturnavigation:

Tast	Funktion
Tab	Flytter fokus frem mellem felter, faner og knapper.
Shift + Tab	Flytter fokus tilbage.
Esc	Lukker modalen. Hvis der er ugemte ændringer, kan brugeren blive bedt om at bekræfte, at ændringerne må gå tabt.
Ctrl + Enter	Udfører modalens primære handling, eksempelvis Opret, Rediger, Gem eller Bekræft.

Hvis modalens primære handling kræver, at formularen er korrekt udfyldt, vil Ctrl + Enter kun gennemføre handlingen, når de nødvendige oplysninger er angivet. Hvis der mangler oplysninger, eller hvis et felt ikke er udfyldt korrekt, vises de relevante fejl i modalen.

Fejl i modaler

Fejl i modaler vises så tæt på årsagen som muligt.

Hvis fejlen vedrører et bestemt inputfelt, vises fejlteksten ved feltet. Det kan eksempelvis være, hvis et påkrævet felt mangler, eller hvis en værdi ikke overholder et bestemt format.

Hvis fejlen kommer fra backend eller vedrører handlingen som helhed, vises fejlen typisk øverst i modalen. Det gælder især fejl, der er mere komplekse end almindelig feltvalidering, eller hvor fejlen afhænger af regler og data i de bagvedliggende systemer.

Sikring mod datatab

Hvis brugeren har ændret oplysninger i en modal og forsøger at lukke den uden at gemme, kan løsningen vise en bekræftelsesdialog.

Bekræftelsen gør brugeren opmærksom på, at de indtastede ændringer kan gå tabt, hvis modalen lukkes.

Dette gælder kun, hvis brugeren har foretaget ændringer. Hvis der ikke er ændret noget, kan modalen lukkes uden yderligere bekræftelse.