PowerApps on varmaan ihan hyvä tuote, mutta kun sillä tehdyt sovellukset ovat kaikki niin kökön näköisiä.
Kuulen tätä usein. Totta, PowerAppsit ovat yleensä aika karun näköisiä. Ne saattavat olla toiminnallisuudeltaan hyvinkin mietittyjä, mutta kun kyseessä on organisaation sisäiseen käyttöön tarkoitettu työkalu, ei visuaaliseen suunnitteluun aina panosteta.
Tämä ei kuitenkaan tarkoita, etteikö PowerAppsista saisi siistin näköistä.
Tällä kertaa tehdään hieman tyyliteltympi PowerApps. Toteutetaan kopio Viking Linen kulutajille tarjoamasta mobiiliapplikaatiosta. Alkuperäinen sovellus näyttää tältä.
Saa nähdä onnistuuko. Aloitetaan!
Navigaatio
Rajataan kokeilumme kolmeen päänäyttöön (aloitusnäyttö, minun matkani ja tax-free). Luodaan kullekin oma tyhjä näyttö. Lisätään aloitusnäytölle mobiilisovelluksesta kopioitu kuva menun pohjaksi.
Mutta kuva on vain taustakuva. Varsinainen toiminnallisuus toteutetaan laatikoilla (rectangle). Lisätään jokaisen alareunan kuvakkeen päälle laatikko.
Lisätään jokaisen laatikon OnSelect-tapahtumaan siirtyminen ikonia vastaavalle näytölle.
Lopuksi muutetaan laatikot läpinäkyviksi. Yhden näytön navigaatio on valmis.
Kopioidaan koko alaosa (taustakuva ja laatikot) muille näytöille. Vaihdetaan kullekin näytölle laaatikoiden takana oleva kuva sellaiseen, jossa kyseinen näyttö on punaisella korostettuna.
Näin meillä on toimiva navigaatio jokaisella näytöllä.
Staattinen tax-free näyttö
Tämä on helppo. Näytöllä on kuusi painiketta, joista avautuu eri asioita. Lisätään aluksi näytölle alkuperäisestä sovelluksesta kaapattu taustakuva.
Painikkeet toteutetaan jälleen muotojen avulla. Lisätään ympärä (Icons -> Circle) ja säädetään sen koko täsmälleen näytöllä olevan ikonin kokoiseksi.
Vaihdetaan ympyrän taustaväri läpinäkyväksi ja ympyrää painettaessa näkyvä väri (PressedFill) läpikuultavaksi punaiseksi.
Näin luodaan illuusio siitä että taustakuvan kuvat reagoisivat kun niitä painetaan.
Lisätään vastaava ympyrä jokaisen kuvakkeen päälle.
Lopuksi lisätään kustakin kuvakkeesta linkit oikeisiin näyttöihin / verkkosivuihin.
Valmis.
Aloitusnäyttö
Käytetään näytön taustakuvana alkuperäisestä sovelluksesta kaapattua kuvaa, josta on poistettu tekstit (lukuunottamatta Viking Line -tekstiä, joka on omalla erikoisella fontillaan).
Lisätään näytölle
- Tervetuloa käyttäjä -teksti (näyteään sovelluksen käyttäjän etunimi)
- Varaa matka -painike
Painike on PowerAppsin painike (button). Asetetaan se läpinäkyväksi, vaihdetaan reunaväri valkoiseksi sekä lisätään kulmien pyöristystä.
Kelpaa minulle.
Minun matkani -näyttö
Tämä on hieman työläämpi osa. Minun matkani -näytöllä esitetään yhden risteilyn tärkeät hetket (lähtö, saapuminen, ruokailut jne) aikajanalla. Näytön oikeasta yläkulmasta klikkaamalla ilmestyy esiin toinen näyttö, jolta voi valita minkä matkan tietoja tarkastellaan.
Tarvitsemme kaksi SharePoint-listaa.
Omat varaukseni, joka sisältää varauksien perustiedot.
Matkatapatumat, joka sisältää jokaisen matkan yksityiskohtaiset tapahtumat.
Lisätään minun matkani -näytölle otsikko kuvakkeineen. Käytetään PowerAppsin vakiokuvakkeita.
Lisätään käytettävät SharePoint-listat tietolähteiksi (Data source).
Seuraavaksi tehdään jotain villiä. Lisätään näytölle suorakulmio, mutta sijoitetaan se näkyvän näytön ulkopuolelle (position x = 640).
Rakennetaan piilotetulle näytöllemme otsikkopalkki. Asetetaan kaikkien piilossa olevalla näytöllä sijaitsevien kontrollien x-koordinaatit viittaamaan piilotetun näytön x-koordinaatteihin. Kun jatkossa liikutamme piilotettua näyttöä, liikkuvat muut kontrollit mukana.
Lisätään otsikko ja vaaleanharmaa viiva (=yhden pikselin korkuinen laatikko).
Tälle toistaiseksi piilotetulle näytölle toteutetaan matkan valinta. Lisätään galleria ja liitetään se SharePointin MyTrips-listaan.
Viritetään gallerian sisältöä ja ulkoasua seuraavilla tavoilla.
- Gallerian riveillä esitetään SharePoint-listan kenttien arvot nätisti kahdessa rivissä
- Säädetään fonttikoot oikeiksi
- Vaihdetaan erotinviivan väri
- Lisätään ruksi rivin poistamista varten, sekä pieni väkänen jolla rivi valitaan
- Asetetaan aktiivisen rivin kirjainten väri punaiseksi
- Siirretään galleria oikealle paikalleen
Lopputulos näyttää tältä.
Palataan rakentamaan varsinaista minun matkani -näyttöä. Lisätään näytön yläreunaan aktiivisen (= piilossa olevalta näytöltä valitun) risteilyn tiedot.
Lopuksi kasaamme valitun risteilyn tapahtumat kuvaavan aikajanan. Lisätään galleria, jossa näytetään kaikki risteilytiedot (se toinen SharePoint-lista).
Suodatetaan galleria näyttämään ainoastaan valitun risteilyn tiedot.
Items = Filter(VinkingLine;varausnumero = Gallery3.Selected.Title)
Lisätään galleriapohjaan (template) vihreä pystyviiva ja pallo. Lisätään sisällöksi kaikki SharePoint-listalta löytyvät tiedot. Asetetaan fonttikoot sopiviksi.
Kellonaikojen perässä on lippu, joka kuvaa kumman maan ajasta on kyse. Lippu on kuva-elementti, jossa käytettävä kuva määräytyy listan flag-kentän arvon perusteella.
Aikajanalla esitetään aina lähdön jälkeen ”Palvelut laivalla” -osio, jonka sisältö poikkeaa muista riveistä. Lisätään tätä varten galleriapohjaan kuva, jossa on palveluiden logot. Kuva kuitenkin astetaan paikoilleen ainoastaan, kun rivin otsikko on ”Palvelut laivalla”.
Fly-out valikko
Mutta miten ihmeessä saamme piilossa olevan näytön liukumaan nätisti olemassaolevan päälle ja pois? Tietenkin ajastimen avulla (timer).
Asetetaan vohveli-ikonin (sekä leijuvan näkymän nuolen) OnSelect arvoksi
UpdateContext({startMyTimer:false}); UpdateContext({showMenu: !showMenu, startMyTimer:true})
Meillä on siis kaksi boolean muuttujaa:
- showMenu, joka kertoo onko menu (eli se piilossa oleva näyttö) näkyvillä vai ei
- startMyTimer, jonka avulla käynnistetään ajastin
Aina kun päänäytön oikeasta yläkulmasta painetaan, muuttuu showMenu -muuttujan arvoksi true ja startMyTimer muuttujan arvo pyöräytetään false -> true.
Lisätään näytölle ajastin, jonka kestoksi asetetaan 300 millisekuntia ja käynnistymisen (Start) arvoksi yllä asetettu StartMyTimer muuttuja.
Ajastin käynnistyy aina startMyTimer muuttujan arvon vaihtuessa false -> true. Ja Fly-out näyttömme valuminen paikalleen kestää 300 millisekuntia.
Miten tämä sitten tapahtuu? Asetetaan piilossa olevan näyttömme x-akselin arvoksi
If(!showMenu;0 + ChooseTrip.Width * Timer1.Value/Timer1.Duration; ChooseTrip.Width-ChooseTrip.Width * Timer1.Value/Timer1.Duration )
Eli jos näyttö tulee piilosta, sen x-akselin arvo on 640 – 640 * (ajastimen tämän hetken arvo/600). Ajastimen arvo lähtee aina nollasta ja päättyy kuuteen sataan.
Kun näyttö siirretään piiloon, sen x-akselin arvo on 0 + 640 * (ajastimen tämän hetken arvo/600).
Loogista.
Jos sepustukseni oli aivan hepreaa, kannattaa katsoa tämä mainio video aiheesta.
Suorituskyky – tiedon tallentaminen päätelaitteelle
Alkuperäinen Viking Line -sovellus tallettaa käyttäjän matkojen tiedot matkapuhelimeen. Mekään emme halua hakea jokaisen käynnistyksen yhteydessä matkoja ja niiden tietoja SharePointista. Tallennetaan mekin ne puhelimeen.
Käytännössä aina PowerAppsin käynnistyessä yritetään ladata matkatiedot puhelimen paikallisesta tietovarastosta muistiin. Mikäli se ei onnistu, haetaan tiedot SharePoint-listasta ja tallennetaan ne muistiin ja sieltä puhelimen paikalliseen tietovarastoon.
LoadData(myReservations,"local_mytrips"; true); If(IsEmpty(myReservations), ClearCollect(myReservations, VikingLine_MyTrips);SaveData(myReservations, "local_mytrips")); LoadData(myTrips,"local_mytripEvents", true); If(IsEmpty(myTrips), ClearCollect(myTrips,VinkingLine);SaveData(myTrips, "local_mytripEvents"))
Yhteenveto
Miltä lopputulos näyttää ja tuntuu verrattuna alkuperäiseen? Mielestäni oikein hyvältä. Parhaiten se selviää katsomalla molemmista sovelluksista kuvaamani lyhyet videoklipit.
PowerApps
Alkuperäinen
Vaikka kaikki näyttää esimerkissämme hyvältä, on PowerAppsissa omat rajoituksensa. Myös käyttöliittymän rakentamisessa.
- Eri fontteja on käytettävissä hyvin rajallinen määrä. Jos tehdään ulkoasua tiukasti brandin mukaan, on tämä helposti ongelma
- PowerAppsissa ei ole pyyhkäisy (swipe) kontrollia. Tämän vuoksi jätin toteuttamatta sovelluksen etusivulla eri osioiden välillä navigoinnin sivua pyyhkäisemällä. Tämän voi toteuttaa sliderin avulla, mutta siitä ei saa yhtä hyvää kuin oikeasta.
Timo Pertilä 