Maaliskuusta alkaen Canvas Power Appsissa on voinut käyttää perinteisten kontrollien lisäksi ns. moderneja kontrolleja. Samoja, joita käytetään mallipohjaisissa Power Appseissa. Microsoft mainostaa niiden etuina seuraavia.

  • Moderni ilme (pohjautuvat Microsoftin Fluent design malliin)
  • Suorituskyky
  • Saavutettavuus (toteuttavat suoraan WCAG 2.1 -tason)
  • Tukevat omia teemoja (joskus tulevaisuudessa)

Ja hyvältähän ne näyttävät. Alla lomake toteutettuna moderneilla ja perinteisillä kontrolleilla.

En ole moderneja kontrolleja kuitenkaan vielä käyttänyt. Niiden muokattavuus kun on vielä turhan vajaavaista.

  • Mitään värejä ei voi vaihtaa (kaikki on sinistä)
  • Fonttityyppiä ei voi vaihtaa
  • Fonttikokoa ei voi vaihtaa (painikkeet, syöttökentät..)

Tämä on ollut sääli, sillä kontrollien joukossa on todellisia helmiä. Mielestäni suurin puute on kuitenkin nyt korjattu. Vihdoin kontrollien värin voi vaihtaa.

On siis aika tutustua omaan suosikkiini. Välilehtiluetteloon (Tab list).

Esimerkki – Välilehdille jaettu lomake

Aloitetaan tekemällä sovellus, jolla ylläpidetään asiakkaiden (Accounts) tietoja. Asiakaslomake on todella pitkä, joten päätämme jakaa sen usealle välilehdelle.

Power Appsin luominen ja asetukset

Luodaan uusi canvas Power Apps. Tehdään siitä responsiivinen (näytön kokoon mukautuva). Ensimmäisenä vaihdetaan sovelluksen näyttöasetuksista (Settings – Display) skaalautuminen pois päältä (Scale to fit = Off).

Lisätään sovellukseen uusi näyttö. Käytetään valmista pohjaa (Sidebar).

Modernit kontrollit eivät ole oletuksena käytössä. Käydään vielä asetuksissa (Settings – Upcoming features) ottamassa ne käyttöön.

Nyt voimme käyttää myös moderneja kontrolleja.

Otsikkopalkki (Header)

Aloitetaan lisäämällä sovellukseemme otsikkopalkki (Header).

Muutetaan otsikkopalkin taustaväri (1), otsikko (2) ja näytettävä logo (3).

Galleria

Lisätään vasempaan palstaan galleria, jossa listataan kaikki asiakkaat (Accounts) Dataversestä. Galleriasta ei ole modernia versiota, joten joudumme tyytymään perinteiseen.

Lomakkeet

Lisätään näytön sisältöpalstaan moderni lomake, joka näyttää galleriasta valitusta asiakkaasta muutaman peruskentän.

Item: galAccounts.Selected

Tehdään lomakkeesta kaksi kopiota ja nimetään lomakkeet niissä esitettävien tietojen mukaisesti (frmbasic, frmContact, frmOther).

Vaihdetaan uusien lomakkeiden kentät sopiviksi.

Näin meillä on kolme lomaketta, joissa kussakin ylläpidetään sopivaa osajoukkoa asiakkaan tiedoista.

Nyt näiden lomakkeiden välillä pitäisi kyetä navigoimaan.

Välilehtiluettelo (Tab list)

Lisätään sisältöalueen alkuun välilehtiluettelo, jonka arvoina on Basic, Contact ja Other.

Items: Table({Value:"Basic"},{Value:"Contact"},{Value:"Other"})

Vaihdetaan samalla luettelon väri (Base palette color) mieleiseksi.

Välilehtiluettelon käyttö on siististi animoitu.

Lopuksi asetetaan kunkin lomakkeen näkyvyys määräytymään välilehtiluettelosta valittun välilehden perusteella.

Visible: TabList1.Selected.Value ="Basic"

Hyvältä näyttää!

Välilehtiluettelon oletusvalinta

Haluamme palata ensimmäiselle välilehdelle, mikäli käyttäjä vaihtaa muokattavaa asiakasta.

Päivitetään kontekstimuuttujan (locSelecFirstTab) arvoksi true kun asiakas valitaan.

OnSelect: Select(Parent); UpdateContext({locSelectFirstTab:true})

Asetetaan välilehtiluettelon oletusarvoksi (DefaultSelectedItems) ”Basic”, mikäli käyttäjä on valinnut asiakkaan (locSelectFirstTab = true). 

DefaultSelectedItems: If(locSelectFirstTab,Table({Value:"Basic"}))

Käyttäjän siirtyessä välilehdeltä toiselle (välilehtitaulukon OnChange -tapahtuma), asetetaan muuttujan arvoksi jälleen false.

