PowerApps – Muokattavan taulukon toteuttaminen (osa 1)

Muokattava taulukko (editable grid) on usein tarvittu ja käytetty kontrolli. Sen avulla käyttäjä voi muokata nopeasti taulukkomuotoista dataa. Esimerkiksi tilauksen rivitietoja.

PowerAppsissa ei valitettavasti tällaista kontrollia ole. Näppäsormiset rakentavat kuitenkin sellaisen galleria-kontrollia hyödyntäen itse.

Gallerian käyttöön liittyy kuitenkin muutama sudenkuoppa, jotka avaan tämänkertaisessa kirjoituksessa.

Ongema hahmottuu parhaiten esimerkin avulla. Tehdäänkin PowerApps, jolla käyttäjä voi päivittää tilausrivejä. Ja katsotaan mikä voi mennä pieleen.

Tilausrivit (SharePoint-lista)

Luodaan lista, johon tieto tilatuista tuotteista, sekä niiden tilausmääristä (quantity) tallennetaan.

PowerApps ja muokattava taulukko

Seuraavaksi luodaan tyhjä PowerApps johon lisätään

• tietolähteeksi luomamme SharePoint-lista
• galleria, jossa näytetään tilauslistalta otsikko (Title) sekä määrä (quantity)
• gallerian päälle otsikkopalkiksi harmaa laatikko (rectangle)
• otsikkopalkin sisään sarakkeita vastaavat otsikkotekstit

Yksinkertainen tilauslistamme on valmis.

Vaihdetaan määrän esittävä tekstikenttä (label) tekstin syöttökentäksi (text input) ja asetetaan sen default-arvoksi quantity.

Nyt käyttäjä voi muokata rivien tilausmääriä.

Tallennetaan käyttäjän tekemät muutokset käymällä gallerian rivit läpi (ForAll) ja päivittämällä jokaista SharePoint-listan riviä.

ForAll(
     galUpdateQty.AllItems,
     Patch(
          update100item,
          {ID: ID},
          {quantity: txtQtyValue.Text}
     )
)

Lisätään näytölle painike, jonka OnSelect-tapahtumassa tämä tehdään.

Käyttäjän painaessa ”Tallenna muutokset”

päivittyy tiedot SharePoint-listalle.

ForAll on vaarallinen komento. Sillä on helppoa rakentaa todella pitkään kestäviä toimintoja.

Onneksemme Patch-komento on fiksu. Se päivittää ainoastaan rivit, joiden määrää on muutettu.

Erinomainen uutinen suorituskyvyn kannalta.

Ratkaisu toimii vaikka miten suurilla tietojoukoilla.

Kuulostaa liian hyvältä ollakseen totta. Ja niin se onkin.

Ongelma 1 – Laskettavat kentät

Lisätään sovellukseemme logiikkaa. Annetaan käyttäjän syöttää määrän lisäksi tuotteille hinnat. Näiden kahden tiedon perusteella lasketaan tilausrivin kokonaissumma ja tallennetaan se SharePoint-listalle omaan kenttäänsä.

Yksinkertaista?

Lisätään aluksi tarvittavat kentät (price ja value) SharePoint-listalle.

Tämän jälkeen lisäämme galleriaan uuden syöttökentän, johon käyttäjä syöttää tuotteen hinnan. Tallennuspainiketta painettaessa tallennetaan sen arvo.

Kaikki sujuu edelleen loistavasti. Syötetty hinta tallentuu oikein ja tallennus tehdään ainoastaan riveille, joita on päivitetty.

Lisätään galleriaan teksikenttä, johon lasketaan tilausrivin arvo (txtQtyValue * txtPriceValue).

Uusi kenttä (value) halutaan myös tallentaa.

ForAll(
      galUpdateQty.AllItems,
      Patch(
      update100item,
      {ID: ID},
      {
         quantity: txtQtyValue.Text,
         price: txtPriceValue.Text,
         value: txtTotalValue.Text
      }
     )
)

