(Canvas) Power Appsin komponenteista pääsee vihdoin käsiksi sen isäntäsovelluksen tietoihin (app scope). Olen uudistuksesta enemmän kuin innoissani.

Miksi tästä nyt pitää intoilla? Miksi tämä uudistus on tärkeä? Mikä nyt oikeasti muuttuu?

Alun perin komponentit suunniteltiin käytettäväksi useassa eri sovelluksessa. Tästä johtuen niiden tekeminen on ollut aloitteleville tekijöille aivan liian monimutkaista. Oikeasti samaa komponenttia tulee hyödynnettyä useassa sovelluksessa erittäin harvoin. Paljon yleisempää on kierrättää samoja elementtejä yhden sovelluksen sisällä.

Ja se on nyt huomattavasti aikaisempaa helpompaa. Kansalaiskehittäjätasoa.

Käydään muutos läpi esimerkin avulla.

Esimerkki – Tehtävien hallinta

Rakennetaan sovellus, jossa esitetään tehtäviä tilojen mukaan omissa lokeroissaan. Tehtäviä voi siirrellä lokerosta toiseen.

Eli jotain tällaista.

Luodaan Dataverse for Teamsiin uusi taulu. Kustakin tehtävästä (Tasks) tallennetaan

  • Otsikko (Name)
  • Tila (Status)
  • Luontiaika (Created On, vakiokenttä)
  • Luoja (Created By, vakiokenttä)

Toteutus ilman komponentteja

Ensimmäisessä versiossa luomme kullekin tilalle oman gallerian, joissa tehtävät esitetään. Kunkin tehtävän kohdalla on painikkeet, joista tilaa voi vaihtaa. Tällöin tehtävä siirtyy näkymään toiseen galleriaan.

Mutta… Loimme juuri näytölle 18 kontrollia. Ja mikä kamalampaa, tehdessämme tehtävälistojen ulkoasuun tai toiminnallisuuteen muutoksia, teemme ne aina kolmeen paikkaan. Ei hyvä.

Juuri tällaisia tilanteita varten meillä on komponentit.

Toteutus perinteisellä komponenteilla

Tehdään ensin komponentti siten, kuin se tehtiin ennen uudistusta. Ehkäpä samalla selviää, miksi komponentteja näkee käytettävän niin vähän.

Navigoidaan näytöiltä (Screens) komponentteihin (Components) ja luodaan uusi komponentti.

Näytettävien tietojen välittäminen

Komponentti ei ole tietoinen itse sovelluksesta. Sille tulee siis välittää tieto siitä, mitä galleriassa halutaan esittää.

Luodaan komponentille uusi taulukko-tyyppinen ominaisuus (input custom property) nimeltään Tasks. Sen avulla näytöltä välitetään komponentille esitettävät tehtävät.

Tämän jälkeen määrittelemme Tasks-taulukon rakenteen. Eli mitä kenttiä parametrina saatava taulukko sisältää.

Miten näytämme listalla tehtävän luojan? No sepä ei olekaan aivan yksinkertaista. Tehtävän luoja kun on relaatio käyttäjät-tauluun. Luodaan suosiolla oma kenttä tehtävän luojan nimelle (CreatedByName).

Luodaan komponentin sisään lopuksi galleria, jonka sisältö on parametrina saatava taulukko (Tasks).

Seuraavaksi luodaan näyttö ja lisätään siihen tekemämme komponentti.

Komponentin Tasks-ominaisuuden arvoksi asetetaan halutun tilan mukaan suodatetut tehtävät (1). Tämän jälkeen kerrotaan, mitkä tehtävän kentät vastaavat mitäkin taulukon saraketta (2).

Tehtävän luojan nimeä emme voi valita, sillä se viittaa toiseen tauluun (Tasks -> Käyttäjä).

Lisäämme sen omaksi sarakkeekseen AddColumns-komennolla (1), jolloin se voidaan välittää eteenpäin komponentille (2).

AddColumns(Filter(Tasks, 'Status (cra1a_status)' = 'Status (Tasks)'.Backlog), "CreatorName", 'Created By'.'Full Name')

Hiki meinaa tulla jo nyt.

Tehtävän päivittäminen

Tehtävän tila tulisi päivittää painiketta painettaessa. Tätäkään ei voi tehdä komponentilla (vanhassa mallissa), vaan päivitys hoidetaan sovelluksen puolla. Komponentti ainoastaan kertoo, mitä riviä päivitetään ja mihin tilaan.

Tämä tehdään komponentin tapahtuma-ominaisuudella (behaviour property). Luodaan sellainen (OnStatusUpdate) ja määritellään sille kaksi pakollista parametria

  • Mitä tietuetta päivitetään (TaskGUID)
  • Tietueen uusi tila (NewStatus)

Tehtävään liittyvää painiketta painettaessa käynnistetään tapahtuma-ominaisuus (OnStatusUpdate). Parametrina se saa painikkeen mukaisen tilan sekä tehtävän id:n.

Vastaava kaava lisätään komponentilla jokaisen painikkeen kohdalle.

Nyt voimme reagoida komponentissa sijaitsevan painikkeen painamiseen (eli OnStatusUpdate -tapahtumaan). Päivitämme (näytöllä) parametrina saamamme tehtävän (TaskGUID) oikeaan tilaan parametrin (NewStatus) perusteella.

Kas näin.

Lopputulos on mitä haettiinkin. Näytöllä on ainoastaan kolme komponenttia18 kontrollin sijasta. Komponentin ulkoasua voi päivittää keskitetysti komponentin sisällä. Toiminnallisuudesta osa määritellään kuitenkin vielä näytöllä.

Mutta helppoa tai yksinkertaista tämä ei mielestäni ollut.

Josta päästäänkin siihen innostumiseni aiheeseen.

Toteutus sovelluksen tiedot näkevällä komponentilla

Luodaan toinen komponentti. Tällä kertaa asetetaan uusi ominaisuus (Acces app scope) päälle.

Näin komponentti saa näkyvyyden sovellukseen, jonka sisällä se on! Pääset käsiksi muuttujiin (globaaleihin, et konteksti), kontrolleihin, tietolähteisiin, kokoelmiin, kuviin jne.

Nyt komponentille tarvitsee luoda ainoastaan yksi parametri (TaskStatus). Sen avulla kerrotaan mitä tehtäviä siinä esitetään.

Tämän jälkeen suodatamme gallerian rivit parametrina saadun tilan perusteella. Aivan kuin galleria olisi lisätty itse sovellukseen.

Myös tilan päivittäminen voidaan tehdä suoraan komponentin sisällä painikkeen OnSelect-tapahtumassa. Käytetty kaavakin on paljon tutumman näköinen.

Lisätään näytölle kolme kappaletta juuri tekemäämme komponenttia. Kullekin asetetaan oikea TaskStatus arvo (Backlog, In Progress, Done)..

Ja olemme valmiit!

Näin tämä olisi aina pitänyt toimia.

Lopuksi siistimme tehtävälistaa hieman. Muutokset tehdään luonnollisesti kertaalleen yhteen paikkaan (komponenttiin).

Yhteenveto

Vihdoin komponenttien käyttö on niin yksinkertaista, ettei sitä tarvitse erikseen opetella. Komponenttien avulla Power Apps on usein sekä suorituskykyisempi että ylläpidettävämpi.

Muista kuitenkin ettei näin toteutettuja komponentteja voi hyödyntää muissa sovelluksissa. Se on olematon hinta tästä helppoudesta.