OnChange: UpdateContext({locSelectFirstTab:false})

Muutosten tallentaminen

Lisätään näytölle painike, jota painamalla kaikilla kolmella lomakkeella tehdyt muutokset tallennetaan. Tämä onnistuu seuraavalla komenolla.

Patch(Accounts, galAccounts.Selected, frmBasic.Updates,frmContact.Updates,frmOther.Updates)

Odota, tallennan tietoja…

Joskus tietojen tallentaminen kestää tuskaisen pitkään. Tätä varten on hyvä lisätä hyrrä (spinner) kertomaan käyttäjälle tallennuksen olevan käynnissä.

Mikä parasta, tätä ei tarvitse enää tehdä itse. Sille on oma valmis kontrolli.

Lisätään sellainen lomakkeen yläpuolelle.

Asetetaan hyrrälle mieleinen väri ja teksti.

Tallennuspainiketta painettaessa asetetaan muuttujan (locShowWaitSpinner) arvoksi true. Tallennuksen valmistuttua palautetaan muuttujan arvoksi false.

UpdateContext({locShowWaitSpinner:true});
Patch(Accounts, galAccounts.Selected, frmBasic.Updates,frmContact.Updates,frmOther.Updates);
UpdateContext({locShowWaitSpinner:false});

Näin spinneri näkyy ainoastaan tallennuksen ollessa käynnissä (locShowWaitSpinner = true).

Piilotetaan välilehtitaulukko tallennuksen ajaksi.

Sama tehdään lomakkeille.

Esimerkki – Navigaation toteuttaminen välilehtitaulukkona

Lisätään sovellukseemme toinen näyttö. Käytännössä kopio äskeisestä, mutta tällä ylläpidetään yhteystietoja (Contacts).

Nyt tarvisimme tavan navigoida näiden kahden näytön välillä.

Lisätään uusi nimetty kaava (named formula, MainNavigationItems), joka sisältää navigaatiossa esitettävät otsikot (Value), sekä niitä vastaavat näyttökontrollit (Screen).

Formulas: MainNavigationItems = Table({Value:"Accounts", Screen:'Accounts Screen' },{Value:"Contacts", Screen:'Contacts Screen'});

Lisätään näytölle uusi välilehtitaulukko. Sen sisältönä on juuri luomamme kaava (MainNavigationItems).

Items: MainNavigationItems

Välilehdeltä toiseen siirryttäessä (OnChange), navigoidaan valittua välilehteä vastaavalle näytölle.

OnChange: Navigate(Self.Selected.Screen)

Välilehtitaulukossa on oletuksena valittuna aktiivista näyttöä vastaava välilehti.

DefaultSelectedItems: LookUp(MainNavigationItems, Screen = App.ActiveScreen)

Kopioidaan välilehti molemmille näytöille.

Asetetaan vielä lomakkeita ohjaava välilehtitaulukko näyttämään ensimmäistä välilehteä aina näytölle tultaessa (OnVisible).

Valmista!

Responsiivisuuden hyödyntäminen – Ponnahdusvalikko

Yksi välilehtitaulukon siisteistä ominaisuuksista on sen responsiivisuus.

Tehdään navigaatiosta hieman kattavampi.

Mitä kun kaikki välilehdet eivät mahdu näytölle? Taulukon loppuun ilmestyy kolme pistettä, jonka takaa loput löytyvät.

Tätä ominaisuutta hyödyntämällä on vihdoin mahdollista lisätä gallerian riveille ponnahdusvalikkoja. Sellaisia, jotka sijoittuvat näytöllä automaattisesti oikein. Tämän idean varastin Reza Dorranin videolta.

Lisätään gallerian riville välilehtitaulukko, jonka arvoina on erilaisia riville tehtäviä toimenpiteitä.

Items: Table({Value:"Edit"}, {Value:"Delete"}, {Value:"Open LinkedIn profile"})

Välilehtitaulukko asetetaan kuitenkin niin pieneksi, ettei siitä näy ensimmäistäkään välilehteä. Näkyville tulee ainoastaan kolme pistettä.

Nyt valikko ponnahtaa näytölle automaattisesti oikeaan paikkaan.

Välilehtitaulukon OnSelect -tapahtumassa voi määritellä mitä eri valinnoista tapahtuu.

Yhteenveto

Viimeisimpien uudistusten myötä modernit kontrollit ovat vihdoin käyttökelpoisia myös canvas -sovelluksissa. Niitä käyttämällä on helppoa ja nopeaa luoda modernin näköisiä responsiivisia sovelluksia. Edelleenkään ne eivät ole yhtä taipuisia kuin vanhat kontrollit, mutta aina ei tarvikaan olla.

Vielä kun Microsoft saa julkaistua muokattavat teemat moderneille kontrolleille, niin alan olemaan tyytyväinen.