Luentopalautteen kerääminen Power Appsilla

Kävin viime vuonna useassa SharePoint Saturday:ssa puhumassa Power Appsista, Flow:sta sekä siitä, miten niitä organisaatiossa hallitaan.

Osallistumissani tapahtumissa kerättiin palautetta esityksistä eri tavoin, mutta pisimmän korren vei SharePoint Satruday Munchen. Siellä jokaisen luennon jälkeen salista poistuttaessa vastassa oli henkilö tabletin kanssa. Tabletilta jokainen sai arvostella esityksen käyttäen neljää tuttua hymynaamaa (kuva happyornot:in vastaavasta ratkaisusta).

Kuva: https://www.happy-or-not.com/en/open-position/field-sales-manager-uk/

Menetelmä tuntui toimivalta ja esiintyjät saivat kaipaamansa palautetta. Käytettävyydeltään ratkaisu oli hieman kömpelö. Käyttälle ei esimerkiksi näytetty, oliko hänen antamansa palaute rekisteröity vai ei.

Annoinkin vahingossa päivän ensimmäiselle esitykselle palautteeni viidesti.

Tällä kertaa toteutetaan vastaa ratkaisu Power Appsilla. Tietenkin hieman parempi.

Tietojen tallennus – SharePoint

Luodaan ensimmäiseksi esityksiä ja niiden saamia palautteita varten SharePoint -lista, jonka sarakkeet ovat

• Title (esityksen otsikko)
• Presenter (esityksen pitäjä)
• Green (montako vihreää palautetta esitys sai)
• LightGreen (montako vaaleanvihreää palautetta esitys sai)
• LightRed (montako vaaleanpunaista palautetta esitys sai)
• Red (montako punaista palautetta esitys sai)

Power Apps – Esityksen valinta

Luodaan tyhjä Canvas Power Apps ja lisätään siihen galleria, jonka tietolähteenä on juuri tekemämme SharePoint-lista.

Tältä aloitusnäytöltä avustaja valitsee, minkä esityksen palautteita hän seuraavaksi kerää.

Toteutetaan palautepainikkeet Galleriana. Luodaan sitä varten Power Appsin käynnistymisen (OnStart) yhteydessä kokoelma. Se sisältää neljän painikkeen tiedot (tunniste, ikoni ja väri).

ClearCollect(colButtons;
 {
   ID: "Green";
   icon: EmojiSmile;
   color: RGBA(54;176;75;1)
 };
 {
   ID: "LightGreen";
   icon: EmojiSmile;
   color: RGBA(187;221;140;1)
 };
 {
   ID: "LightRed";
   icon: EmojiNeutral;
   color: RGBA(251;188;159;1)
 };
 {
   ID: "Red";
   icon: EmojiSad;
   color: RGBA(184;0;0;1)
 }
)

Käyttäjän valitessa aloitusnäytön (Screen2) galleriasta esityksen, asetetaan valitun rivin tiedot muuttujaan ja siirrytään seuraavalle näytölle (jonka olen tehnyt jo valmiiksi, Screen1).

OnSelect:  Set(varSelectedSession; galPresentations.Selected);; Navigate(Screen1; ScreenTransition.Cover)

Hypätään seuraavaksi päänäyttöön, jossa kerätään valitusta esityksestä palautetta.

Power Apps – Esityksen arvostelu

Lisätään Power Appsiin toinen näyttö (Screen1) ja siihen tyhjä vaakasuuntainen galleria.

Gallerian tietolähteenä on Power Appsin käynnityksen yhteydessä luotava kokoelma (colButtons).

Lisätään galleriaan ympyrä (Lisää -> Kuvake -> Ympyrä).

Asetetaan ympyrän leveydeksi ja korkeudeksi 260, sekä reunan paksuudeksi 10.

Asetetaan ympyrän väriksi kokoelman color-kenttä. Painikkeet alkavat hahmottumaan.

Viimeistellään painikkeet lisäämällä niiden sisään ikoni, jonka kuvake on kerrottu värin tavoin kokoelmassa (ThisItem.icon).

Lisätään näytölle

• valitun esityksen otsikko (varSelectedSession.Title)
• valitun esityksen pitäjä (varSelectedSession.Presenter)
• pyyntö arvostella juuri nähty sessio

Tämähän näyttää jo lähes valmiilta.

Vielä kun saadaan painikkeiden painallukset rekisteröityä jotenkin.

Power Apps – Palautteiden tallennus

Lisätään painikkeen sisällä olevaa ikonia painettaessa (OnSelect -tapahtuma) painikkeen tunnus (ID) kokoelmaan (colFeedbacks).

OnSelect: Collect(colFeedbacks; {response: ThisItem.ID})

Nyt jokainen ikonin painallus tallentuu kokoelmaan.

Tallennetaan vastaukset SharePoint-listall vasta kaikkien halukkaiden annettua palautetta. Tallennus tehdään esiintyjän nimeä painamalla. Kikan tietää ainoastaan avustaja, joka pitelee tablettia vieraiden antaessa palautetta.

Tallennuksessa tallennetaan hymynaamojen painokerrat esitystä vastaavalle SharePoint listan riville. Tämän jälkeen tyhjennetään palautteet sisältävä kokoelma (colFeedbacks) ja palataan aloitusnäyttöön (Screen2).

Patch(SessionFeedback;varSelectedSession;
 {
   Red: CountIf(colFeedbacks;response = "Red");
   LightRed: CountIf(colFeedbacks;response = "LightRed");
   LightGreen: CountIf(colFeedbacks;response = "LightGreen");
   Green: CountIf(colFeedbacks;response = "Green")
 }
);;
Clear(colFeedbacks);;
Navigate(Screen2;ScreenTransition.CoverRight)

Tallennetut palautteet löytyvät SharePoint listalta.

Annetut palautteet on helppo näyttää myös sovelluksen etusivulla. Lisätään gallerian riville palautepainikkeita vastaavat ympyrät ja niiden sisään annettujen palautteiden lukumäärät (ThisItem.Green, ThisItem.Red jne).

Power Apps – Onnistuneen palautteen antamisen visualisointi

Esikuvana toimineen sovelluksen ongelmana oli, ettei käyttäjä tiennyt oliko palaute rekisteröity vai ei.

Hoidetaan tämä näytölle ilmestyvällä (itsestään katoavalla) kiitos-viestillä.

Tarvitsemme ajastimen, joka käynnistyy ikonia painettaessa. Se onnistuu lisäämällä ikonin OnSelect-tapahtumaan komennot, joilla asetetaan muuttuja (varStartTimer) ensin epätodeksi ja heti perään todeksi.

Set(varStartTimer; false);; Set(varStartTimer; true)

Lisätään näytölle ajastin (timer) jonka Start-ominaisuus saa arvokseen juuri luomamme muuttujan (varStartTimer) ja kesto (duration) 700 millisekuntia.

Nyt palautenapin painaminen käynnistää 700 millisekuntia kestävän ajastimen.

Seuraavaksi lisätään näytölle iso kiitosviesti.

Kiitosviesti on näkyvissä ajastimen arvon ollessa suurempi kuin 0, mutta pienempi kuin 700 (eli ajastimen ollessa käynnissä).

Kiitosteksti on väriltään musta, mutta sen läpinäkyvyys kasvaa ajastimen arvon kasvaessa.

Näin käyttäjä tietää palautteen menneen perille.

Lopputulos näyttää tältä.