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ä.

form v1.png

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.

Näyttökuva 2019-12-8 kello 17.40.21.png

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})

selectnav

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.

selectnav2

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"

hide form items.png

Aluksi kaikki näyttää hyvältä.

form v2

Siirryttäessä toiselle välilehdelle, paljastuu käytetyn tekniikan ikävämpi puoli. Ensimmäisellä rivillä on kaksi tyhjää koloa.

form v3.png

Kortteja piiloteltaessa lomakkeen ulkoasu menee todella helposti sekaisin.

Lomakkeen ulkoasu korjaantuu, kun viimeinen kenttä (DataCard1) siirretään kenttien Email ja Customer number väliin.

form v4

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.

Näyttökuva 2019-12-8 kello 17.43.37.png

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.

Näyttökuva 2019-12-8 kello 17.49.25.png

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äyttökuva 2019-12-8 kello 18.12.32.png

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äyttökuva 2019-12-8 kello 18.22.49.png

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.