PowerApps ja tulostaminen

Power Platformin kantava idea on tarjota työkalut, joiden avulla kaikki voi rakentaa digitaalisia ratkaisuja itse.

Digitaalinen ratkaisu ja tulostaminen kuulostaa erikoiselta yhdistelmältä. Kuitenkin edelleen on aivan perusteltuja syitä tulostaa asioita. Myös PowerAppsista.

Mutta miten PowerAppsissa tulostetaan? Esimerkiksi alla oleva siisti taulukko

tulostuu selaimella tällaisena.

Melkein puolet sarakkeista puuttuu. Ja riveistä tulostuvat ainoastaan ne, jotka näkyivät PowerAppsin näytöllä.

Syy rampaan tulostukseen on selvä.

1. PowerApps ei ole responsiivinen. Sen koko ei mukaudu tulostettavan paperin kokoiseksi.
2. PowerApps voi sisältää gallerioita. Niissä voi hyvin olla 5000 riviä. Miten niiden pitäisi tulostua? Kaikki? 200 ensimmäistä? Kaikki näytöllä näkyvät?

Mitä jos haluaisimme tulostaa PowerAppsin sisällön siten, että kaikki (haluamamme) sisältö saadaan paperille?

Silloin se on parempi rakentaa itse.

Esimerkki – Tilauksen tulostaminen

Kuvitellaan PowerApps, jolla käsitellään tilauksia. Yhdellä tilauksella voi olla lukemattomia tilausrivejä.

Rakennetaan toiminto, joka tulostaa yhden tilauksen sisällön.

Suunitelma on karkeasti ottaen seuraava.

• Annetaan kaikki tulostettava tieto Flow:lle. Listamuotoinen tieto (tilausrivit) välitetään JSON-muotoisena tekstinä.
• Flow:lla muodostetaan tulostettava html-sivu
• Html-sivu tallennetaan paikkaan, josta sen saa selaimella auki
• Palautetaan PowerAppsille osoite tulosteeseen
• Avataan tulostesivu PowerAppsista

Ei voi olla vaikeaa.

Vaihe 1 – Flow

Aivan ensimmäiseksi luodaan PowerAppsista käynnistettävä Flow. Se onnistuu nopeasti uudella pikavalinnalla (Pika – tyhjästä).

Nimetään Flow ja määritellään se käynnistyvän PowerAppsista.

Muuttujien alustaminen

Lisätään alkuun alusta muuttuja -toiminto. Nimetään toiminto kuvaamaan mitä muuttujaa ollaan alustamassa (OrderID).

Nimetään muuttuja ja vaihdetaan sen tyypiksi merkkijono. Arvoksi määritellään ”Kysy PowerAppsissa”, jolloin kyseinen arvo välitetään PowerAppsista parametrina.

Huomaa miten PowerAppsista pyydetty arvo nimetään. Kannattaa panostaa toimintojen nimeämiseen, muuten et ikinä arvaa PowerAppsissa mikä parametri on mikäkin.

Vastaavalla tavalla lisätään omiin muuttujiinsa kaikki tulostettavat tiedot. Viimeisenä tekstimuuttuja, johon tallennetaaan tilausrivit JSON-formaatissa (OrderRowsJSON).

HTML-sisältö

Seuraavaksi alustetaan tulostettavan html-dokumentin alkuosa omaan muuttujaansa. Omassani on

• Alussa hieman CSS-muotoiluja, jotta lopputulos näyttää nätimmältä
• Tilauksen otsikko (h2)
• Taulukko (table), joka sisältää
  • Asiakkaan nimen
  • Tilauksen kokonaisarvon
  • Tilauksen tekijän
  • Tilauspäivän
• Tilauksen lisätiedot

Html-dokumenttiin pitäisi vielä lisätä tilaukseen liittyvät tilausrivit.

Tilausrivien parsiminen

Varsinaiset tilausrivit välitetään Flow:lle JSON-muodossa (OrderRowsJSON -muuttuja). Parsitaan se helpommin käsiteltävään muotoon Parse JSON -toiminnolla.

JSON-sisällön rakenne (schema) on helpointa kuvata esimerkin avulla. Siirrytään hetkeksi PowerAppsimme puolelle.

Tilausnäytöllä esitettävät tilausrivit ovat yhdessä kokoelmassa (colOrderRows). Muodostetaan kokoelmasta JSON-muotoinen teksti (koodi kopioitu community blogista, kiitos jamiewr).

Kopioidaan tekstikenttään muodostunut JSON leikepöydälle ja siirrytään takaisin Flow-editoriin.

Valitaan ”Muodostetaan rakenne mallitietojen avulla” ja kopioidaan avautuvaan ruutuun leikepöydältä löytyvä JSON.

Valmis!

HTML-taulukon muodostaminen

Haluamme esittää tilausrivit nätissä taulukossa. Lisätään Create HTML table -toiminto. Sen avulla voi helposti muuttaa JSON-mutoisen sisällön html-taulukoksi.

Toiminto saa syötteenä (lähde) Parse JSON-toiminnon palauttaman leipäteksin.

Määritellään taulukon sarakkeiden otsikot (ylätunniste), sekä mitkä JSON-sisällön kentät esitetään missäkin sarakkeessa (Arvo).

Nyt toiminto tuottaa html-taulukon, joka sisältää kaikki tilausrivit.

HTML-dokumentin viimeistely

Muodostettu taulukko lisätään Append to string variable -toiminnolla htmlDocument-muuttujan loppuun.

Samalla muuttujan loppuun lisätään html-dokumentin lopputägit (</body> ja </html>).

