Ajanvarauksen toteuttaminen PowerAppsilla

Yksinkertaisten sovellusten rakentaminen PowerAppsilla on nopeaa. Niin nopeaa, että sillä on järkevää toteuttaa myös sovelluksia, joiden elinkaari on lyhyt. Nimitän näitä kertakäyttösovelluksiksi. Tällaisia ovat esimerkiksi

• pikkujoulujen sähköiset drinkkiliput
• pikkujoulujen sketsihahmokilpailun sähköinen äänestys
• rokotusajan varaaminen syksyllä 2018

Tehtyä PowerAppsia voi toki kierrättää, mikäli vastaava tarve toistuu

• kesäjuhlien sähköiset drinkkiliput
• kerroksen turvallisuusvastaavan sähköinen äänestys
• käyttöönotetun järjestelmän tukituntien varaaminen

Toteutetaan tällä kertaa nopeasti yksi kertakäyttösovellus.

Esimerkki – Klinikka-ajan varaamaninen

Tehdään sovellus, jolla käyttäjä varaa kahdenkeskisen hetken ideoiden ja ongelmien läpikäymiseen yhdessä asiantuntijan kanssa. Konsepti kulkee usein nimellä klinikka.

• Asiantuntijat listaavat heille mahdolliset klinikka-ajat
• Käyttäjä varaa itselleen sopivan ajan
• Varauksista lähetään käyttäjälle ja asiantuntijalle kalenterikutsu

Ratkaisua voi soveltaa pienin muutoksin vaikka mihin. Influenssarokotusaikojen tai tavoitekeskustelujen varaamiseen. Muuta ratkaisua siten, että samalle ajalle voi ilmoittautua useita henkilöitä.

Onnittelut! Toteutit juuri kurssi-ilmoittautumisen.

Palataan kuitenkin klinikka-aikoihin ja aloitetaan.

Varattavat ajat – SharePoint-lista

Luodaan klinikka-aikojen tallentamiseksi SharePoint-lista, jonka kentät ovat

• Varattavan ajan alkuaika (StartTime)
• Varattavan ajan pituus minuutteina (Duration)
• Varaaja (Person)
• Klinikan pitäjä (Trainer)

Lisätään listalle muutama varattava aika.

Ajan varaaminen – PowerApps

Luodaan tyhjä (Canvas) PowerApps ja lisätään siihen galleria, jonka tietolähteenä on yllä luomamme lista.

Muotoillaan galleriaa hieman. Lisätään omiksi kentikseen varattavan ajan

• päivämäärä: Text(ThisItem.StartTime, ShortDate, ”fi-FI”)
• kellonaika: Text(ThisItem.StartTime, ShortTime24, ”fi-FI”)
• klinikan pitäjän valokuva: Trainer.Picture
• klinikan pitäjän nimi: Trainer.DisplayName
• klinikan kesto: Duration & ”  min”

Varattavissa olevat ajat -galleria näyttää muokkauksen jäljiltä tältä.

Aikojen suodattaminen päivän perusteella

Aikoja voi olla todella paljon, joten tarjotaan käyttäjälle mahdollisuus suodattaa vapaita aikoja päivän perusteella. Lisätään näytölle alasvetovalikko (dropdown list), jonka arvojoukoksi poimitaan päivät, jolloin klinikoita järjestetään.

En syöttänyt aikoja listalle aikajärjestyksessä, joten joudun järjestämään (Sort) ne nyt.

Suodatetaan (filter) galleriassa esitettävät ajat päivämäärävalinnan mukaan. Lisätään samalla suodattimeen ehto IsBlank(Person). Nyt listalla näytetään ainoastaan vapaat ajat. Eli ne joiden person-kenttä on tyhjä.

Järjestetään varattavat ajat samalla aikajärjestykseen.

Kaikkien vapaiden aikojen näyttäminen

Varattavat ajat jakaantuvat usealle päivälle. Vapaita aikoja on lopuksi jäljellä vain muutamia, jolloin niiden löytäminen voi olla hankalaa. Tässä vaiheessa on kätevää, mikäli kaikki vapaat ajat näytetään yhdellä kerralla.

Lisätään tällainen vaihtoehto (Show all available times).

