Power Appsin komponentit tulevat huhtikuussa kaikkien saataville (GA). Samalla niihin tulee lukuisia toivottuja uudistuksia kuten
- Komponentteja voi käyttää gallerian ja lomakkeiden sisällä
- Komponentissa voi käyttää kokoelmia
- Komponentille voi välittää parametrina tietolähteen (connector).
- Komponenteista voi koostaa komponenttikirjaston, jonka voi julkaista muiden käyttäjien käyttöön. Kun kirjaston komponentteihin tehdään muutoksia, tiedotetaan muutoksista automaattisesti kaikkia komponentin käyttäjiä.
Uutisen kunniaksi toteutetaan tällä kertaa komponentti.
Valinnan tekeminen ikoneita hyödyntäen
Lomakkeet ovat keskeinen osa Power Apps -toteutuksia. Aina välillä niissä on kätevä hyödyntää ikoneita perinteisten valinta-kontrollien (alasvetolista, radiobutton jne) sijaan.
Esimerkiksi
- Mikä on fiilis juuri nyt? (Käyttäjä voi valita erilaisista hymynaamoista)
- Mihin kategoriaan ilmoitus kuuluu (Käyttäjä valitsee kategorian niitä kuvaavista ikoneista)
Tehdään tätä varten uudelleenkäytettävä komponentti, joka
- saa parametrina joukon valittavia kohteita. Kullakin kohteella on sitä kuvaava otsikko, ikoni ja väri
- näyttää ikonit peräkkäin
- osaa skaalata ikonit oikeaan kokoon riippuen komponentin omasta koosta
- kertoo paluuarvona valitun ikonin otsikon
Komponenttia voi käyttää ratkaisuissa sellaisenaan tai sen voi jatkossa upottaa osaksi lomaketta tai galleriaa.
Aloitetaan.
Komponentin luominen ja mukautettujen ominaisuuksen lisääminen
Luodaan tyhjä Power Apps ja siihen uusi komponentti.
Lisätään komponetille mukautettu ominaisuus icons (custom property). Tietotyyppinä käytetään taulukkoa (kokoelmien käyttö ei ole vielä mahdollista).
Lisätään omaksi ominaisuudekseen väri, jolla valintaa korostetaan (selectedColor).
Komponentin ainoa tuloste (output property) on valitun ikonin otsikko (Value).
Vielä kun asetetaan icons-ominaisuudelle järkevä arvo, niin voimme aloittaa. Arvoa käytetään komponentin kehitysvaiheessa. Komponenttia käytettäessä arvo asetetaan kehitettävästä Power Appsista.
Table(
{value: "Smile";
icon: EmojiSmile;
color: Green
};
{value: "Neutral";
icon: EmojiNeutral;
color: Yellow
};
{value: "Sad";
icon: EmojiNeutral;
color: Orange
};
{value: "Sad";
icon: EmojiSad;
color: Red
}
)
Komponentin toiminnallisuuden rakentaminen
Aloitetaan lisäämällä komponenttiin tyhjä vaakasuuntainen valikoima (galleria).
Gallerian sisällöksi (Items) tulee komponentin icons-ominaisuuden arvo. Komponentin ominaisuuksiin viitataan tyylillä komponentinnimi.ominaisuus (ComponentSelection.icons).
Lisätään galleriaan ikoni (Lisää -> Kuvakkeet -> Valitse mikä tahansa) ja asetetaan sen kuvakkeeksi (icon) gallerian kohteen ikoni (ThisItem.icon).
Tehdään sama ikonin värin kanssa.
Komponentin skaalautuvuus
Haluamme komponenttimme skaalautuvan aina oikeaan kokoon. Tällöin meidän tulee huomioida kaksi muuttujaa
- komponentin leveys
- esitettävien ikonien lukumäärä
Näiden avulla voimme laskea
- ikonien koon
- ikonien välisen etäisyyden (käytännössä gallerian templaten koon)
Miten ihmeessä ne lasketaan?
Suunnitelman hahmottelu paperille helpottaa. Lopputuloksena on varsin yksinkertainen logiikka.
Asetetaan ensin galleriassa esitettävän ikonin leveys oikeaksi (komponentin leveys / ikonien määrä + 1).
Ikoni asettuu oikeaan kokoonsa, kunhan sen korkeus asetetaan vielä kuin leveys.
Kaikki kuvakkeet eivät näy, sillä gallerian templaten koko väärä. Korjataan se suunnitelman mukaiseksi (komponentin leveys / ikonien lukumäärä).
Samalla asetetaan mallin täyttö -ominaisuus (marginaali) nollaksi.
Päivitetään lopuksi muutama muukin ominaisuus dynaamisiksi.
Gallerian leveys on aina sama kuin komponentin leveys
Ja gallerian korkeus sama kuin komponentin korkeus.
Height: ComponentSelectIcon.Height
Komponentin korkeus lasketaan samalla kaavalla kuin ikonien korkeus.
Height: ComponentSelectIcon.Width / (CountRows(ComponentSelectIcon.icons) +1)
Nyt ikonit täyttävät aina nätisi koko komponentin leveyden.
Valinnan tallentaminen
Käyttäjän tekemän valinnan tallentaminen ei ole hankalaa. Galleriassa olevaa ikonia klikattaessa (OnSelect) tallennetaan ikonin arvo (value) muuttujaan (varSelectedIcon).
Tätä muuttujaa käytetään komponentin output propertyn arvona.
Valinnan korostaminen
Haluamme korostaa käyttäjän tekemää valintaa jotenkin. Voisimme disabloida valitun kohteen tai himmentää muiden kuin valitun ikonin väriä.
Korostetaan valintaa kuitenkin yksinkertaisella alleviivauksella.
Tehdään alleviivaukselle tilaa muokkaamalla komponentin korkeudeksi sama kuin gallerian templaten korkeus (komponentin leveys / ikonien lukumäärä).
Lisätään galleriaan suorakulmio ja asetetaan sen väriksi parametrina saatu selectedColor.
Alleviivaus on näkyvillä ainoastaan mikäli kyseisen kohteen arvo (value) on sama kuin valitun kohteen arvo.
Visible: varSelectedIcon = ThisItem.value
Jotta alleviivaus on aina oikealla paikalla ja oikean kokoinen, asetetaan sille vielä seuraavat arvot.
Sijainti Y-akselilla määräytyy ikonin korkeuden perusteella.
Y: icoIcon.Height + (icoIcon.Height/10)
Samoin leveys.
Width: icoIcon.Width
Myös korkeus määräytyy ikonin korkeuden mukaan, mutta pykälittäin.
If(icoIcon.Height > 100; 4; icoIcon.Height > 50; 2;1)
Komponentin käyttö
Komponenttimme on valmis. Miten sitä hyödynnetään?
Voimme käyttää sitä suoraan canvasissa. Kuvassa samaa komponenttia on käytetty kolmella eri ikonijoukolla.
Tulevaisuudessa komponentteja voi käyttää gallerioiden ja lomakkeiden sisällä.
Toteutetut komponentit voi jatkossa jakaa muiden käyttöön komponenttikirjaston avulla.
Yhteenveto
Komponenttien teko saattaa tuntua aluksi hankalalta. Niihin kannattaa kuitenkin tutustua, sillä tulet jatkossa todennäköisesti vähintään hyödyntämään muiden tekemiä komponentteja.
Mikäli taas teet itse yhtään enempää Power Appseja, et voi jatkossa välttyä komponenttien teolta. Mikäli haluat niiden olevan suorituskykyisiä ja ylläpidettäviä.
Timo Pertilä 