Ignite-tapahtuman suurin Power Apps -uutinen olivat kortit (Power Apps Cards). Mitä nämä kortit oikein ovat ja mitä niillä voi tehdä?

Microsoft esittelee ne juhlavasti.

Completely new way to design and deliver mini-apps directly inside Microsoft Teams and Outlook using low code.

No tämä ei vielä kauheasti kerro mitään. Aloitetaankin hieman kauempaa.

Mukautuvat kortit (Adaptive Cards)

Mukautuvat kortit ovat mahtavia. Niiden avulla voit lähettää viestejä, joista vastaanottoja voi tehdä suoraan toimenpiteitä. Käyttäjän ei tarvitse pienen tehtävän suorittamista varten poistua työkalusta, jolla viestin on vastaanottanut.

Esimerkiksi tilatakseen hupparin (Teamsiin tulleesta viestistä).

Tai hyväksyäkseen matkalaskun (suoraan sähköpostiin tulleesta viestistä).

Tai antaakseen palautetta työkaverista.

Mukautuvia kortteja voi rakentaa selainkäyttöisellä työkalulla. Niitä voi hyödyntää omissa ratkaisuissaan esimerkiksi flow’n Post adaptive card and wait for a response -toiminnolla.

Mutta…

Kortit ovat lähinnä kehittäjien ja konsulttien työkalu. Liian hankalaa kansalaiskehittäjille.

Hupparin tilauslomake Power Apps korttina

Mistä päästäänkin kätevästi Power Apps kortteihin. Juhlapuheista huolimatta kyseessä on ”vain” työkalu, jolla näitä mukautuviin kortteihin perustuvia ratkaisuja voi tehdä aiempaa helpommin.

Pakkohan tätä on kokeilla. Yritetään tällä kertaa toteuttaa aiemmin tekemäni hupparin tilauslomake Power Apps korttina.

Tietomalli

Luodaan tilauksia varten kaksi taulua Dataverseen. Ensimmäiseen (Hoodie order) tallennetaan tilaukset.

Toisessa (Hoodie Size) ylläpidetään tarjolla olevia hupparikokoja.

Ja eikun tekemään itse korttia.

Kortin luominen

Kortteja pääsee kokeilemaan make.preview.powerapps.com -sivustolla.

Luodaan uusi kortti.

Meille avautuu korttieditori. Tutun ja turvallisen näköinen. Tarjolla olevia kontrolleja selatessa huomaa, että ne kaikkein käytetyimmät puuttuvat. Nimittäin galleria ja lomake.

Aloitetaan lisäämällä luodut Dataverse-taulut tietolähteiksi (data source). Toistaiseksi Dataverse on ainoa käytettävissä oleva tietolähde.

Ok. Rajoittaa hieman.

Mukaan otettavan taulun valinta on tietenkin aivan erilainen kuin canvas Power Appsissa.

Mutta siellä ne nyt ovat!

Valinnan tekeminen (checkbox)

Käyttäjän tulee valita hupparin koko. Toteutetaan tämä ensin valintaruuduilla (checkbox). Lisätään sellainen kortille.

Miten saamme valinnan toistumaan jokaista koko-taulun (Hoodie Size) rivä kohden? Tarjolla ei ole tuttua galleria-kontrollia.

Useimmilla kortin kontrolleilla on Repeat For Every -ominaisuus, jolla voi määritellä kontrollin toistumisen. Annetaan sille arvoksi koot sisältävä taulu (tp_hoodiesize). Näin valintakontrolleja luodaan yksi per tarjolla oleva koko (=taulun rivi).

Valinnan tekstiksi (Title) asetetaan koon nimi (ThisItem.Name). Aivan vastaavalla tavalla, kuin tutun galleria-kontrollin kanssa.

Työkalu ei tarjoa taulun sarakkeita valittavaksi. Ne pitää tietää (ja kirjoittaa oikein). Kiusallista, mutta eiköhän tämä korjaannu tulevaisuudessa.

Muokkausnäkymässä ei näe, miltä kortti oikeasti näyttää. Tätä varten tulee siirtyä (Play-painikkeella) esikatselutilaan.

Toimii!

Oikeasti haluamme käyttää valinnan tekoon valintanappia (radiobutton). Tilattava huppari voi olla vain yhden kokoinen.

Valinnan tekeminen (radiobutton)

Kontrolleista ei kuitenkaan löydy valintanappia. Pidetään mielessä, että kortit ovat oikeasti mukautuvia kortteja (adaptive card). Niissä valintanapit tehdään valintalistalla (drop down).

Lisätään siis kortille valintalista.

Asetetaan valintalista toistumaan kuten valintaruudutkin.

Mutta nyt koko kontrolli toistuu jokaisen koon kohdalla.

Haluttuun lopputulokseen päästään määrittelemällä toistuvuus kontrollin Choices-osiossa.

Kas näin.

Vaihdetaan listan tyyliksi laajennettu (expanded).

Näin meillä on siisti valintalista.

Määritellään valinta pakolliseksi (Required field) ja lisätään sille otsikko (Label). Huom! Korteissa kontrollit sisältävät myös otsikon. Niitä varten ei tarvitse lisätä omaa otsikko-kontrollia.

Tekstikenttä (Text input)