Päivän valitseminen ja ”Näytä kaikki ajat” ovat toisensa poissulkevia valintoja. Disabloidaan päivämäärävalinta, mikäli käyttäjä on valinnut ”Näytä kaikki ajat”.

Lopuksi asetataan galleria näyttämään valinnan mukaiset rivit. Joko kaikki vapaat ajat tai valitun päivän vapaat ajat.

Ajan valinta

Haluamme korostaa valitun rivin selvästi, jottei käyttäjä varaa epähuomiossa väärää aikaa. Määritellään valitulle riville (ThisItem.IsSelected)

• taustaväriksi läpikuultava vihreä: TemplateFill = If (ThisItem.IsSelected, RGBA(152, 208, 70, 0.34))
• klinikan pitäjän kasvokuva piilotettavaksi: Visible = Not(ThisItem.isSelected))
• kasvokuvan tilalle näytettäväksi väkänen: Visible = ThisItem.isSelected

Lopputulos näyttää tältä.

Riittävän hyvä. Jatketaan matkaa.

Oletusvalinnan poistaminen

Galleriassa on oletuksena valittuna aina ensimmäinen rivi. Tämä voi johtaa virheellisiin varauksiin. Muutetaan toiminnallisuutta siten, että käyttäjä joutuu itse tekemään valinnan.

Luodaan muuttuja (itemIsSelected), joka saa arvon true käyttäjän klikatessa mitä tahansa gallerian riviä.

Vastaavasti muuttuja saa arvon false käyttäjän vaihtaessa päivää tai valitessa ”Show all available times”.

Vaihdetaan lauseen ThisItem.IsSelected tilalle ThisItem.IsSelected And itemIsSelected. Lause ei ole enää tosi PowerAppsin valitessa käyttäjän puolesta galleriasta ensimmäisen rivin. Muutetaan

• Valitun rivin taustaväri:  TemplateFill = If (ThisItem.IsSelected And itemIsSelected, RGBA(152, 208, 70, 0.34))
• Klinikan pitäjän kasvokuva: Visible = Not(ThisItem.IsSelected And itemIsSelected)
• Väkänen: Visible = ThisItem.IsSelected And itemIsSelected

Näin meillä on täysi kontrolli, milloin rivi esitetään valittuna.

Ajan varaaminen

Valittu aika pitää vielä oikeasti varata. Eli tallentaa valitun rivin Person-kenttään käyttäjän sähköpostiosoite. Lisätään näytölle painike, joka on aktiivinen mikäli galleriasta on valittu rivi.

Painikkeen OnSelect -tapahtuma näyttää seuraavalta.

Kyllä. Sekavalta näyttää.

Käyttäjän vielä miettiessä on joku toinen voinut varata saman ajan. Ennen tallennusta tulee tarkistaa, onko valittu aika vielä vapaa. Tämä aiheuttaa hieman monimutkaisuutta.

Painiketta painettaessa

• Haetaan SharePoint-listalta muuttujan (isTimeFree) arvoksi valitun ajan varaaja-tieto (Person).
  • Mikäli aika on vapaa (isTimeFree on tyhjä), varataan se ja siirrytään kuittaussivulle
  • Mikäli aika ei ole vapaa, ilmoitetaan siitä kohteliaasti käyttäjälle
• Poistetaan aktiivinen valinta
• Päivitetään näytettävä tietojoukko

Kuittaussivu on yksinkertainen.

PowerAppsimme on valmis.

Kalenterikutsun lähettäminen – Flow

Jokaisesta tehdystä varauksesta lähetetään kalenterikutsu varaajalle ja kouluttajalle. Tämä on helppo toteuttaa Flow:lla, joka käynnistyy varauslistan rivin päivityksen yhteydessä.

Tapahtuman alkuaika on varauslistalta löytyvä alkuaika. Loppuaika vastaavasti alkuaika + kesto.

Lähetetty kalenterikutsu näyttää tältä.

Ajanvarauslomakkeen julkaisu – SharePoint

Asiantuntijaklinoista löytyy esittelysivu SharePointista. Täydellinen paikka klinoikden ajanvarauslomakkeelle.

Lisätään PowerApps sivun oikeaan reunaan.

Valmista. Siitä vain aikoja varaamaan.