Muutosten jälkeen tallennus ei toimi enää odotetulla tavalla.

Syy tähän on varsin looginen.

• Galleria-kontrolliin kytketyssä tietolähteessä voi olla huomattavan paljon rivejä (esim. miljoona)
• Tästä johtuen galleriaan ei ladata niitä kaikkia, vaan rivit ladataan 100 kappaleen erissä tarpeen mukaan
• Käyttäjän selatessa gallerian loppuun, ladataan aina seuraavat 100 rivi
• Vaikka galleriaan on ladattu 100 riviä, ei riveihin liittyvää laskentaa tehdä valmiiksi kuin näkyville riveille + n seuraavalle riville

Mikäli esimerkissämme käyttäjä ei ole selannut galleriaa ollenkaan alaspäin, on txtTotalValue-kentän arvo laskettu ainoastaan näkyville riveille (+n seuraavalle).

Gallery.Allitems (jonka jokainen rivi käydään tallennuksessa läpi) taas sisältää vähintään 100 riviä. Mikäli käyttäjä on selannut riville 101, sisältää gallery.AllItems 200 riviä jne.

Ei kosketa galleriaan ja painetaan tallenna-painiketta. Mitä tapahtuu?

Toimintomme päivittää oikein ensimmäiset 20 riviä. Lopuille riveistä päivitetään virheellisesti arvoksi 0 (koska näillä riveillä gallerian value-kenttä on ilman arvoa).

 

100 rivistä alkaen arvot ovat jälleen oikein. Niitä ei ole päivitetty ollenkaan, sillä gallery.AllItems sisälsi vain 100 riviä.

Ongelmaa ei ole, mikäli emme tallenna PowerAppsissa laskettuja arvoja. Voisimme hyvin tallentaa vain määrän ja hinnan, ja laskea rivin arvon aina käyttöliittymässä.

Valmiiksi laskettujen arvojen tallennus on kuitenkin usein kätevää (esimerkiksi suorituskykymielessä). Joskus jopa pakollista.

Ongelma 2 – Massapäivitykset

Massapäivitysten suorittaminen gallerian avulla on sekin tuhoon tuomittua. Syy on sama kuin edellisessä esimerkissä. Galleria noutaa rivejä tarpeen mukaan 100 kappaleen erissä.

Haluamme päivittää kaikkien tilausrivien määrää. Lisätään sovellukseen

• kenttä, jossa käyttäjä kertoo uuden tilausmäärän
• painike jolla uusi määrä päivitetään kaikille tilausriveille

Painikkeen OnSelect:issä tehdään seuraavaa.

ForAll(
      galUpdateQty.AllItems,Patch(
      update100item,
      {ID: ID},
      {quantity: txtNewQuantityForAll.Text}
     )
)

Asetetaan sovelluksessa uudeksi tilausmääräksi 10, ja painetaan ”Päivitä kaikki” painiketta.

Arvaatte jo miten käy. SharePoint-listaan päivittyy ainoastaan 100 ensimmäistä tuotetta. Lopuille jää vanha arvo.

Jos olisin ennen päivitystä selannut gallerian loppuun, olisi siihen ladattu myös rivit 100-200. Tällöin nekin rivit olisivat päivittyneet.

Massapäivitykset kannattaa tehdä joko Update-komennolla tai Flow:lla. Näin voi olla varma että toiminto kaikille halutuille tietolähteen riveille.

Yhteenveto

PowerAppsilla voi tehdä hyvin monipuolisia ja monimutkaisia sovelluksia. Tällöin joutuu usein käyttämään hieman luovuutta.

Liika luovuus on kuitenkin vaarallista, mikäli ei tiedä miten hyödynnetyt palikat toimivat.

Seuraavassa kirjoituksessa käyn läpi, miten muokattava galleria kannattaa oikeasti toteuttaa.