Knapper I Power Apps

Gå ikke glip af ny viden

Tilmeld dig vores nyhedsbrev

Udgivet den: 4. november 2019
Opdateret den: 1. november 2021

Kategori(er): 

#Guides
#Power Platform

Få styr på dine knapper i Power Apps

Knapperne i Power Apps skal ofte have forskellige funktioner og udseende. Dette ser vi på i denne guide, hvor form, farver og tekst er i fokus.

Tilpas farver og tekst

Når du indsætter en knap I Power Apps, får du som udgangspunkt en knap, som følger et blåt tema.

Du kan imidlertid have brug for at tilpasse knappen til dit eget eller din virksomheds farvetema. Lad os derfor se på de elementer, som en knap består af.

Indstillinger for Fill, BorderColor og Color (of text) finder du under ´Properties´sektionen, som vises, når du klikker på en knap.

Hvis du blot har en enkelt knap, som skal følge dit angivne tema, så kan du med fordel bruge ’Properties’ sektionen. Har du derimod flere knapper og brug for flere tilpasninger, så er det en god ide at lære at bruge the Formula bar i PowerApps.

Når du vælger et kontrolfelt, vil du se, at the property og the formula har nogle værdier.
I dette tilfælde en text property og en formula til at vise knappen.

Så for at ændre knappens tekst, skal du blot indtaste din værdi, dvs. din ønskede tekst, i mellem de to anførelses-tegn ““.

Hvis vi klikker på den dropdown, der fremgår i property-boksen, får vi nu flere properties at vælge imellem.

I dette tilfælde bruger vi standardfarver, som vises i formula baren, når du begynder at taste farvens navn. På den måde kan du således hurtigt fremsøge og klikke på den farve du ønsker.

Har du brug for specifikke virksomhedsfarver, kan du også anvende RGBA koder, som vist her:

Du kan altså helt selv bestemme, hvordan dine knapper skal se ud i PowerApps.

Genbrug properties for knapper i PowerApps

Nu ser vi nærmere på, hvordan man kan genbruge disse properties (tekst og farve) på andre knapper.

Vi har lavet en knap ved navn ”ButtonOrange” (meget kreativt) og herefter tilføjet to yderligere knapper, ’Help’ og ’Cancel’:

Nu kan vi ændre properties for de to blå knapper ved at bruge ’properties’ sektionen, som ses ved at klippe på knappen. (Se første guide)

Men i stedet vil vi genbruge de anvendte properties for ’ButtonOrange’ knappen, så vi ikke behøver at bøvle med at finde farvekoder mv.

Vi klikker nu på ’Help’ knappen og vælger ’Fill’ properties, som har følgende default indstillinger:

Og i stedet for at ændre til orange, genbruger jeg properties for ”ButtonOrange” ved at indtaste navnet på knappen, og vælge den i den viste dropdown:

Herefter angiver vi hvilke properties fra ”ButtonOrange”, som vi ønsker at anvende. Det gøres ved at indtaste knappens navn, efterfulgt af punktum og angivelse af hvilke properties, der ønskes genbrugt, f.eks. ’Fill’:

Og nu har vi samme ’fill’ farve som ’ButtonOrange’. På samme måde kan vi genbruge ’BorderColor’ og ’Color’ properties.

Og ved at genbruge properties på alle tre knapper, får vi et helt ensartet look:

Hvis vi ønsker en ny ‘fill’ farve, behøver vi blot at ændre ’fill’ property for ’ButtonOrange’, hvormed de to andre knappers ’fill’ farve også ændres.

Du kan genbruge properties på en hver kontrol. Her ses eksempelvis ‘ButtonOrange’ properties anvendt på et ikon:

Tilpas formen på knapper i PowerApps

Ovenover endte vi med 3 ens knapper ved at genbruge properties for den første knap.

Men hvad så hvis vi ønsker en anden form , som f.eks.:

Som det ses, er der mange muligheder.

Lad os først se på formen på de to første knapper, som opnås ved at tilpasse ”BorderRadius” i ’Properties’ sektionen

Med denne funktion ændrer du således alle 4 hjørner af knappen.

Hvis du ønsker formen på den tredje knap, vælges der ’Multiple’ i Border radius, hvormed hjørnerne kan få forskellige properties:

  • RadiusTopLeft
  • RadiusTopRight
  • RadiusBottomLeft
  • RadiusBottomRight

Vi skal således tilpasse properties for knappens fire hjørner for at opnå formen som på den tredje knap:

Følg os på

Brug for mere information?

Så ta' fat i Claus eller en af vores andre flinke medarbejdere.

Image

Claus Friis Pedersen

Partner og CEO