Vihdoin meillä on yhdessä muuttujassa tulostettava html-muotoinen dokumentti.

Vielä pitää päättää minne tämä html-dokumentti tallennetaan. Haluan sekä tallennuksen että lataamisen olevan nopeaa. Tallennetaan dokumentti siis Azure Blob Storageen (Azure Blob säilö).

Vaihe 2 – Html-tiedoston tallennus Azure Blob Storageen

Aloitetaan luomalla Blob Storage. Selaimeen http://Portal.azure.com ja kirjaudutaan sisään (mikäli sinulla ei ole tunnuksia voit luoda ilmaisen trial-tunnuksen).

Luodaan uusi Storage account (Create a resource -> Haetaan ’storage’ -> valitaan Storage account).

Luodaan (Create).

Valitaan käytettävä tilaus (subscription) ja resurssiryhmä (resource group), nimetään luotava storage account ja määritellään mihin sijaintiin (location) palvelu tulee.

Muilta osin mennään oletusasetuksilla. Eli Review + create ja seuraavasta näytöstä Create.

Hetken päästä Storage Account -palvelu on valmis.

Navigoidaan sen avaimin (Access keys) ja poimitaan talteen

• Tilin nimi (Storage account name) ja
• Avain (Key)

Tarvitsemme niitä Flow:ssa.

Containerin luominen ja pääsynhallinta

Blob storagen kanssa työskennellessä Azure Storage Explorer on aivan ehdoton työkalu. Asennetaan aivan ensimmäisenä se.

Asennuksen jälkeen avataan Storage Explorer ja kirjaudutaan Azure-palveluun. Työkalun vasemmassa reunassa näkyvät Azure tilaukset (subscription), johon tunnus on liitetty.

Etsitään näiden joukosta äsken luotu Storage Account. Huomaamme sen Blob Containersin olevan tyhjän. Blob Containerit eivät varsinaisesti ole kansioita, mutta oikaistaan hieman ja ajatellaan hetken niiden olevan kansiota.

Luodaan tulosteitamme varten seuraavaksi oma kansio (Create Blob Container).

Blobin tiedostoihin eivät kaikki pääse käsiksi. Haluamme kuitenkin käyttäjän saavan luomansa tulosteen auki. Luodaan urliin liitettävä ”avain”, jota käyttämällä containerin tiedostoihin pääsee käsiksi.

Tämä tehdään Get Shared Access Signature -toiminnolla.

Valitaan miten pitkään avain on voimassa. Esimerkiksi yksi vuosi.

Ja kopioidaan URL talteen. Varsinainen avain alkaa kysymysmerkistä.

Vaihe 3 – Flow:n viimeistely

Nyt kun Blob storage on valmis, voimme viimeistellä Flow:n. Lisätään työnkulkuun ”Luo Blob Objekti” (Create Blob) -toiminto, joka käytännössä lisää yhden tiedoston Blob Storageen.

Ensin kuitenkin muodostetaan yhteys juuri luotuun Blob storageen. Tarvitsemme seuraavat tiedot.

• Connection Name:  Luotavan yhteyden nimi. Esim Azure Blob for Print
• Azure Storage Account name: Tämä löytyy Azuresta Storage Accountin Access Keys -osiosta
• Azure Storage Account Access Key: Tämä löytyy samasta paikasta kuin edellinen

Nyt pääsemme luomaan uuden blobin.

• Kansiopoluksi kirjoitetaan luomamme containerin nimi (/prints)
• Tiedoston nimeksi tilaajan sähköposti + luontihetki tikseinä (ticks). Näin tiedostonimeä on vaikea arvata.

Lopuksi palautetaan PowerAppsille printUrl-kentässä osoite luomaamme tulosteeseen. Osoite koostuu seuraavista osista

• blobin osoite: https://hprdemo.blob.core.windows.net
• blobissa oleva kansio: prints
• tiedoston nimi (Name)
• määräaikainen koodi, jota käyttämällä käyttäjä pääsee käsiksi tiedostoon (Get Shared Access Signature -toiminnolla saadun osoitteen loppu alkaen kysymysmerkistä)

Tulosteen tuhoaminen

Mudostetut tulostettavat tiedostot ovat kertakäyttöisiä. Niitä ei ole mitään järkeä tallentaa pysyvästi. Lisätään Flow:n loppuun rinnakkainen haara, jossa luotu tiedosto poistetaan blobista 30 minuutin kuluttua.

Flow on valmis. Käynnistetään liitetään se vielä PowerAppsiimme.

Vaihe 4 – Tulostaminen PowerAppsista

Lisätään PowerAppsin tilaussivulle ikoni, jota painamalla tuloste avautuu. Valmiiden ikonien joukosta ei löydy tulostinta, joten tyydymme paperiin.

Liitetään ikoniin Flow (Valitaan ikoni, Toiminto -> Flows -> valitaan oikea Flow).

Muokataan ikonin OnSelect -koodia hieman.

• Luodaan kokoelma, joka sisältää kaikki tilauksen rivit (colOrderRows). Kokoelman sisällöstä muodostetaan JSON muotoinen teksti lblWholeCollectionAsJSON -kenttään
• Kutsutaan Flow:ta sopivilla parametreilla. Tallennetaan Flow:n palauttama arvo muuttujaan (varPrintUrl).
• Avataan (Launch) tulostettava html-sivu

Lopputulos

Toimiiko se? Toimii. Tuloste generoituu nopeasti ja avautuu selaimeen omaan välilehteensä.

Tulosteen muodostaminen ja tallennus Blob storageen kestää tyypillisesti alle sekunnin.

30 minuutin kuluttua pyynnöstä printti häviää automaattisesti.