Palautteet osana myymälöiden tarkastusprosessia

Yksi kevään kiinnostavimmista uusista ominaisuuksista on perinteisen (canvas) PowerApps:in upottaminen osaksi model-driven PowerAppsia.

Kuulostaa sekavalta?

Niin kuulostaa. Katsotaan mitä tämä tarkoittaa käytännössä.

Esimerkki – Myymälöiden auditointi

Teimme aiemmin mobiilisovelluksen myymälöiden tarkastajille. Tietovarastona oli Common Data Service (CDS) for Apps ja mobiilisovellus tehtiin PowerAppsilla.

Erittäin toimiva ratkaisu liikkuvalle työntekijälle.

 

Varsinaisten myymälöiden, niiden tarkastusten sekä tarkastusjaksojen hallinta toteutettiin model-driven Appsina. Tämä on mahdollista, kun tietovarastona käytettiin CDS for Apps:ia.

Model-driven Apps sopii tähän erinomaisesti. Sitä käyttäen ratkaisua olisi luontevaa (ja helppoa) laajentaa esimerkiksi toteuttamalla

• prosessi uuden myymälän lisäämiseksi
• prosessi myymälän poistamiseksi
• prosessi huonoja arvosanoja jatkuvasti saaneiden myymälöiden käsittelemiseksi
• jne

Ikäväksemme kaikki tieto ei aina ole tallennettu CDS:ään. Tai model-driven appsin käyttöliittymästä loppuvat muokkausmahdollisuudet kesken.

Tällöin apuun tulee PowerApps.

Myymälään liittyvien palautteiden esittäminen

Esimerkkiyrityksemme on kerännyt jo vuosia loppuasiakkailtaan palautetta myymälöistä. Täydellisessä maailmassa palautteet olisi tallennettu Dynamics 365:een / CDS for Appsiin.

Mutta maailma harvoin on täydellinen. Palautteet on kerätty SharePoint-listaan.

Täydennetään aiemmin tehtyä myymälöiden hallinnointisovellusta siten, että myymälän perustietojen yhteydessä näytetään myös myymälää koskevat palautteet.

Tämä tehdään tietenkin PowerAppsilla.

PowerAppsin upottaminen model-driven Appsiin

Miten tämä upottaminen käytännössä tehdään? Aloitetaan avaamalla tarkastusten hallinnointisovellus (StoreAudit).

Haluamme esittää palautteet myymälän tiedot esittävällä näytöllä (Store). Valitaan se (Store -> Forms -> New Form -> edit).

Esiin ilmestyy Dynamicsin vanha lomake-editori.

Editori saattaa näyttää hieman sekavalta. Olemme käytännössä muokkaamassa allaolevaa sivua, jonka avulla katsotaan / muokataan / lisätään myymälän tietoja.

Sivu on yksipalastainen. Muokataan sitä siten, että General-osio jaetaan kahteen sarakkeeseen. Alkuperäiset kentät jäävät vasemmalle. Varataan oikea reuna PowerAppsille.

Raahataan oikean reunan kenttä-listasta Name-kenttä paikkaan, johon haluamme sijoittaa PowerAppsin.

Muokataan lisätyn kentän ominaisuuksia (change properties).

Ensimmäisenä otetaan ”Display label on the Form” -valinta pois päältä. Muutoin PowerAppsin viereen tulisi kentän otsikko.

Siirrytään Controls-välilehdelle. Liitetään kenttään uusi kontrolli Add Control -linkkiä painamalla.

Olemme liittämässä Canvas app:ia. Valitaan se ja painetaan Add.

Haluamme PowerAppsimme näkyvän web-liittymässä teksikentän tilalla. Eli Canvas app -riville ruksi kohtaan Web.

Painetaan lopuksi Customize.

Napista avautuu PowerApps, jossa on luotuna yhteys model-driven Appsiin (ModelDrivenFormIntegration).

Konsepti on sama kuin Power BI:n kanssa.

Käytännössä PowerAppsista pääsee nyt käsiksi siihen model-driven appsin entiteettiin, josta lähdimme liikkeelle (Store). Ja nimenomaan siihen tietueeseen, joka model-driven appsissa parhaillaan on näkyvillä.

 

Ei tehdä vielä mitään muokkauksia PowerAppsiin.

Laitetaan PowerAppsin asetuksista ”Enable app embedding user experience” päälle.

Näin PowerAppsimme näyttää hieman paremmalta upotettuna.

Tallennetaan ja suljetaan PowerApps.

Avoimeen dialogiin on ilmestynyt luodun PowerAppsin Id.

Painetaan OK. Ja Save. Ja Publish.

