Canvas Power Apps ja komponentit

Power Appsin komponentit ovat kehittyneet sitten edellisten kirjoitusten, joten on korkea aika käydä uudelleen läpi mitä niillä voi tehdä.

Lyhyet kertaus alkuun. Mitä komponenttien avulla tyypillisesti toteutetaan?

• Staattisia toistuvia elementtejä (esimeriksi jokaisella näytöllä toistuva tausta)
• Toiminnallisia toistuvia elementtejä (navigaatio, geneeriset varmistusdialogit jne)
• Funktioita (näytä merkkijonon n ensimmäistä merkkiä jne)

Helpoimmalla komponenttien kanssa pääsee, kun jakaa sovelluksen kaikki tiedot sen kanssa (Access app scope = true).

Näin komponentista käsin pääsee käsiksi sovelluksen kokoelmiin ja paikallisiin muuttujiin. Tällainen komponentti ei ole enää yleiskäyttöinen eri sovellusten kesken. Eikä tällä yhdellä vivulla ratkaista kaikkia komponentteja vaivanneita puutteita.

Komponenttien uudet ominaisuudet ovat vielä kokeiluvaiheessa (experimental feature), eli ne tulee käydä erikseen ruksimassa päälle.

Tämän jälkeen komponenttille voi lisätä neljän tyyppisiä ominaisuuksia (property).

Itse hahmottan näiden erot seuraavasti

• Data
  • Voi välittää komponentille arvon (input) tai
  • Käyttää komponentin muodostamaa arvoa sovelluksessa (muissa kuin tapahtumapohjaisissa ominaisuukssisa kuten OnSelect, OnChange, OnVisible)
• Function
  • Voi tehdä yleiskäyttöisiä funktioita ilman käyttöliittymää. Funktiolle annetaan 0-n parametria ja sillä on aina arvo.
• Event
  • Kun komponentissa tapahtuu muutos (esimerkiksi käyttäjä painaa painiketta), voi tästä välittää tiedon sovellukselle. Ominaisuutta käytetään sovelluksessa kuten muitakin tapahtumiin sidottuja (OnSelect, OnChange, OnVisible..) ominaisuuksia
• Action
  • Vaikutetaan sovelluksesta käsin komponentin toimintaan. Käytetään OnSelect, OnChange, OnVisible jne ominaisuuksissa. Esim. kun sovelluksessa painetaan nappia, tehdään komponentissa toimenpide x.

Käydään vaihtoehdot vielä yksitellen läpi.

Komponentin ominaisuus – Data

Komponenteissa oli aluksi ainoastaan Data-ominaisuuksia. Niiden avulla sovelluksessa voi asettaa komponentille arvoja (input property) tai komponentti voi välittää arvon sovellukselle (output property).

Voimme toteuttaa sovelluksen otsikkopalkin komponenttina. Siinä esitettävä sovelluksen nimi on input-ominaisuus (asetetaan sovelluksesta) ja checkboxin valittu arvo taas output-ominaisuus (arvoa käytetään sovelluksessa).

Komponentin ominaisuus – Event

Sovelluksessa on usein tarpeen reagoida komponetin sisällä tapahtuneeseen tapahtumaan. Esimerkiksi painikkeen painamiseen. Tämä onnistuu event-ominaisuudella.

Lisätään otsikkopalkkiin hakukenttä sekä hakupainike.

Luodaan SearchOnSelect niminen event-ominaisuus, jonka avulla sovelluksessa voi reagoida painikkeen painamiseen. Lisätään ominaisuudelle SearchText-parametri, jolla välitetään käyttäjän syöttämä hakuteksti sovellukselle.

Kun Search-painiketta painetaan, triggeröidään komponentin SearchOnChange-tapahtuma ja annetaan sille parametrina käyttäjän syöttämä hakuteksti.

OnSelect = cmpNewHeader.SearchOnSelect(inpSearchText.Value)

Tapahtumaan reagoidaan sovelluksessa komponentin SearchOnSelect-ominaisuudessa. Tallennetaan siellä tapahtumaan liittyvä teksti (SearchText) kontekstimuuttujaan.

SearchOnSelect = UpdateContext({locSearchText:SearchText})

