Viime viikolla rakensimme PowerAppsin komponentin avulla navigaation. Se on ilmeiseisin (ja kulunein) esimerkki komponentin hyödyntämisestä, joten ajattelin tällä viikolla tehdä jotain muuta.
Voit tallentaa tekemäsi komponentin (export) ja ottaa sen käyttöön (import) missä tahansa toisessa PowerAppsissa.
Olemme askeleen lähempänä organisaatiotasoisen komponenttikirjaston rakentamista.
Hallintamallimielessä voisi olla kätevää, mikäli kaikissa organisaation PowerAppseissa olisi yhtenevä alatunniste (footer). Se sisältäisi
- Organisaation logon
- Copyright tekstin
- Sovelluksen omistajan nimen
- Sovellukseen liittyvän ohjetekstin
Alatunniste kannattaa tietenkin toteuttaa jaettavana komponenttina. Vieläpä sellaisena jota voi käyttää kaikissa sovelluksissa riippumatta siitä onko se tehty puhelin- , tabletti- vai selainkäyttöön.
Tuumasta toimeen.
SharePoint-lista
Tiedot alatunniste hakee kaikille PowerAppseille yhteisestä SharePoint-listasta. Optimitilanteessa lista toimii myös organisaation PowerApps-katalogina.
SharePoint-lista näyttää tältä.
Uuden komponentin luonti ja custon propertyjen määrittäminen
Luodaan uusi komponentti (comFooter).
Kätevintä olisi jos komponentti lukisi luomaamme PowerApps Catalog -listaa itse. Sitä se ei kuitenkaan (ainakaan toistaiseksi) voi tehdä.
Luommekin komponentille input propertyn (itemFromPowerAppsCatalogue), jonka avulla sille välitetään oikea rivi SharePoint-listaltamme. Ominaisuus on siis tyypiltään tietue (Record).
Kuvataan tietueen sisältö Advanced-välilehdellä.
Nyt komponentillamme on kaikki sen tarvitsema tietosisältö. Voimme siirtyä rakentamaan varsinaista käyttöliittymää.
Logo
Komponenttiin ei voi paketoida kuvia. Tuntuisi hassulta, että jokaisen organisaation PowerApps-kehittäjän pitäisi kaivaa jostain organisaation logo ja välittää se yleiskäyttöiselle komponetillemme.
Näytetäänkin logo suoraan yrityksen internet-sivulta, jolloin PowerApp:in kehittäjän ei tarvitse miettiä sitä ollenkaan.
Copyright-teksti
Asetetaan komponentin alaosa näyttämään
- copyright-teksti (kuluvalla vuodella)
- sovelluksen omistajan nimi (joka on tallennettuna SharePoint-listaan ja jota voidaan vaihtaa muuttamatta itse sovellusta)
Text = "© " & Year(Today()) & " Digital Illustrated, App owner: " & comFooter.ItemFromPowerAppsCatalogue.AppOwner
Lisätiedot
Sovellukseen liittyvä info/ohjeteksti voi olla pitkä. Se tulee näkyviin oikean alareunan info-ikonia painamalla.
Lisätään ohjetekstiä varten harmaa tausta (Insert – Icons – Rectangle).
Sekä varsinainen tekstikenttä, jossa ohjeteksti näytetään.
Text = comFooter.ItemFromPowerAppsCatalogue.InfoText
Käyttäjän painaessa oikean alareunan ikonia, päivitetään muuttujan (showInfo) arvoa.
OnSelect = Set(showInfo, !showInfo)
Muuttujan arvoa käytetään sekä infotekstin, että sen taustana toimivan harmaan laatikon näkyyvys (visible) ominaisuuden arvona.
Muuttuja on ennen ensimmäistä painallusta tyhjä, joten ehdosta tulee hieman erikoinen.
Visible = If(IsBlank(showInfo), false, showInfo)
Lisätään lopuksi info/ohjetekstin viereen ruksi, josta koko näytön täyttävä infoteksti on helppo sulkea. Eli päivitetään muuttujan showInfo arvoksi false.
Komponentin mukautuminen eri kokoihin
PowerAppsin kehittäjä voi vaihtaa komponentin kokoa. Tämä on hyvä huomioida komponenttia rakennettaessa.
Asetetaan kaikkien kontrollien sijainnit ja leveydet riippumaan komponentin leveydestä tai korkeudesta, sekä muista komponentin kontrolleista.
Esimerkiksi oikean alareunan ikonin X-sijainti on komponentin leveys – 40.
X = comFooter.Width - 40
Sijainti Y-akselilla on taas komponentin korkeus – 39.
Alaosan tekstin leveys on sama kuin komponentin leveys. Tekstissä on sopivasti marginaalia, jottei se mene koskaan logon tai info-ikonin päälle.
Kun kaikkien kontrollien sijainnit, leveydet ja korkeudet on määritelty suhteellisiksi komponenttiin ja muihin kontrolleihin nähden, ollaan lähellä maalia.
Säädetän vielä hieman fontteja. Mobiilisovelluksissa komponenttimme fonttikoko menee kovin pieneksi. Asetetaan fonttikoko pykälää suuremmaksi (12), mikäli näytön leveys on alle 650 (mobiililayoutin leveys on 640).
Näin toimimalla rakennetaan kokonaisuus, joka toimii sekä tabletilla että puhelimella.
Alatunnisteen käyttö
Miltä lopputulos näyttää?
Tallennetaan komponentti omalle työasemalle (Insert – Components – Export component).
Tämän jälkeen ladataan se viime viikolla tekemäämme esimerkkiin (Insert – Components – Import component).
Alustetaan PowerAppsin OnStart:ssa kokoelmaan (colApplicationInfo) sovellusta vastaavan rivin tiedot SharePoint-listasta.
ClearCollect( colApplicationInfo, LookUp( 'PowerApps Catalog', Title = "ComponentsDemo") )
Tämä kokoelma (itseasiassa sen ensimmäinen rivi) välitetään input propertyn avulla alatunnistekomponentille.
Lopputulos näyttää tältä!
Käyttäjän painaessa oikean alareunan ikonia, avautuu koko näytön kokoinen ohjesivu teksteineen.
Ladataan sama komponentti puhelimelle suunniteltuun PowerAppsiin.
Hyvin toimii siinäkin.
Yhteenveto
Idea organisaatiossa jaettavista yhteiskäyttöisistä komponenteista on houkutteleva. Toistaiseksi komponenteissa on kuitenkin yksi puute. Ne ladataan kokonaisuudessaan PowerApps-sovellukseen, jolloin sovelluksen tekijä voi mielin määrin muokata esimerkiksi juuri rakentamamme alatunniste komponentin sisältöä ja toiminnallisuutta.
Emme siis voi oikeasti pakottaa jokaiselle sovellukselle yhtenäistä alatunnistetta.
Ja kun vuoden päästä haluamme uudistaa kaikkien PowerAppsiemme alatunnistetta, pitää uusi alatunnistekomponentti ladata erikseen jokaiseen PowerAppsiin.
Ehkä tulevaisuudessa komponentit voi ladata PowerApps-palveluun, jossa ne olisivat käyttäjien käytössä samalla tavalla kuin PowerAppsin vakiokontrollikin.
Sitä odotellesssa.
Timo Pertilä 