Power Apps sisältää tarvittavat kontrollit ja ikonit sovelluksien rakentamiseen. Valikoima saattaa tuntua suppealta, mutta näitä perus kontrolleja luovasti hyödyntäen voi toteuttaa itse niitä monimutkaisempia kontrolleja.
Olen jo pitkään halunnut toteuttaa Power Appsiin visualisoinnin, jolla näytetään prosenttiluku alla esitetyllä tavalla.
Näytettävän luvun lisäksi ympyrän kehää täytetään prosenttilukua vastaava määrä.
Miten tämä toteutetaan Power Appsin valmiilla peruskontrolleilla ja ikoneilla?
Otetaan selvää.
Visualisoinnin toteutus
Aloitetaan lisäämällä tyhjälle näytölle ympyrä.
Seuraavaksi lisätään läpinäkyvä ympyrä, jonka reunat asetetaan harmaaksi.
Ympyrä asetellaan näytölle siten, että sen reunat näyttävät sitä ennen luodun sinisen ympyrän reunoilta.
Lisätään kolmas ympyrä. Tämä on väriltään valkoinen ja myös sillä on harmaat reunat. Se on kooltaan hieman muita pienempi.
Asetetaan se ympyröiden keskelle. Lopputulos näyttää siniseltä renkaalta.
Lisätään näytölle vielä liukusäädin (slider), jonka minimiarvo on 0 ja maksimi 100. Sillä määritellään esitettävä luku.
Kolmesta ympyrästä muodostettu kokonaisuus kuvaa nyt arvoa 100%. Miten esitetään arvot 0-99%?
Piilottamalla sopivasti osa värillisestä ympyrästä.
Lisätään näytölle valkoinen laatikko (rctHalfer), joka peittää puolet alimpana olevasta värillisestä renkaasta (circleFiller) arvon ollessa alle 51.
Visible = slider.Value < 51
Jotta lopputulos on halutunlainen, on kontrollien oltava täsmälleen oikeassa järjestyksessä.
Hienoa! Visualisointimme osaa näyttää arvot 50 ja 100.
Lisätään toinen valkoinen laatikko (rctValue), joka sijoitetaan alimpana olevan värillisen ympyrän (circleFiller) ja sitä seuraavan ympyrän (circleOut) väliin.
Laatikon korkeus määräytyy valitun arvon mukaan
- mikäli arvo on 51 tai enemmän, korkeus on 400
- muutoin korkeus on 400 – valittu arvo * (400/50)
Ympyrän korkeus on 400. Näin laskettuna laatikko peittää arvovälillä 0-50 juuri oikean osuuden alla olevasta värillisestä ympyrästä.
Entä arvot 51-100?
Kun arvo on yli 50, siirretään rctValue-laatikko peittämään ympyrän oikeaa puolta.
X = If(slider.Value < 51; 129; 320)
Laatikon korkeussuuntainen sijainti määräytyy valitun arvon mukaan.
Y = If(slider.Value < 51; 252; 253+(slider.Value-50)*8)
Viimeistellään visualisointi lisäämällä ympyrän keskelle tekstikenttä, jossa esitetään valittu arvo. Kavennetaan samalla ympyröiden harmaita reunoja.
Lopputulos näyttää seuraavalta.
Animoitu visualisointi
Muutetaan visualisointia siten, että käyttäjän antaessa luvun, visualisoinnin väri nousee oikeaan kohtaan.
Lisätään näytölle tekstikenttä, jonka OnChange -tapahtumassa
- muutetaan varStartTimer-muuttujan arvo epätodeksi (false) ja heti perään todeksi (true)
- asetetaan varValue-muuttujan arvoksi käyttäjän antama arvo
Lisätään näytölle vielä ajastin (timer), joka käynnistyy (Start) varStartTimer-muuttujan arvon vaihtuessa todeksi.
Ajastimen kesto on 1000 millisekuntia.
Vaihdetaan liukusäätimen oletusarvoksi (default) ajastimen avulla laskettu arvo. Se alkaa nollasta ja päättyy 1000 millisekunnin päästä käyttäjän syöttämään lukuun.
Default = varValue*(Timer2.Value/1000)
Kun ajastin ja liukusäädin piilotetaan, näyttää visualisointi tältä.
Visualisoinnin paketointi komponentiksi
Visualisointia on mukavampi käyttää, kun sen paketoi komponentiksi. Luodaan uusi komponentti ja kopioidaan tehty visualisointi sen sisään.
Muokataan samalla visualisoinnin kokoa ja sijaintia. Tällöin X ja Y koordinaatteihin, sekä korkeuteen liittyviä kaavoja tulee muokata vastaavasti.
Komponentti saa parametrina visualisoitavan luvun. Oleellista on, että kyseisen parametrin muokkaaminen aiheuttaa komponentilla OnReset-tapahtuman (kts. kuva alla).
OnReset-tapahtumassa käynnistämme ajastimen ja asetamme muuttujaan saamamme arvon.
OnReset = Set(varStartTimer, false); Set(varStartTimer,true); Set(varValue, cmpVisualisointiSmall.Value)
Nyt voimme hyödyntää samaa komponenttia näytöllä useaan kertaa, eri näytöillä tai jopa eri Power Appseissa.
Visualisoinnin varioiminen
Nyt kun tämän tyyppisen visualisoinnin rakentamisen perusidea on selvillä, voimme helposti muokata sitä.
Esimerkisi alhaalta ylös täyttyvä visualisointi on edellistä esimerkkiä huomattavasti yksinkertaisempi toteuttaa. Tarvitsee säätää ainoastaan yhden laatikon korkeutta.
Yhteenveto
Tämä oli hauska harjoitus. Ja mainio muistutus siitä, mitä kaikkea voi rakentaa muutamalla ympyrällä, laatikolla ja ajastimella.
Timo Pertilä 