Canvas Power Appsin sisältämien kontrollien lukumäärä vaikuttaa keskeisesti sovelluksen suorituskykyyn. Mitä vähemmän kontrolleja, sitä nopeammin sovellus käynnistyy ja toimii. Microsoft ohjeistaa pitämään kontrollien lukumäärän alle 500 kappaleessa.

500 kuulostaa paljolta, mutta sen saa täyteen yllättävän nopeasti.

Miten kontrollien lukumäärää voi vähentää? Yksinkertaisilla kikoilla. Käydään seuraavassa muutama niistä läpi.

Ylätunniste (header)

Näytön ylätunnisteen näkee usein tehdyn värillisellä laatikolla (rectangle), jonka päälle on asetettu teksti (label). Yhteensä kaksi kontrollia.

Samaan lopputulokseen pääsee asettamalla tekstikentän ylätunnisteen kokoiseksi ja antamalla sille taustavärin. Näin selviää yhdellä kontrollilla.

Mikäli ylätunniste on monimutkaisempi ja/tai sitä käytetän usealla näytöllä, kannataa se toteuttaa komponenttina. Näin se on jälleen yksi kontrolli per näyttö.

Painikkeen otsikko

Joissain tilanteissa on hyvä kertoa käyttäjälle ennen tallennusta, montako muutosta ollaan tallentamassa. Tämä vie kaksi kontrollia.

Vaihtoehtoisesti saman viestin voi sisällyttää painikkeen tekstiin. Tällöin selvitään yhdellä kontrollilla.

Navigointi

Toistuvat elementit on parasta toteuttaa gallerian avulla (mikäli ne esiintyvät vain yhdellä näytöllä).

Tyypillinen esimerkki tästä ovat erilaiset navigaatiot. Alla se perinteinen toteutustapa. Neljä painiketta = neljä kontrollia.

Alla vastaava navigaatio toteuttuna gallerian avulla. Kaksi kontrollia. Riippumatta siitä montako kohtaa navigaatiossa on.

Mikäli navigaatio toistuu usealla näytöllä, kannattaa se toteuttaa komponenttina.

Idea tuli varmaan selväksi. Kaikki keinot, joilla voi vähentää sovelluksessa käytettävien kontrollien määrää kannattaa käyttää. Mistä päästäänkin tämänkertaisen jutun varsinaiseen aiheeseen.

Nolla pikseliä korkea galleria

Olin viime viikolla European Power Platform Conferencessa ja yksi sen monista mainioista esityksistä oli Keith Whatlingin pitämä Make>New>App – Repeatable Power Apps. Siinä mainittiin ikään kuin ohimenen nolla pikseliä korkeat galleriat, joka on mielestäni jälleen yksi kiero neronleimaus Power Apps -maailmassa.

Idea ei ole mikään uusi, mutta minulta se on mennyt vuosien saatossa kokonaan ohi.

Vaakasuuntainen navigaatio

Olen aina tuskaillut vaakasuuntaisen navigaatioiden kanssa. Alla sellainen toteutettuna neljällä painikkeella.

Mikäli saman toteuttaa vaakasuuntaisena (horizontal) galleriana, on lopputulos tämä.

Navigaatioelementtien väliin jää ruma tyhjä tila, sillä gallerian sarakkeiden leveys määräytyy leveimmän painikkeen mukaan.

Mutta nollan korkuisella gallerialla tästä saa siistin!

Luodaan pystysuuntainen (vertical) galleria, jonka tietojoukkona (items) on taulukko. Taulukko sisältää navigaatioelementit.

Seuraavaksi asetataan gallerian rivin korkeus (TemplateSize) nollaksi. Nyt gallerian sisältö on ikäänkuin yhdellä ja samalla rivillä. Ne ovat kaikki päällekkäin.

Lisätään kullekin navigaatioelementille tiedoksi sen leveys (width) ja sijainti (x).

Vaihdetaan galleriassa näytettävä otsikko käyttämään kullekin elementille määriteltyä leveyttä ja sijaintia.

Muuuten hyvä, mutta Power Apps haluaa asetella elementit vaakasuunnassa limittäin (elementit laskevat oudosti). Lisätään taulukkoon elementille myös y-arvo, jota hieman manipuloimme.

Vaihdetaan otsikon y-arvoksi tämä hieman manipuloitu sijainti.

Näin meillä on navigaatio jonka jokaisen elementin leveyttä voimme vapaasti muokata!

Taulukon otsikkorivi

Samaa ideaa voi käyttää myös taulukon otsikoiden luomiseen.

Neljä kontrollia vs kaksi!

Taulukon rivit

Ideaa voi jatkaa ja käyttää galleriaa myös varsinaisen gallerian rivinä! Näin taulukon voi rakentaa aina kolmella kontrollilla riiippumatta sarakkeiden lukumäärästä.

Kuvakartta

Samalla idealla voi toteuttaa myös klikkailtavan kuvakartan. Taustalle vain kuva (alla toimiston pohjapiirros) ja samalla tekniikalla voi luoda gallerian, jossa kunkin työpisteen päällä on klikattava elementti.

Ja koko hoito kolmella kontrollilla. Riippumatta siitä montako valittavaa elementtiä kuvassa on.

Yhteenveto

Power Appsin suorituskyvyn optimointi on aina kompromissi suorituskyvyn, ylläpidettävyyden, visualisuuden ja käytettävyyden välillä.

Nopein sovellus on sellainen, jossa ei ole kontrolleja ollenkaan. Liiallinen kikkailu kontrolleilla voi johtaa hankalasti ymmärrettävään koodiin.

Huonoin vaihtoehto on mielestäni sovellus, johon on kehitelty kaikenlaista pientä visuaalista kikkaa, joilla ei kuitenkan ole käytettävyyden kannalta mitään merkitystä. Ja joiden toteutusta ei olla osattu ollenkaan optimoida, jolloin ne ainoastaan hidastavat sovellusta.