Lisätään kortille vapaamuotoista kommenttia varten tekstikenttä. Annetaan sille otsikko (Label) ja määritellään moniriviseksi (Multiline).

Kortin ulkoasu

Yksi merkittävä ero Power Apps kortin ja canvas Power Appsin välillä on asettelu. Korttien ulkoasua ei määritellä pikselintarkasti. Kontrollit asettuvat allekkain ja niiden väliä (spacing) voi säätää. Sitäkään ei vapaasti, vaan valitsemalla none, small, medium jne.

Myöskään otsikoiden kokoa ja väriä ei voi vapaasti määritellä. Eikä taustavärejä. Eikä…

Miksei?

Koska kortit ovat mukautuvia kortteja. Saman kortin tulee toimia Teamsissa, Outlookissa, chatbotissa, widgettinä jne. Kukin alusta säätää kortin ulkoasua tarvittaessa.

Kortin otsikko

Viritellään kortille otsikkorivi, joka sisältää logon ja tekstin. Sarakkeiden (Column set) avulla ne saadaan asettumaan vierekkäin. Eri ominaisuuksia hetken kokeilemalla päästään tyydyttävään lopputulokseen.

Kuvia ei ladata osaksi sovellusta. Nihin viitataan url-osoitteella, eli ne tulee löytyä internetistä.

Tilauksen tallenntaminen

Onnistuimme lataamaan mahdolliset koot Dataversestä, mikä on aika siistiä jo sekin. Seuraavaksi tallennamme hupparitilauksen Dataverseen.

Lisätään painike (button) ja annetaan sille otsikoksi Submit.

Nyt törmäämme esikatseluvaiheen (preview) rajoituksiin. Emme voi

  • Luoda uusia rivejä Dataverseen
  • Asettaa rivin valintakentälle (choice) arvoa
  • Asettaa riville LookUpia toiseen tauluun

No tämmöistä tämä välillä on. Jotta kokeilu voi jatkua, luodaan Dataverseen rivi jota tilauksen yhteydessä päivitetään. Hupparin koko tallennetaan tylsästi tekstikenttään (Size).

Määritellään painike suorittamaan PoweFx:ää. Mikäli canvas Power Apps on tuttu, näyttää komento tutulta.

Patch(tp_hoodieorder, First(tp_hoodieorder), {Name: "Order " & Now(), Comment: inpComment, Size: dpHoodieSize})

On tässä ajatusta. Jos osaat PowerFx:ää, olet kuin kotonasi.

Painiketta painamalla tilaus tallentuu Dataverseen.

Kuittausnäyttö

Tehdään toinen näyttö, joka näytetään käyttäjälle tilauksen tekemisen jälkeen.

Lisätään tilauspainikkeen kaavaan komento, jolla navigoidaan kuittausnäytölle. Jälleen tuttua PowerFx:ää.

Navigate('Thank You Screen')

Muuttujat

Muuttujia määritellessä törmätään kiinnostavaan vaihtoehtoon. Muuttujan voi määritellä pysyväksi, jolloin sen arvo säilyy korttien avaamisen välillä.

Luodaan muuttuja, johon tallennetaan tilattujen hupparien kokonaismäärä (Order count).

Päivitetään muuttuja aina tilausta luodessa.

Set('Order count', 'Order count' +1);

Näytetään tilausten kokonaismäärä kuittaussivulla.

Esimerkki ei tosin ole kaksinen. Tilausten lukumäärän saa haettua helposti PowerFx:llä suoraan dataversestä.

CountRows(tp_hoodieorder)

Eiköhän näille pysyville muuttujille tule löytymään järkevääkin käyttöä.

Kortin käyttäminen

Miten kortti lähetetään käyttäjille?

Tarvitaan kortin osoite. Sen saa poimittua kortin esikatselusta Send-painikkeella.

Sitten linkki lähetetään viestinä käyttäjälle / kanavalle. Teams hoitaa loput (kunhan Teamsiin on asennettuna tuorein Power Apps -sovellus)

Yhteenveto

Kortit ovat vielä selvästi kesken (muista, tämä on vasta esikatselussa!). Mutta onhan tässä huikea mahdollisuus tuoda mukautuvat kortit kansalaiskehittäjien ulottuville. Yhdellä työkalulla voi sekä suunnitella kortin, että toteuttaa sen toiminnallisuuden (tietojen hakeminen dynaamisesti, tietojen tallennus, logiikka kortin sisällä jne).

Kielenä käytetään tuttua PowerFx:ää, mikä madaltaa kynnystä. Osaa käyttäjistä tulee takuulla sekoittamaan se, että editori näyttää kovasti Canvas Apps editorilta, mutta itse tekeminen on kuitenkin kovin erilaista.

Toistaiseksi korteissa voi käyttää ainoastaan Dataverse-yhdistintä ja kortit toimivat vain Teamsissa. Tähän se ei kuitenkaan tule jäämään.

Alla vielä muutama lyhyen kokeilun aikana tekemäni huomio

  • Dataversen valinta-kentät eivät toimi
  • Patch-komennolla ei voi luoda uusia rivejä
  • Patch-komennolla ei voi luoda relaatioita
  • User() -komento ei toimi
  • Dataversen pitkään tektikenttään ei voi tallentaa tietoa