Henkilökorttien tekeminen Power Appsilla

Hiemankaan isommassa organisaatioissa henkilöstö käyttää töissä kuvallisia henkilökortteja. Kortit joko tilataan ulkoiselta palveluntarjoajalta tai ne tulostetaan itse. Tulostukseen tarvitaan erikoistulostin ja sovellus korttien tekoon. Ellei sitten halua tehdä niitä esim Wordilla.

Voisiko henkilöstökorttien tulostuksen toteuttaa canvas Power Appsina?

Tarvehan ei ole järin monimutkainen. Meillä on yksi tai useampi henkilökorttipohja, joista valitsemme oikean. Lisäämme henkilön tiedot (nimen ja tittelin) sekä kuvan. Lopuksi tulostamme kortin.

Valmis kortti voisi näyttää vaikka tältä.

Käytännössä tässä on kuitenkin yksi ongelma. Unohdetaan toteutuksesta kaikki muu ja keskitytään tähän ongelmaan.

Kuvan sovittaminen kortille

Ongelma on ne kuvat. Niiden rajaus ei ole vakio. Jokaisen kortin kohdalla joudumme asemoimaan kuvan käsin. Miten tämä onnistuu?

Power Appsissa ei ole mitään ”tartu ja raahaa” -ominaisuutta, joten kuvan asemointi tulee toteuttaa hieman tylsemmin.

Aloitetaan lisäämällä sovellukseen kuvakontrolli. Ladataan siihen esimerkkikuva työntekijästä.

Idea on, että henkilön kuva on henkilökorttipohjan takana ja kuvaa siirtämällä ja zoomaamalla se saadaan asemoitua oikeaan kohtaan.

Kuvan liikuttaminen

Lisätään neljä painiketta, joilla kuvaa voi siirtää.

Alustetaan näytölle tultaessa (Screen OnVisible) paikallinen muuttuja, jossa ylläpidetään tietoa kuvan sijainnista.

UpdateContext({locImgY:190, locImgX:155)}

Vaihdetaan kuva käyttämään x ja y arvoinaan näitä muuttujia.

Painikkeiden painaminen (OnSelect) päivitää kuvan x tai y arvoa.

OnSelect: UpdateContext({locImgY:locImgY-5})

Nyt voimme liikuttaa kuvaa eri suuntiin.

Kuvan zoomaaminen

Kortilla tulee näkyä ainoastaan kasvot, joten kuvaa tulee kyetä myös zoomaamaan. Alustetaan näytölle tultaessa muuttujat myös kuvan korkeudelle ja leveydelle.

UpdateContext({locImgY:190, locImgX:155, locImgHeight:377, locImgWidth:290})

Lisätään näytölle painikkeet kuvan lähentämiseksi ja loitontamiseksi. Kuvaa suurennetaan lisäämällä sen leveyttä ja korkeutta, sekä siirtämällä sitä hieman jolloin keskikohta pysyy samassa paikassa.

OnSelect: UpdateContext({locImgY:locImgY-5, locImgX:locImgX-5, locImgHeight:locImgHeight+10, locImgWidth:locImgWidth+10})

Kuvan kääntäminen

Lisätään vielä mahdollisuus kääntää kuvaa. Lisätään muuttujimme vielä tieto siitä paljonko kuvaa on käännetty (ImageRotation).

UpdateContext({locRotation: ImageRotation.None, locImgY:190, locImgX:155, locImgHeight:377, locImgWidth:290})

Viimeisellä painikkeella käännetään kuvaa 90 asetta kerrallaan.

Käytetty kaava:

UpdateContext(
    {
        locRotation: Switch(
            locRotation,
            Blank(),
            ImageRotation.Rotate90,
            ImageRotation.None,
            ImageRotation.Rotate90,
            ImageRotation.Rotate90,
            ImageRotation.Rotate180,
            ImageRotation.Rotate180,
            ImageRotation.Rotate270,
            ImageRotation.Rotate270,
            ImageRotation.None
        )
    }
)

Nyt kuvaa voi siirtää, zoomata ja kääntää. Vielä tarvitaan henkilökortti kuvan ympärille.

Henkilökortin loput tiedot ja viimeistely

Henkilökortin koko on 86*54mm. Lisätään kortille kehykset (rectangle-kontrolli) tällä kuvasuhteella.

Haluamme kuvasta näkyvän ainoastaan kasvot. Lisätään kuvan päälle toinen kuva. Se on SVG-formaatissa oleva iso valkoinen laatikko, jonka keskellä on pyöreä läpinäkyvä reikä.

Kuva:

"data:image/svg+xml;utf8, " & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='600' height='800'><mask id='hole'><rect width='100%' height='100%' fill='white' fill-opacity='1'/><circle cx='300' cy='350' r='100' fill='black'/></mask><rect width='100%' height='100%' fill='white' mask='url(#hole)'/></svg>")

Lopuksi lisätään yrityksen logo ja henkilön tiedot.

Näin kuvan keskittämisongelma on ratkaistu. Jos tehty ratkaisu on riittävän hyvä, voi tämän ympärille rakentaa kaiken muun tarvittavan (eri korttipohjat, henkilön tietojen syöttäminen kortille, kuvan lataaminen ja tulostus).

Vaihtoehto 1 – PCF-kontrolli

Oletan että kuvan voisi raahata oikeaan paikkaan tekemällä tätä varten oman PCF-kontrollin. Mutta kuka haluaa koodata enää mitään, kun voi vibe-koodata!

Mistä päästäänkin seuraavaan vaihtoehtoon.

Vaihtoehto 2 – Generative pages

Entä jos koko homman toteuttaisi generative pagesilla?

Annetaan sille esimerkkikuva henkilökortista ja hieman ohjeita. Lopputulos ei näytä yhtään pöllömmältä.

Pieniä kauneusvirheitä, ladattu kuva asettuu hieman erikoisesti.

Mutta kuvaa voi zoomata ja sen raahaaminen oikeaan paikkaan toimii juuri kuten haluamme. Raahamisen aikana kuva näkyy kokonaisuudessaan.

Kelvollinen!

Perinteisellä Power Appsilla on helpompaa tehdä pikselilleen oikeannäköiset pohjat. Niiden tekeminen tulisi miettiä generative pagesin kanssa jollain aivan muulla tavalla. Varsinaista tulostusta en halua edes ajatella.

Näistä syistä toteuttaisin tämän esimerkin (toistaiseksi) perinteisenä Power Appsina. Jos valittavina työkaluina ovat canvas Power Apps ja generative pages.