Et tema til en lærredsapp i Power Apps

Et tema i en lærredsapp er farver og skrifttype samlet ét sted, så en ændring af den primære farve slår igennem overalt og ikke kræver, at hver knap rettes for sig. Der er to måder, og hvilken der bruges, afhænger af kontrollerne: de moderne kontroller har temaer indbygget, de klassiske skal pege på en palet, der er lavet i hånden.

Moderne temaer#

Med de moderne kontroller slået til (Settings → Updates → New) har Studio en rude med temaer. Et tema, der vælges dér, sætter egenskaben App.Theme, og de moderne kontroller følger det af sig selv (Microsoft).

De indbyggede temaer kan ikke rettes. Et eget tema laves med Create custom theme ud fra en primær farve, en skrifttype og to skydere, Torsion og Vibrancy, og enkelte farver i paletten kan overskrives. Et tema kan også sættes ind som YAML med Paste theme, fx:

1BasePaletteColor: '#2e4bf0'

De klassiske kontroller følger ikke temaet. Studio tilbyder at sætte formler på deres egenskaber, der peger på temaets farver, og det samme kan gøres i hånden:

Button1.Fill = App.Theme.Colors.Primary

Microsoft er ikke enig med sig selv om, hvor færdigt det er. Siden om opdateringer kalder alt under New generelt tilgængeligt, mens retningslinjerne for design siger, at kun en del af de moderne kontroller er det, og at resten er i preview (Microsoft). Referencen mærker bl.a. Card, Dropdown og Table som preview. De klassiske temaer (Steel og de andre) er flyttet til Retired → Keep classic themes.

En egen palet til de klassiske kontroller#

Til en app bygget med klassiske kontroller er metoden at lægge paletten i en post og lade hver kontrol pege på den. Den mest brugte beskrivelse er Matthew Devaneys “Create A Power Apps Custom Theme” (2022), som lægger farverne i en global variabel i App.OnStart:

Set(
    gblAppColors,
    {
        Primary1: ColorValue("#30475E"),
        Primary2: ColorValue("#F05454"),
        Primary3: ColorValue("#222831"),
        Primary4: ColorValue("#DDDDDD")
    }
);

En knaps Fill bliver så gblAppColors.Primary1. Devaney har tilsvarende variabler til skrifttyper, ikoner (som SVG) og standardværdier for kanter, højder og hover-farver. Hver kontrol skal stadig have formlen sat én gang. Variablen gør det ikke af sig selv, og det skriver han også selv.

I dag kan paletten ligge i en navngiven formel i App.Formulas i stedet for en variabel:

Farver = {
    Primaer: ColorValue("#30475E"),
    Accent: ColorValue("#F05454"),
    Baggrund: ColorValue("#F3F2F1")
};

En navngiven formel er altid opdateret, kan ikke ændres af en Set et andet sted i appen og beregnes først, når den bruges. Microsoft nævner temaer som et af formålene: ellers skal der erklæres “tens to hundreds of variables in App.OnStart” (Microsoft). Microsofts eksempel bruger enkelte værdier, ikke en post som ovenfor. Posten er gyldig Power Fx, men formlerne her er ikke kørt.

Samme tema i flere apps#

Skal flere apps se ens ud, er et komponentbibliotek vejen. En knap eller et sidehoved med paletten indbygget lægges i biblioteket, og apps, der bruger komponenten, får besked, når der er en ny version, næste gang de åbnes til redigering (Microsoft). Kun publicerede versioner af biblioteket kommer frem. En komponent, der er rettet lokalt i en app, er blevet en kopi og får ikke længere opdateringer.

Kontrasten#

Et tema er også det sted, hvor kontrasten afgøres, for det er dér, tekstens farve og baggrunden vælges sammen. Microsofts krav til lærredsapps er mindst 4,5:1 for almindelig tekst og 3:1 for stor tekst og for ikoner og kanter (Microsoft). Den europæiske standard EN 301 549 henviser til WCAG 2.1 niveau AA, og for websider er kontrastkravet netop WCAG’s 1.4.3 (ETSI).

App checker → Accessibility i Studio finder manglende etiketter og fokus, men den måler ikke kontrasten (Microsoft). Den skal tjekkes med et andet værktøj, helst én gang på paletten og ikke skærm for skærm.

Det der driller#

• OnStart eller Formulas. En variabel fra OnStart kan ændres af enhver Set i appen, og OnStart forsinker starten. En navngiven formel kan ingen af delene.
• Hver kontrol skal pege på paletten. Både Devaneys variabler og en navngiven formel virker kun på de egenskaber, der har fået formlen. En kontrol, der er kopieret ind fra en anden app, har faste farver.
• Moderne og klassiske kontroller i samme app følger hver sit: App.Theme og paletten. Farverne skal holdes ens begge steder.
• Branding Template App V3, den gamle skabelon fra Power Users-forummet, findes ikke længere. Adressen sender videre til forsiden af community.powerplatform.com.