Avataan model-driven apps ja avataan joku myymälä.

Olemme onnistuneesti upottaneet canvas PowerApps:in Model-Driven Appsin sisälle!

Voimme aloittaa varsinaisen työn.

Myymälään liittyvien palautteiden esittäminen

Kaikki myymälöihin liittyvät palautteet on tallennettu yhteen SharePoint-listaan.

Jokainen palaute sisältää

• palautetta koskevan myymälän nimen (store)
• palautteen (feedback)
• palauteluokan (category)
• käsittelijän (hander)
• käsittelyn tilan (status)

Avataan luomamme PowerApps ja lisätään SharePoint-lista tietolähteeksi (Data source).

Lisätään näytölle galleria, jossa palautteet esitetään.

Näytetään palautteista seuraavat sarakkeet

• palaute
• käsittelyn tila

Sekä lisätään riville kuva-elementt.

Lisätään tietolähteeksi Office 365 Users. Sen avulla voimme näyttää rivillä palautteen käsittelijän kuvan.

Image: Office365Users.UserPhotoV2(Handler.Email)

Haluamme näyttää galleriassa ainoastaan parhaillaan katsottavaan myymälään liittyvät palautteet. Suodatetaan (Filter) ne siis myymälän mukaan.

Tallennetaan, julkaistaan ja avataan jälleen model-driven apps.

Yllättäen palautetekstin esittävä kenttä on liian lyhyt ja teksti katkeaa kesken.

Syynä on skaalaus. PowerAppsin koko muuttuu model-driven appsin sisällä sen mukaan minkä kokoinen selainikkuna kulloinkin on.

PowerAppsin kentät ovat oletuksena kiinteän levyisiä. Ratkaisu on muuttaa kentän leveys riippumaaan näytön leveydestä.

Width: Screen1.Width - 160

Nyt palautteen näyttävän kentän leveys riippuu PowerAppsin kulloinkin saamasta tilasta.

Viilataan ratkaisua vielä hieman

• Lisätään otsikko (Palautteet)
• Lisätään mahdollisuus suodattaa palautteita tilan mukaan (kaikki tai ainoastaan käsitellyt)
• Vaihdetaan gallerian värit sopimaan paremmin model-driven värimaailmaan
• Vaihdetaan palautteen avaava ikoni paremman näköiseksi
• Määritellään palaute avautumaan nuolesta: Launch(ThisItem.’Link to item’)
• Määritetään nuolen paikka dynaamisesti: X = Screen1.Width – 90

Palautteen avaava nuoli:

Palauuteiden suodattaminen:

Kelpaa.

 

Nuolta klikkaamalla palaute avautuu SharePointissa.

Myymälän esittäminen kartalla

Kun kerran aloitettiin, niin leikitään vielä lisää. Lisätään PowerAppsiin kartta, josta näkee missä kyseinen myymälä on.

Tarvitsemme ensin avaimen Bing Maps:in API:iin. Kun se on hankittu, lisätään PowerAppsiin BingMaps -yhdistin.

Lisätään näytölle kuva-kontrolli (image), jossa esitettävä kuva haetaan Bing-palvelusta.

BingMapin GetMapV2-kutsun parametrit ovat

• kuvassa esitettävä karttatyyppi (imagerySet)
• miten paljon karttaa on zoomattu (zoomLevel)
• leveysaste (latitude)
• pituusaste (longitude)
• kartalla näytettävän pinnin sijainti, otsikko jne

Muutaman kokeilun jälkeen päädyin seuraavaan.

BingMaps.GetMapV2(
  "CanvasLight",
  13,
  Value(First(ModelDrivenFormIntegration.Data).crd01_Latitude),
  Value(First(ModelDrivenFormIntegration.Data).crd01_Longitude),
  {
    pushpinLatitude: Value(First(ModelDrivenFormIntegration.Data).crd01_Latitude),
    pushpinLongitude: Value(First(ModelDrivenFormIntegration.Data).crd01_Longitude)
  }
)

Kuvan leveys on syytä asettaa dynaamiseksi, ettei käy kuten palautetekstin kanssa.

Width: Screen1.Width

Valmis!

Yhteenveto

PowerAppsin hyödyntäminen model-driven Appsin sisällä on konseptina hyvin samanlainen kuin PowerAppsin käyttäminen Power BI:n sisällä.

Molemmissa tapauksissa PowerApps voi lukea isäntäsovelluksesta kulloiseenkin kontekstiin liittyviä tietoja.

Upottamalla PowerAppsin model-driven appsin sisään voi hyödyntää ratkaisussa molempien teknologioiden parhaita puolia.