detfaellesdesignsystem / dkfds-components

Styling og komponenter
Other
43 stars 13 forks source link

dato-input felt i en tabel #30

Closed FNA-atp closed 4 years ago

FNA-atp commented 5 years ago

Hej dkfds, Vi har situation, hvor brugeren skal indtaste en dato i en tabel-række. Datepickeren i dkfds har ekstra labels (dag, måned, år), hvilket gør at dato-input fylder mere i højden end de resterende input felter i tabel-rækken. Vi har forsøgt at lave løsning uden tabel, hvor input er venstre opstillet efter dkfds formular struktur. Men vi har flere selvbetjeningsløsninger som også har samme behov for dato-input i tabelrækker, og der skal brugeren have mulighed for at arbejde med mange rækker.

Hvad er dkfds holdning til dette behov ?
Må vi bruge et samlet datofelt til tabeller ?

Nedenstående eksempel vises med kun 2 rækker - men vi har en lignende løsning, hvor brugeren kan tilføje mange rækker. Vi har brugt class="align-bottom" fra Vertical alignment -Bootstrap i tabellen.

image

Vi har taget udgangspunkt i dkfds nedenstående eksempel:

image

detfaellesdesignsystem commented 5 years ago

Hej @FNA-atp,

Tak for henvendelsen!

Vi har oprettet en sag på det, og vil vende tilbage lige så snart vi har kigget på det.

Med venlig hilsen Kristina Jensen Det Fælles Designsystem

detfaellesdesignsystem commented 5 years ago

Hej @FNA-atp Som altid er der flere måder at gribe tingene an på og uanset hvad i vælger vil jeg opfordre Jer til at brugerteste Jeres løsning, og som altid vil jeg meget gerne høre hvad i finder ud af. De tre felter til dato-input er lavet fordi govuk har fundet frem til, at det er den mest optimale måde, at bede brugerne om at indtaste datoer på, hvorfor vi også anbefaler dette.

Jeg har lavet en måde hvorved de tre felter bibeholdes og i genbruger datovælger mønstret, hvor der bruges hjælpetekst til at vise hvad der skal i det enkelte felt. Det er den model, der vil være mest i tråd med FDS datovælgermønstret. Dato i tabel med hjælpetekst-kolonner

Så har jeg lavet en version, hvor i kan anvende et funktionslink til at vise datoen, her kan i så vælge om datoen indtastes via en modal, eller om rækken i tabellen foldes ud eller en tredje mere hensigtsmæssig måde. Dato i tabel med funktionslink

Og slutteligt er det muligt at bruge et felt som du omtaler. Jeg så gerne at i brugertestede første forslag inden i vælger denne. Og vælger i denne skal i tillade brugeren alle mulige måder at indtaste på (12-12-2012, 12122012, 12.12.2012, 12/12/2012, 12 12 2012, m.fl. lidt client side js kan rette det til det format serveren accepterer). Dato i tabel med et felt

Af de tre tror jeg at den første er nemmest at betjene, men som sagt ville det være rart med en brugertest.

Mvh Sune FDS-team

detfaellesdesignsystem commented 5 years ago

@FNA-atp har I besluttet noget her og har brugertestet det?

FNA-atp commented 5 years ago

Hej Sune, Tak for dine forslag - vi har brugertestet nedenstående dato-input felt på vores kommende "ferieplanlæggeren". Vi kommer til at bruge den fremover i fx. tabeller for at spare plads.

image

detfaellesdesignsystem commented 4 years ago

@FNA-atp ok og tak for din tilbagemelding. Har i brugertestresultater for forskellige måder at angive datoer på i tabeller? Ellers vil vi ved lejlighed brugerteste forskellige muligheder for datoangivelse i tabeller og komme med vores anbefaling derefter.

Mvh Sune Det Fælles Designsystem

FNA-atp commented 4 years ago

Hej Sune, I må meget gerne brugerteste de andre muligheder - det har vi nemlig ikke gjort :-)

Mvh. Farzana