Lomakekomponentti, jonka avulla asiakas voi liittää lomakkeeseen yhden tai useita liitetiedostoja.
Julkaistu versiossa 1.1.0
Esikatselu
<FileInput labelText="Lorem Ipsum" helpText="Dolor sit amet" infoText="Consectetur" btnLabelText="Adipiscing elit" />
Käyttötarkoitus
FileInput toteuttaa yksinkertaisen tiedostokentän, joka noudattaa KDS:n lomake-elementtien ulkoasua
ja rakennetta. Komponentti toteuttaa ainoastaan lomakekentän ja siihen liittyvät tekstielementit.
Valittujen tiedostojen esitys, lähetys ja vastaanotto pitää toteuttaa erikseen välittämällä komponentille Reactin ref.
Saavutettavuus
Komponentti luo saavutettavan lomakekentän, mutta ei ota kantaa tiedostojen valinnan ja
lähetyksen saavutettavuuteen.
Esimerkit
Allekkainen kenttä
<>
<FileInput
labelText="Label"
requiredLabel="Pakollinen tieto"
helpText="Paikka kentän täyttöohjeelle."
infoText="Paikka lisätietotekstille."
btnLabelText="Lisää liite"
/>
<FileInput
labelText="Label"
invalid
errorText="Paikka kentän validointivirheelle."
helpText="Paikka kentän täyttöohjeelle."
infoText="Paikka lisätietotekstille."
btnLabelText="Lisää liite"
/>
<FileInput
labelText="Label"
disabled
helpText="Paikka kentän täyttöohjeelle."
infoText="Paikka lisätietotekstille."
btnLabelText="Lisää liite"
/>
</>
Pelkkä FileInput-komponentti ei sellaisenaan riitä käytettävän tiedostokentän luomiseen.
Kentän lisäksi käyttäjälle on vähintään näytettävä kenttään liitetty tiedosto.
Useiden liitteiden listaamisessa voi käyttää Table-komponenttia. Taulukkoon
voi lisätä käyttökontekstin mukaan tarpeellisia metatietoja liitteistä ja rivikohtaisia
toimintoja.
Alla on muutama esimerkki, joita voi soveltaa useissa eri tilanteissa. Käytetyt tekstit ja termit ovat esimerkkejä.
Virhetilanteeseen liittyvät ilmoitukset on hyvä listata selkeästi Alert-komponentissa kuvaavan ilmoitustekstin kanssa. Käytetyt tekstit ja termit ovat esimerkkejä.
<>
<Alert variant="danger" dismissible>
<p>
<strong>Liitteen lähetys epäonnistui.</strong> Liitetiedosto on liian suuri, tiedoston maksimikoko on 1 Mt.
</p>
<ul>
<li>
<Link href="#">liitetiedosto-A.jpg</Link> (1,47Mt)
</li>
</ul>
</Alert>
<Alert variant="danger" dismissible>
<p>
<strong>Liitteen lähetys epäonnistui.</strong> Lähetä liitetiedosto uudelleen. Ongelman jatkuessa ota yhteyttä
asiakastukeen.
</p>
<ul>
<li>
<Link href="#">liitetiedosto-B.jpg</Link>
</li>
</ul>
<ButtonGroup horizontal="sm">
<Button variant="danger">Lähetä uudelleen</Button>
<Button variant="danger" appearance="outline">
Peruuta
</Button>
</ButtonGroup>
</Alert>
<Table>
<TableHead>
<TableHeadRow>
<TableHeader scope="col" colSpan="2">
Lähetetyt liitteet
</TableHeader>
</TableHeadRow>
</TableHead>
<TableBody>
<TableRow>
<TableCell>
<Link href="#">liitetiedosto-C.jpg</Link>
<small className="kds-text-muted kds-block">Vastaanotettu ti 6.10.2020 klo 10.15</small>
</TableCell>
<TableCell className="kds-text-end" />
</TableRow>
<TableRow>
<TableCell>
<Link href="#">liitetiedosto-D.pdf</Link>
<small className="kds-text-muted kds-block">Vastaanotettu ti 6.10.2020 klo 10.15</small>
</TableCell>
<TableCell className="kds-text-end" />
</TableRow>
</TableBody>
</Table>
</>
Esimerkkitoteutus liitteiden listauksesta
Esimerkkitoteutus tiedostojen valinnan, lähetyksen ja vastaanoton käyttöliittymästä.
Kentässä on valitse → tarkista → lähetä -työnkulku, jota käytetään asiointipalveluiden liitteiden lähettämisessä. Asiakas voi valita tiedostoja joko yksitellen tai useita kerrallaan.
Lähetysvaiheessa on esimerkkitoteutus, joka pyrkii visualisoimaan käyttöliittymän toimintaa tiedostojen lähetyksessä ja vastaanottamisessa. Käytetyt tekstit ja termit ovat esimerkkejä.
Esimerkkitoteutus ei ole kaikilta osin täydellinen tai kattavasti testattu. Esimerkiksi liitteiden valinnasta, lähetyksestä ja vastaanottamisesta on hyvä kertoa ruudunlukijoille erikseen, ilman että asiakkaan tarvitsee selata taulukoita läpi ruudunlukijalla.