Heti kun organisaatioon on syntynyt eri tekijöiden toteuttamia Power Appseja, herää kysymys.

Miten nämä eri (kansalais)kehittäjien toteuttamat sovellukset saataisiin näyttämään ja tuntumaan samalta?

Miten kätevää olisikaan, jos voisimme tehdä organisaation käyttöön räätälöidyn Power Apps teeman, jossa on brändin mukaiset värit ja fontit valmiiksi paikallaan.

Harva tietää, että tämä on jo mahdollista. Center of Excellence (CoE) Starter Kit nimittäin sisältää teemaeditorin.

Toteutetaan tällä kertaa yrityksen brändin mukainen teema Power Apps -kehittäjien käyttöön. Samalla selviää miten CoE:n teemoitus toimii ja onko siitä käytännössä mihinkään.

CoE Theme Editor ja Theme Gallery

Center of Excellence sisältää kaksi teemoihin liittyvää Power Appsia. Ensimmäisellä (CoE Theme Editor) muodostetaan teemoja ja toisella (CoE Theme Gallery) käyttäjät selaavat teemoja ja lataavat niitä käyttöönsä.

Molempien Power Appsien käyttö edellyttää Power Apps -lisenssiä (per app tai per user plan).

Teemoitustyökalujen asennuksesta löytyy kattavat ohjeet, joten ei käydä sitä läpi. Teemoitustyökalut ovat teknisesti CoE:sta täysin irrallinen osuus, eli voit halutessasi asentaa ne ilman muuta CoE osuutta.

Suosittelen kuitenkin asentamaan koko CoE:n. Se sisältää useita hyödyllisiä työkaluja.

Oman teeman tekeminen

Käynnistetään teemaeditori ja siirrytään luomaan uutta teemaa (Create new theme).

Kullekin teemalle voi määritellä nimen lisäksi seuraavat oinaisuudet

  • käytettävät värit
  • fonttityyppi
  • normaalin sekä korostetun tekstin fonttikoot (erikseen tabletti ja puhelin layouteille)
  • kehysten (border) vahvuuden sekä kaarevuuden (radius)

Asetusten vaikutuksen näkee suoraan isosta esikatseluosiosta (Theme preview).

Vaikutta hyvältä. Rakennetaan malliksi oma teema.

Huomaamme nopeasti mikä työkalussa on ongelmana. Kun asetamme teeman väriksi (PrimaryColorValue2) brändin päävärin, muuttaa editori kaikki kompontit sen väriksiksi.

Muodostetut teemat ovat liian räikeitä. Kullekin kontrollille tulisi kyetä määrittelemään omat värinsä, jolloin lopputulos olisi jotain tämän kaltaista.

Ei kuitenkaan luovuteta. Asetetaan peruskontrollien värit (PrimaryColorValue2) sopivaksi harmaaksi ja fontit oikeiksi. Lopuksi tallennetaan PrimaryColorValue3:n arvoksi brändin pääväri ja toivotaan parasta.

Näyttää aika ankealta.

Toinen ongelma ovat fonttikoot. Voimme määritellä koot kahteen käyttötarkoitukseen (puhelin ja tabletti). Näiden lisäksi tarvisimme kolmannen koon, jota käytetään työasemalla käytettävissä sovelluksissa.

Ongelma on nopeasti ratkaisu muodostamalla oma teema työasemasovelluksille ja käyttämällä siinä riittävä pientä fonttia.

Teeman julkaisu

Seuraavaksi teema julkaistaan muiden käyttöön. Pelkkä Publish-painikkeen painaminen ei riitä, vaan teemasta tulee sitä ennen muodostaa ladattavat teematiedostot (kts ohje) ja ladata ne teeman liitteiksi.

Ankeaa.

Tämän jälkeen muut tekijät voivat ladata teeman käyttöönsä siihen tarkoitetusta Power Appsista (Theme Gallery).

Itse jättäisin välistä koko Theme Galleryn käytön. Se edellyttää käyttäjiltään Power Apps -lisenssejä. Sen sijasta loisin tarvittaviin ympäristöihin teemaa käyttävät esimerkkisovellukset (puhelin, tabletti, työasema). Tekijän aloittaessa uuden Power Appsin teon, hän ottaa pohjaksi kopion soveltuvasta esimerkkisovelluksesta.