Näin meillä on haku-painikkeen painamisen jälkeen aina tuore hakuteksti käytössämme.

Event-ominaisuudet kannattaa nimetä tyyliin OnSelect, OnChange, OnReset jne, sillä niitä käytetään aivan samalla tavalla kuin vakiokontrollien OnX -ominaisuuksia.

Komponentin ominaisuus – Function (output)

Vihdoin komponenteilla voi tehdä helposti myös funktioita. Eli toistuvia koodinpätkiä, johon ei liity käyttöliittymäelementtejä.

Haluamme toteuttaa TrimmedText-funktion, joka saa parametrina merkkijonon sekä halutun pituuden. Mikäli merkkijono on tätä pidempi, lyhentää funktio sen haluttuun pituuteen ja lisää perään ”..”.

Luodaan function-ominaisuus ja määriteltään sen olevan mallia output. Lisätään sille halutut parametrit.

Kirjoitetaan ominaisuteen haluttu kaava.

If(
    Len(TextToTrim) <= TrimmedTextLength,
    TextToTrim,
    Left(
        TextToTrim,
        TrimmedTextLength
    ) & ".."
)

Sovelluksessa funktiota käytetään kuin mitä tahansa funktiota. Sille annetaan parametrit ja funktion arvona on lopputulos.

Komponentin ominaisuus – Function (input)

Funktion voi toteuttaa myös toisinpäin. Hetkinen…

Lisätään komponentille function-tyyppinen Input-ominaisuus (nameFormat), jolla on kaksi parametria (firstName ja lastName).

Seuraavaksi lisätään komponentille tekstikenttä, jossa näytetään nameFormat-ominaisuuden arvo parametreilla firstname = Timo ja lastname = Pertilä.

Sovelluksessa komponentti ei näytä vielä mitään sisältöä. Emme ole vielä määritelleet, miten haluamme komponentin sen esittävän.

Idea on että sovelluksesta käsin kerrotaan, mitä komponentti tekee sen input-ominaisuuden parametreilla. Asetetaan sovelluksessa nameFormat-ominaisuuden arvoksi seuraava.

nameFormat = Left(firstname,1) &". " & cmpFunctions_1.TrimmedText(lastname,9)

Eli kerrotaan komponentille nameFormat-ominaisuuden arvon olevan etunimen ensimmäinen kirjan ja sukunimen 9 ensimmäistä merkkiä.

Huomaa, ettei tässä yhteydessä välitetä etu- ja sukunimen arvoja. Ne komponentti saa sisäänsä jotain muuta kautta.

Komponentin ominaisuus – Action

Action-ominaisuutta käytetään sovelluksen tapahtumapohjaisissa ominaisuuksissa (OnSelect, OnCheck jne). Luodaan komponentille AddMember -ominaisuus, jolla on parametrit etu- ja sukunimi (FirstName, LastName).

AddMember-tapahtumassa lisätään parametrina saatu henkilö komponentin sisäiseen kokoelmaan.

AddMember: Collect(colMembers, {Firstname:FirstName, Lastname: LastName})

Lisätään komponenttiin galleria, jossa esitetään colMembers-kokoelman rivit.

Lisätään sovelluksen näytölle painike, jota painettaessa suoritetaan AddMember-tapahtuma halutuilla parametreilla.

OnSelect = cmpFunctions_1.AddMember("Timo", "Pertilä")

Muutaman painalluksen jälkeen komponetin sisällä oleva galleria näyttää seuraavalta.

Yhteenveto

Komponentit alkavat olla varsin monipuolisia. Loppuun vielä muutama huomio.

• Access app scope -asetuksella voit jakaa sovelluksen ja komponentin välillä muuttujat, kokoelmat, kontrollit ja tietolähteet. Helppoa mutta tällainen komponentti ei ole yleiskäyttöinen eri sovellusten kesken.
• Kaikkien komponenttien ei tarvitse olla yleiskäyttöisiä
• Yksi komponentti voi sisältää useita ominaisuuksia. Voit niputtaa kaikki funktiosi yhden komponentin sisään. Tai voit hyödyntää samassa komponentissa sekä Data että Event -ominaisuuksia
• Komponentteja ei voi käyttää gallerian sisällä