PowerAppseja tehdessä joutuu ajoittain kopioimaan samoja kontrolleja ja koodeja usealle näytölle. Tyypillinen esimerkki tästä on navigaatio, joka on jokaisella näytöllä.
Niinpä. Aivan typerää hommaa.
Onneksi tämä loppuu aivan pian. PowerAppsiin on tulossa uudelleenkäytettävät komponentit (components). Niillä rakennetaan omia itsenäisiä kokonaisuuksiaan, joita voi hyödyntää sovelluksen eri näytöillä. Kun komponenttiin tehdään muutoksia, näkyvät ne kaikkialla missä kyseistä komponenttia käytetään.
Navigaatio tehdään jatkossa siis vain kerran (komponentiksi) ja yhtä ja samaa navigaatiota käytetään jokaisella näytöllä. Huippua!
Mikä parasta, komponentin voi myös tallentaa ja ladata toisiin PowerAppseihin.
Näin on mahdollista toteuttaa organisaation yhteiseen käyttöön PowerAppsin ”osia”, joita voi käyttää kaikissa PowerAppseissa.
Keskitytään tässä kirjoituksessa kuitenkin vain yhteen asiaan. Siihen navigaatioon.
Navigaation toteuttaminen komponenttina
Aloitetaan luomalla tyhjä sovellus, jossa on neljä näyttöä. Kullakin näytöllä on teksti, joka kertoo millä näytöllä ollaan. Yksi näytöistä on hierakiassa toisen sisällä (Screen 2 -> Screen 2_1).
Komponentit ovat kokeiluvaiheessa (experimental features), joten ne tulee erikseen aktivoida asetuksista.
Komponentin luominen
Seuraavaksi luodaan uusi komponentti. Valitaan näyttöjen (screens) vierestä komponentit ja klikataan New component.
Komponenttia muokataan aivan kuten näyttöjä. Siihen lisätään kontrolleja ja niihin liittyviä pieniä koodinpätkiä jne.
Asetetaan komponentin koko vastaamaan sovelluksen oikeaan reunaan sijoitettavaa navigaatioelementtiä.
Toisin kuin näytöt, komponentit ovat täysin itsenäisiä kokonaisuuksia (koska niitä voi käyttää missä tahansa PowerAppsissa). Et siis voi käyttää komponentin sisällä näyttöjen ja niissä olevien kontrollien ominaisuuksia. Komponentti ei myöskään näe PowerAppsissa luomiasi muuttujia.
Miten ihmeessä voin tehdä sillä komponentilla sitten yhtään mitään?
Komponentin input/output propertyt
Tieto komponentin ja sitä hyödyntävän PowerAppsin välillä kulkee tarkoitusta varten luotavien räätälöityjen ominaisuuksien (custom properties) välityksellä.
Navigaatiokontrollimme tulee tietää, mitä elementtejä esitettävässä navigaatiossa on. Luodaan uusi räätälöity ominaisuus, jolla välitetään tämä tieto taulukkomuodossa (table) näytöltä komponentille.
Räätälöidyt ominaisuudet ovat yksisuuntaisia. Niillä välitetään tietoa joko näytöltä komponentille (input) tai komponentilta näytölle (output).
Lisätään tehdylle ominaisuudelle vielä esimerkki sen saamasta syötteestä.
Table({
NavTitle: "Screen 1",
NavLevel: 1,
Link: Screen1},
{
NavTitle: "Screen 2",
NavLevel: 1,
Link: Screen2},
{
NavTitle: "Screen 2.1",
NavLevel: 2,
Link: Screen2_1})
PowerApps ei pidä esimerkkitaulukkoni sisältämästä näyttö-objektista.
Saa kuitenkin luvan kelvata.
Ryhdytään rakentamaan varsinaista navigaatiota komponentin sisään. Lisätään galleria, jonka tietojoukkona (items) on luomamme custom property (NavigationItems).
Huomaa että viittauksessa tule käyttää myös komponentin nimeä (comNavigation.NavigationItems).
Lisätään galleriaan tekstikenttä, jonka
- Otsikko (text) on navigointielementin otsikko (NavTitle)
- onSelect tapahtumassa siirrytään otsikkoa vastaavalle näytölle (Navigate(ThisItem.Link, ScreenTransition.None))
- Tekstiä sisennetään 30 pikseliä, mikäli kyseessä on 2. tason navigaatioelementti (X = If(NavLevel = 2, 30, 0))
Navigaatiokomponentti pitää tietenkin vielä lisätä jokaiselle näytölle (Insert -> Components).
Navigaatiorakenteen määrittäminen
Näyttöjen navigaatiot ovat vielä tyhjiä, koka emme ole välittäneet niille tietoa navigaation sisällöstä.
Luodaan sovelluksen OnStart -tapahtumassa kokoelma (colNavigation), jossa kuvataan navigointirakenne.
Huom! Linkki on näyttöobjekti (Screen), ei merkkijono.
Asetetaan kokoelma jokaisen näytön navigaatiokomponentin input-arvoksi.
Navigaatiomme herää samantien eloon.
Aktiivisen näytön korostaminen navigaatiossa
Navigaatio olisi siistimpi, jos se näyttäisi millä näytöllä olemme. Komponentti ei tätä tiedä, ellei sitä sille kerrota.
Lisätään komponentille toinen räätälöity ominaisuus (CurrentScreen), jolla kerrotaan millä näytöllä ollaan.
Jokaisella näytöllä annetaan uuden ominaisuuden arvoksi kyseistä näyttöä vastaava nimi navigaatiorakenteessa.
Muokataan lopuksi komponentin navigointigalleriaa seuraavasti. Mikäli rivin otsikko on sama kuin nykyisen näytön nimi, vaihdetaan
- Otsikon fontti lihavoiduksi ja
- Rivin taustaväri harmaaksi
Toimii!
Avautuva navigaatio
Kuvitellan että näyttöjä on todella paljon. Tällöin koko navigointihierarkiaa ei haluta pitää avonaisena. Muutetaan navigointia siten että siinä näytetään ainoastaan aktiivisen näytön alanäytöt (jos niitä on).
Lisätään navigointikokoelmaan omaksi kentäkäkseen jokaisen tason äititaso (ParentScreen).
Päivitetään NavigationItems input parametrin tietomallia myös komponentissa.
Sekä korjataan jokaiselle näytöille lisätyille komponeteille input propertyn arvot oikeiksi.
Nyt komponettimme tietää mikä on minkäkin navigaatioelementin äititaso (parent).
Muutetaan navigaatiota siten, että se näyttää vain navigaation ensimmäisen tason.
Jolloin navigaatio näyttää tältä.
Muutetaan sitä seuraavaksi siten, että mikäli aktiivisen näytön alla on alatasoja, näytetään myös ne.
Navigointigallerian tietojoukko onkin
Items = Filter(comNavigation.NavigationItems, NavLevel = 1 Or ParentScreen = comNavigation.CurrentScreen)
Jolloin navigaatio näyttää tältä.
Viimeisenä silauksena navigaation pitäisi aueta oikeasta paikasta myös kun ollaan hierarkiassa jollain alatasolla (esim Screen2_1).
Jotta tämä onnistuu, pitää LookUp-funtktiolla selvittää mikä on aktiivisen tason äititaso. Ja näyttää myös kaikki ne navigaation elementit, joilla on sama äititaso.
Items = Filter(comNavigation.NavigationItems,
NavLevel = 1 Or ParentScreen = comNavigation.CurrentScreen
Or ParentScreen = LookUp(comNavigation.NavigationItems,
NavTitle = comNavigation.CurrentScreen).ParentScreen
)
Vihdoin navigaatiomme on valmis.
Yhteenveto
Komponentit tulevat mullistamaan PowerAppsien rakentamisen. Ne ovat kuitenkin vielä kokeiluvaiheessa, eli niissä on kaikenlaisia isoja ja pieniä puutteita.
Kansalaiskehittäjlle komponentit voivat tuntua hankalilta. Ne ovat täysin eristettyjä muusta ratkaisuista, jolloin kaiken tiedonvälityksen oman PowerAppsin ja komponentin välillä joutuu rakentamaan itse.
Ratkaisussa komponenttia käytetään samalla tavalla kuin vaikkapa alasvetovalikko-kontrollia. Niitä voi olla ratkaisuissa useita, eivätkä ne ole toisistaan tietoisia. Ne ovat saman komponentin eri ilmentymiä. Tämän takia esimerkissämme jokaisella näytöllä navigaatiolle pitää kertoa samat asiat (mikä on navigaatiorakenne ja millä näytöllä ollaan).
Tämäkin saattaa hämmentää osaa tekijöistä.
Seuraavassa kirjoituksessa tehdään joku usean eri PowerAppsin käyttämä komponentti.
Timo Pertilä 