Lähes jokainen Power Apps sisältää vähintään yhden lomakkeen (form). Pari kenttää sisältävän lomakkeen toteuttaminen on helppoa. Oikeat lomakkeet ovat harvoin näin yksinkertaisia. Niissä voi olla kymmeniä kenttiä.
Power Appsin tekijä saattaa huomata käyttävänsä suhteettoman paljon aikaa lomakkeen kanssa tappelemiseen.
Käydään tällä kertaa läpi muutama erilainen tekniikka toteuttaa pitkiä lomakkeita.
Esimerkki – Asiakastietojen ylläpito
Käytetään esimerkkinä asiakastietojen ylläpitoa. Asiakkaasta tallennetaan
- Yhteystiedot (nimi, osoite, puhelin jne)
- Asiakkuuden tiedot (asiakasnumero, kanta-asiakaskortin numero, asiakkuuden taso jne)
- Kiinnostuksen kohteet
Ensimmäinen versio asiakaslomakkeestamme näyttää tältä.
Haluamme jakaa lomakkeen omille välilehdilleen loogisiksi kokonaisuuksiksi. Näin osiot ovat mukavan pieniä ja kaikki kentät mahtuvat yhdellä kertaa näytölle.
Yksi näyttö, yksi lomake, usea välilehti
Toteutetaan seuraavaksi sama lomake käyttäen yhtä näyttöä, jolla on yksi lomake. Tällä kertaa piilotetaan lomakkeen kenttiä sen mukaan, millä ”välilehdellä” (Basic/Program/Interest) käyttäjä on.
Toteutetaan välilehdet galleriana, jonka tietolähteenä on App OnStart:ssa luotu kokoelma (colNavi).
ClearCollect(colNavi, {title: "Basic"}, {title: "Program"}, {title: "Interests"})
Galleria ei sisältää ainoastaan painikkeen, jota painettaessa tallennetaan muuttujaan (varSelectedTab) painikkeen otsikko
OnSelect: UpdateContext({varSelectedTab: title})
Näin muuttujassa on aina tieto millä välilehdellä käyttäjä on. Tätä tietoa hyödyntäen, voimme korostaa valitun välilehden painiketta haluamallamme tavalla.
Asetetaan aktiivisen välilehden otsikko tummaksi. Loput saavat värikseen haalean harmaan.
Lopuksi määrittelemme jokaiselle lomakkeen kortille (card), millä välilehdellä se on näkyvillä.
Title-kortti on näkyvillä, kun valittuna on ”Basic” välilehti.
Visible: varSelectedTab = "Basic"
Aluksi kaikki näyttää hyvältä.
Siirryttäessä toiselle välilehdelle, paljastuu käytetyn tekniikan ikävämpi puoli. Ensimmäisellä rivillä on kaksi tyhjää koloa.
Kortteja piiloteltaessa lomakkeen ulkoasu menee todella helposti sekaisin.
Lomakkeen ulkoasu korjaantuu, kun viimeinen kenttä (DataCard1) siirretään kenttien Email ja Customer number väliin.
Olisitko arvannut?
Valitettavasti tällä tekniikalla toteutetun lomakkeen ulkoasu tuppaa hajoamaan aina, kun kenttien järjestystä muutetaan, kenttiä lisätään tai poistetaan.
Ei kuulosta kätevältä.
Hyvää
- Kevyt: Vain yksi näyttö ja yksi lomake
- Lomakkeen tallennuksessa ei tarvita ylimääräisiä kikkailuja
Huonoa
- Mikäli lomaketta muokataan matkan varrella, generoi muutokset helposti turhaa manuaalista työtä
Yksi näyttö, yksi lomake, usea välilehti, paikalleen kiinnitetyt kortit
Edellä kuvattua ongelmaa voi yrittää välttää kovakoodaamalla lomakkeen korttien paikat. Kortin Y ominaisuudella määritetään, millä rivillä kortti on. Vastaavasti X ominaisuus kertoo sarakkeen, johon kortti istutetaan.
X ja Y arvot alkavat nollasta.
Määrittelemällä käsin jokaiselle kortille X ja Y arvot, voidaan korttien sijaintia hallita paremmin, eikä lomakkeen ulkoasu leviä jokaisesta pienestä muutoksesta.
Silti se leviää aina välillä.
Raivostuttavaa.
Hyvät ja huonot
- Samat kuin edellisessä
Usea näyttö, usea lomake, usea välilehti
Muutetaan lähestymistä. Luodaan jokaista välilehteä kohden oma näyttö. Jokaisella näytöllä on lomake, jossa on ainoastaan kyseisen välilehden sisältämät kentät.
Ylläpidon helpottamiseksi toteutetaan välilehdet komponenttina.
Kenttien lisääminen ja poistaminen ei sekoita enää lomaketta. Vastalahjaksi olemme kuitenkin saaneet uuden ongelman.
Yksi lomake onkin nyt jaettu kolmelle eri lomakkeelle. Miten hoidetaan lomakkeen tallennus?
Vaihtoehtoja on monia. Esimerkiksi.
- Käyttäjä voi tallentaa tiedot jokaisella näytöllä ja aina tallennetaan kaikki lomakkeet (submit(Form1);submit(Form2);Submit(Form3)).
Muista ottaa huomioon uutta asiakasta luodessa, että ensimmäisen lomakkeen tallennus on uuden luonti ja loput ovat juuri luodun asiakkaan tietojen päivittämistä… - Pakotetaan käyttäjä täyttämään tiedot välilehti kerrallaan ja tallennus tapahtuu viimeisellä välilehdellä. Kaikki kolme lomaketta tallennetaan aivan kuten edellisessäki vaihtoehdossa.
- Lisätään ensimmäisellä välilehdellä näkyvään lomakkeeseen kaikki kentät, mutta piilotetaan muut kuin ko välilehteen liittyvät kentät. Piilotettujen kenttien arvot poimitaan toisilta välilehdiltä. Nyt voidaan aina tallentaa vain ensimmäisellä välilehdellä oleva lomake.
Lopuksi päädytään tallentamaan tiedot Patch -komennolla, Submit:in sijaan.
Näin saamme tallennuksen tehtyä yhdellä kommennolla, eikä tarvitse kikkailla piilotettujen kenttien kanssa.
Tylsä puoli ratkaisussa on, että patch-komennon kirjoittamisessa vierähtää hetki ja sama pitkä komento pitää kopioida jokaiseen tallennuspainikkeeseen.
Hyvää
- Kenttien lisääminen, poistaminen ja uudelleenjärjestely on helppoa, eikä hajota ulkoasua
Huonoa
- Yhden lomakkeen täyttämiseen tarvitaan monta näyttöä ja monta lomaketta
- Tallennus ei ole enää aivan yksinkertaista.
Yksi näyttö, ei yhtään lomaketta, usea välilehti
Lomakkeen voi aina toteuttaa myös kokonaan itse. Tällöin lomake on vain kokoelma erilaisia syöttökenttiä, joiden arvot tallennetaan Patch-komennolla tietovarastoon.
Näin saat tehtyä juuri haluamasi näköisen lomakkeen. Tosin joudut rakentamaan itse myös syötteiden tarkastuksen, virheilmoitukset, kenttien esitäytön olemassaolevaa riviä muokatessa jne.
Hyvää
- Ulkoasun saa juuri haluamakseen
- Kevyt (yksi näyttö ja tarvittava kasa kontrolleja)
Huonoa
- Kaikki lomakekontrollin tarjoamat ominaisuudet joutuu rakentamaan itse
- Kenttien lisääminen, poistaminen ja uudelleenjärjestely työlästä
Yhteenveto
Mikä esitetyistä on paras tapa toteuttaa usealle välilehdelle jaettu lomake? No se tietenkin riippuu.
Kun pitää saada nopeasti aikaista, mutta lomakkeen sisältö elää tekemisen rinnalla, on valintani usealle näytölle jaettu lomake.
Muissa tapauksissa taidan suosia edelleen yhdelle näytölle rakentuvaa lomaketta. Sen tallennus on vain niin paljon suoraviivaisempaa.
Ensisijaisesti tietenkin kannattaa tehdä niin kuin osaa.
Timo Pertilä 