Aiemmassa kirjoituksessa kävin läpi, miten Viking Linen mobiilisovelluksen käyttöliittymän voi totetuttaa PowerAppsilla. Varsin opettavainen ja hauska harjoitus.
Niin hauska, etten malta jättää leikkiä yhteen kertaan. Otetaan tällä kertaa työn alle kuitenkin astetta haastavampi kohde.
Finnairin mobiilisovellus
Tämän olen halunnut tehdä jo pitkään. Sovellus on tyylikkään näköinen ja tarjoaa sopivasti haastetta tekijälleen.
Toteutetaan sovelluksen kaksi keskeisintä näyttöä (kuvat alla)
- Matkan tiedot
- Navigaatio / matkan valinta
Näyttö 1 – Navigaatio / matkan valinta
Aloitetaan helpommasta. Luodaan tyhjä mobiilisovellus ja siihen tyhjä sivu, jonka
- taustaväriksi asetetaan esikuvasta poimittu harmaa (HEX: 2B2C2D)
- oikeaan reunaan lisätään valkoinen laatikko
Navigaatio
Tarvitsemme navigaatioelementeille (Tutustu, Varaa lentoja jne) ikonit. Kopioidaan ne alkuperäisestä sovelluksesta ja tallennetaan PowerAppsiin kuvina.
Luodaan kokoelma (colNavigation), joka sisältää kustakin navigaatioelementistä seuraavat tiedot
- Id
- Otsikko (title)
- Ikoni (icon)
- Ikoni elementin ollessa valittu (iconSelected)
Toteutetaan navigaatio galleriana, jonka tietolähteenä on tekemämme kokoelma. Gallerian riveillä näytetään otsikko ja sitä vastaava ikoni.
Otsikko kirjoitetaan isoilla kirjaimilla (Upper).
Valitun navigaatiorivin korostaminen
Valittua riviä korostetaan valkoisella ikonilla (ThisItem.iconSelected).
Myös otsikon fontti vaihdetaan valkoiseksi.
Color: If(ThisItem.IsSelected;White; RGBA(176; 177; 179; 1))
Omat matkat
Seuraavaksi toteutetaan ”Omat matkat” otsikon alla näytettävä lista käyttäjän tulevista matkoista.
Yksityiskohdat ovat tärkeitä:
- Matka koostuu meno- ja paluulennosta, jotka on visuaalisesti niputettu yhteen (pystyviiva sekä tyhjä väli matkojen välissä)
- Käyttäjän valitessa lennon, korostetaan
- valittu lento valkoisella värillä
- pystyviiva valkoisella värillä koko matkan (ei yksittäisen lennon) osalta
Luodaan lennoista oma kokoelma (colMyTrips). Oikeasti tiedot haettaisiin sopivasta tietovarastosta, mutta oikaistaan hieman. Tässä riittää hommaa muutenkin.
Kokoelman tietueet sisältävät seuraavat tiedot:
- Id
- Matkan tunniste (tripid), jolla yhdistetään samaan matkaan liittyvät lennot
- Lähtöpäivä (departure)
- Lentoreitti (route)
Lisätään sivulle uusi galleria (galMyTrips), jossa näytetään seuraavat elementit
- lähtöaika (departure)
- reitti (route)
- harmaa pystyviiva
Fonttikokojen ja värien säätämisen jälkeen lopputulos näyttää tältä.
Lisätään joka toisen reitti-kentän korkeutta. Näin saadaan erotettua matkat visuaalisesti toisistaan.
Korostetaan valittu lento valkoisella värillä. Tämä on helppoa. Mutta miten muutetaan pystyviivan väri valkoiseksi koko matkan kohdalta?
Tämä onnistuu matkan tunnistetta (tripId) hyödyntämällä. Vaihdetaan viiva valkoiseksi, mikäli rivin tripId on sama kuin valitun lennon tripId.
Ahkeralla matkaajalla tulevia matkoja voi olla paljon. Rajoitetaan gallerian korkeudeksi kolmen matkan viemä tila (korkeus = 1002).
Height: Min(1002;CountRows(colMyTrips)/2 *167)
Lisää matka -painike
Lisätään gallerian perään teksti ”Lisää matka”, sekä sitä vastavaa ikoni. Teksti ja ikoni sijoittuvat suoraan gallerian alle riippumatta gallerian korkeudesta.
Käyttäjän nimi ja linkki yhteydenottolomakkeeseen
Viimeistellään näyttö lisäämällä sen alareunaan
- käyttäjän nimi
- käyttäjän bonustaso
- linkki yhteydenottolomakkeeseen
Sekä tietenkin kivat ikonit, jotka poimitaan alkuperäisestä sovelluksesta.
Seuraavaksi voidaankiin siirtyä harjoituksen hankalampaan osuuteen.
Näyttö 2 – Matkan tiedot
Luodaan toinen näyttö, johon lisätään
- Logo
- Otsikko, joka kertoo monenko päivän kuluttua lähtö tapahtuu
- Otsikko, joka kertoo monenko päivän kuluttua lähtöselvitys alkaa
- Matkakohdetta kuvaava kuva
Päivät lasketaan valitun matkan lähtöajan perusteella.
Text : Upper("Lähtö " & Round(DateValue(galMyTrips.Selected.departure) - Today();0) & " päivän kuluttua")
Gallerian vierittäminen kuvan päälle
Sitten se kinkkinen osuus. Miten toteutetaan näytön alaosa? Sitä pitäisi pystyä liu’uttamaan yläosan päälle näin.
Pienen pohtimisen jälkeen käyttöliittymän toteutustapa hahmottuu.
Luodaan jälleen kokoelma (colTripInfo), jossa on tällä kertaa kolme tyhjää riviä.
Lisätään näytön kokoinen galleria (tyyppiä ”tyhjä, joustava korkeus”), jonka tietolähteenä toimii juuri luotu kokoelma.
Tulemme käyttämään galleriaa seuraavalla tavalla.
- Rivi 1 – Tyhjä läpinäkyvä rivi, jonka takaa näkyy näytölle aiemmin lisätyt elementit
- Rivi 2 – Matkan perustiedot lähtöaikoineen
- Rivi 3 – Matkan lisätiedot
Lisätään galleriaan kuva, joka vaihtuu jokaisella rivillä.
Image: Switch(id;
2;middle;
3;bottom)
Huom! Ensimmäisellä rivillä kuvassa ei ole sisältöä.
Kuvan korkeus vaihtelee sekin rivin mukaan.
Height: Switch(id;
1;600;
2;110;
3;800)
Näin saadaan galleriaan aikaiseksi eri korkuiset rivit.
Lisätään reittiä, lennon numeroa jne tietoja varten galleriaan tekstikentät. Ne näkyvät ainoastaan rivillä 2.
Visible: ThisItem.id = 2
Haluamme näyttää tietenkin valitun lennon tiedot. Lisätään puuttuvat tiedot kokoelmaan (colMyTrips).
ClearCollect(colMyTrips;
{
id: 1;
tripid: 1;
departure: "20.6.2019";
route: "Helsinki - Madrid";
flightno: "AY1661";
deptime: "16:50";
depTerminal: "T2";
arrtime: "20:15";
arrTerminal: "T4"
};...)
Vaihdetaan tekstikentät käyttämään valitun matkan tietoja.
Kuvan häivyttäminen
Miten kohteen kuvan saa häivitettyä, kun käyttäjä scrollaa tietoja sen päälle?
Gallerian VisibleIndex -ominaisuus kertoo mikä rivi näkyy galleriassa ylimpänä. Hyödynnetään tätä tietoa kuvan läpinäkyvyys (Transparency) -ominaisuudessa.
Kuva on sitä läpinäkyvämpi, mitä enemmän gallerian rivejä on vieritetty esiin.
Samalla idealla voidaan häivytää myös kuvan yläpuolella näkyvät tekstit.
Jotta efektistä saadaan sulavampi, tulee gallerian ensimmäinen (se tyhjä) rivi jakaa seitsemään osaan.
Tällöin kuvan läpikuultavuuden arvoksi voidaan asettaa
Transparency: Gallery1_1.VisibleIndex *0,16
ja vastaavasti tekstien väriksi
Color: RGBA(102;102;102;1-(Gallery1_1.VisibleIndex*0,16))
Navigointi näyttöjen välillä
Loppu häämöttää!
Edellisessä esimerkissä (Viking Line), nähtiin paljon vaivaa näyttöjen välisen siirtymäanimaation toteutukseen. Oli itse tehty ”näyttö” näytön sisällä sekä ajastin, jolla näyttöä liutettiin esiin ja pois.
Kehitys kehittyy ja moisen kikkailun voi nyt unohtaa.
Lisätän molempiin näyttöihin hampurilaisikoni ja lisätään sen toiminnoksi (OnSelect) siirtyminen oikealle näytölle.
OnSelect: Navigate(Screen2;ScreenTransition.CoverRight)
Nyt löytyy animaatiot molempiin suuntiin!
Yhteenveto
Lopputulos näyttää tältä.
Tarkkasilmäiset huomaavat toteutuksessa lukuisan joukon yksityiskohtia, joita en saanut kuntoon. Osaa en vain jaksanut hieroa kuntoon, osassa taas tuli PowerAppsin rajat vastaan.
Mikä järki näissä harjoituksissa on? Eihän PowerAppsilla voi tehdä sovelluksia tenantin ulkopuolisille käyttäjille.
Näiden harjoitusten idea on oppia. Oppia miten PowerAppsilla voi tehdä käyttöliittymiä, joihin sen ei uskota taipuvan. Näitä tehdessä saa uusia käyttöliittymäideoita, sekä oppii aina uutta PowerAppsin peruskontrolleista ja niiden hyödyntämisestä.
Suosittelen kaikille.
Timo Pertilä 