Helppoa, eikä tarvitse puljata teematiedostojen kanssa.

Teeman käyttö

Miltä teemamme pohjalta luotu Power Apps sitten näyttää?

Luodaan uusi Power Apps avaamalla teematiedosto. Avaamisen yhteydessä näytettävä varoitus on sekin hyvä syy luoda tekijöille valmis malli Power Apps-palveluun ladattavien mallitiedostojen sijaan.

App OnStart -tapahtumasta näemme miten teema toimii. Valitun teeman värit sekä muut asetukset ladataan omiin muuttujiinsa.

Kontrollit hyödyntävät näitä muuttujia omissa asetuksissaan.

Ilahduttavinta on kuitenkin huomata, että PrimaryColorValue3 -arvoksi asettamaamme brändin pääväriä käytetään otsikoissa ja korostuksissa!

Lomakkeetkin näyttävät siedettäviltä.

Samoin valmiit näyttöpohjat.

Teeman komponenttien vimeistely

Mallipohja sisältää myös kolme yleiskäyttöistä komponenttia (Header, Preloader ja TabControl). Varsinkin Preloader:ia käytän paljon.

Niitä käytettäessä tulee muistaa vaihtaa Styles-ominaisuuden arvoksi ”ComponentStyles”. Se muodostetaan sovelluksen käynnistyksen yhteydessä valitun teeman tiedoista.

Komponentit näyttävät kuitenkin valjuilta, sillä ne käyttävät väreinään konttrollien väriä. Eivät brändin pääväriä.

Tämä on korjattavissa. Lisätään AppOnStart:in loppuun seuraava pätkä.

Patch(ComponentStyles,LookUp(ComponentStyles, cat_name = "PrimaryColor2Value"), {cat_value:LookUp(ThemeStyles, Name = "PrimaryColor3Value").Value})

Jolloin myös nämä yleiskäyttöiset komponentit näyttävät paremmilta.

Mitä teemasta puuttuu?

CoE:n teemaeditorilla pääsee pitkälle. Sen avulla kaikki Power Appsit käyttävät samoja päävärejä, fonttia sekä fonttikokoa.

Mutta siihen se sitten jääkin.

Painikkeet ovat keskeinen osa sovelluksia. Teeman jäljiltä kaikki painikkeet ovat harmaita. Itse tekisin mallipohjaan erillisen näytön, joka sisältää esimerkit ensi- ja toissijaisesta painikkeista. Ehkä jopa muutamalla värivaihtoehdolla.

Galleriat ovat toinen keskeinen rakennuspalikka. Mallipohjaan onkin hyödyllistä sisällyttä myös esimerkki organisaatiolle viritetyistä perusgalleriasta.

  • Millä ikonilla / painikkeella valitaan rivi galleriasta?
  • Miten rivit erotetaan toisistaan? Viiva? Taustaväri?

Alla muutamia variaatioita perusgalleriasta. Pääasia että kaikki tekijät käyttävät samaa.

Erilaisia esimerkkinäyttöjä voi rakentaa mallipohjaan käyttäjien nähtäville tarpeen mukaan.

Muita vaihtoehtoja teemojen tekemiseen

CoE:n teemaeditori on hyvä alku, mutta sellaisenaan se ei vielä aivan riitä. Pienin täydennyksin siitä saa kyllä varsin kelvollisen.

Voit tehdä mallipohjat myös alusta asti itse. Tällöin käyttäjät eivät koskaan luo uusia kontrolleja Power Appsin Lisää-toiminnolla, vaan kopioivat ne mallipohjastasi. Saattaa helposti unohtua. Valmiit näyttöpohjat eivät myöskään tällöin toimi. Niistäkin pitää tehdä omat versiot mallipohjaan.

Internetin syövereistä löytyy (tietenkin) useampi toteutus omasta teemaeditorista. Osa näyttää monipuolisimmilta kuin CoE:n vastaava.

Power Appsin organisaatiokohtaiset teemat ovat usein kysytty ominaisuus. Yhtä voittajaa niiden toteuttamiseen ei vielä ole.