Knappkontroll i PowerAppsButton control in PowerApps

En kontroll som användaren använda för att interagera med appen genom att klicka eller trycka på den.A control that the user can click or tap to interact with the app.

BeskrivningDescription

Konfigurera egenskapen OnSelect för knappen för att köra en eller flera formler när användaren klickar eller trycker på kontrollen.Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

NyckelegenskaperKey properties

OnSelect – Hur appen reagerar när användaren trycker eller klickar på en kontroll.OnSelect – How the app responds when the user taps or clicks a control.

Text – Text som visas i en kontroll eller som användaren skriver i en kontroll.Text – Text that appears on a control or that the user types into a control.

Ytterligare egenskaperAdditional properties

Align – Placeringen av text i förhållande till kontrollens horisontella centrum.Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelect – Inaktiverar kontrollen automatiskt när beteendet OnSelect körs.AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor – En kontrolls kantlinjefärg.BorderColor – The color of a control's border.

BorderStyle – Om en kontrolls kantlinje är solid, streckad, prickad eller ingen.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness – Tjockleken på en kontrolls kantlinje.BorderThickness – The thickness of a control's border.

FocusedBorderThickness – Tjockleken på en kontrolls kantlinje när den markeras med tangentbordet.FocusedBorderThickness – The thickness of a control's border when it has keyboard focus.

Color – Textens färg i en kontroll.Color – The color of text in a control.

DisplayMode – Om kontrollen tillåter indata från användaren (Redigera), bara visar data (Visa) eller är inaktiverad (Inaktiverad).DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor – Färgen på en kontrolls kantlinje om kontrollens egenskap DisplayMode är inställd på Disabled.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor – Textens färg i en kontroll om dess egenskap DisplayMode är inställd på Disabled.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill – Bakgrundsfärgen i en kontroll om dess egenskap DisplayMode är inställd på Disabled.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill – Bakgrundsfärgen i en kontroll.Fill – The background color of a control.

Font – Namnet på den teckensnittfamilj som text visas i.Font – The name of the family of fonts in which text appears.

FontWeight – Stilen på texten i en kontroll: Bold, Semibold, Normal eller Lighter.FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height – Avståndet mellan kontrollens övre och nedre kanter.Height – The distance between a control's top and bottom edges.

HoverBorderColor – Färgen på en kontrolls kantlinje när användaren för muspekaren över denna kontroll.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor – Färgen på texten i en kontroll när användaren för muspekaren över den.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill – Bakgrundsfärgen i en kontroll när användaren för muspekaren över den.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic – Om texten i en kontroll är kursiv.Italic – Whether the text in a control is italic.

PaddingBottom – Avståndet mellan texten i en kontroll och kontrollens nedre kant.PaddingBottom – The distance between text in a control and the bottom edge of that control.

PaddingLeft – Avståndet mellan texten i en kontroll och kontrollens vänstra kant.PaddingLeft – The distance between text in a control and the left edge of that control.

PaddingRight – Avståndet mellan texten i en kontroll och kontrollens högra kant.PaddingRight – The distance between text in a control and the right edge of that control.

PaddingTop – Avståndet mellan texten i en kontroll och kontrollens övre kant.PaddingTop – The distance between text in a control and the top edge of that control.

Nedtrycksant medan en kontroll är nedtryckt, annars falskt.PressedTrue while a control is being pressed, false otherwise.

PressedBorderColor – Färgen på en kontrolls kantlinje när användaren trycker eller klickar på denna kontroll.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor – Färgen på texten i en kontroll när användaren trycker eller klickar på denna kontroll.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill – Bakgrundsfärgen i en kontroll när användaren trycker eller klickar på denna kontroll.PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft – Hur pass avrundat det nedre vänstra hörnet i en kontroll är.RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight – Hur pass avrundat det nedre högra hörnet i en kontroll är.RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft – Hur pass avrundat det övre vänstra hörnet i en kontroll är.RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight – Hur pass avrundat det övre högra hörnet i en kontroll är.RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Size – Teckenstorleken för den text som visas i en kontroll.Size – The font size of the text that appears on a control.

Strikethrough – Om en linje dras genom den text som visas i en kontroll.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex – Anpassar tabbordningen för kontrollerna vid körningen när värdet inte är noll.TabIndex – Customizes the tab order of controls at runtime when set to a non-zero value.

Tooltip – Beskrivande text som visas när användaren för muspekaren över en kontroll.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline – Om en linje dras under den text som visas i en kontroll.Underline – Whether a line appears under the text that appears on a control.

VerticalAlign – Placeringen av text i förhållande till kontrollens vertikala centrum.VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible – Om en kontroll visas eller är dold.Visible – Whether a control appears or is hidden.

Width – Avståndet mellan kontrollens högra och vänstra kanter.Width – The distance between a control's left and right edges.

X – Avståndet mellan kontrollens vänstra kant och den överordnade behållarens vänstra kant (skärmen om det inte finns någon överordnad behållare).X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y – Avståndet mellan kontrollens övre kant och den överordnade behållarens övre kant (skärmen om det inte finns någon överordnad behållare).Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Navigate( ScreenName, ScreenTransitionValue )Navigate( ScreenName, ScreenTransitionValue )

ExempelExamples

Lägga till en grundläggande formel till en knappAdd a basic formula to a button

  1. Lägg till en textinmatningskontroll och ge den namnet Källa.Add a Text input control, and name it Source.

    Vet du inte hur du lägger till, namnger och konfigurerar en kontroll?Don't know how to add, name, and configure a control?

  2. Lägg till kontrollen Knapp och ange egenskapen Text som ”Lägg till” samt ange egenskapen OnSelect enligt följande formel:Add a Button control, set its Text property to "Add", and set its OnSelect property to this formula:
    UpdateContext({Total:Total + Value(Source.Text)}) UpdateContext({Total:Total + Value(Source.Text)})

    Om du vill ha mer information om UpdateContext-funktionen eller andra funktioner?Want more information about the UpdateContext function or other functions?

  3. Lägg till kontrollen Etikett och ange egenskapen Text som Total och tryck sedan på F5.Add a Label control, set its Text property to Total, and then press F5.
  4. Rensa standardtexten från Källa, skriv en siffra i den och klicka eller tryck på Lägg till.Clear the default text from Source, type a number in it, and then click or tap Add.

    Etiketten visar siffran som du angav.The Label control shows the number that you typed.

  5. Rensa siffran från Källa, skriv en annan siffra i den och klicka eller tryck på Lägg till.Clear the number from Source, type another number in it, and then click or tap Add.

    Kontrollen Etikett visar summan av de två siffror som du har angett.The Label control shows the sum of the two numbers that you typed.

  6. (Valfritt) Upprepa föregående steg en eller flera gånger.(optional) Repeat the previous step one or more times.
  7. Om du vill återgå till standardarbetsytan trycker du på Esc (eller klickar eller trycker på ikonen för att stänga i det övre högra hörnet).To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

Konfigurera en knapp med flera formlerConfigure a button with multiple formulas

Lägg till en formel som rensar kontrollen Textinmatning mellan poster.Add a formula that clears the Text input control between entries.

  1. Ange egenskapen HintText för Källa som "Ange ett tal".Set the HintText property of Source to "Enter a number".
  2. Ange egenskapen OnSelect för Lägg till som denna formel:Set the OnSelect property of Add to this formula:

    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})
    UpdateContext({Total:Total + Value(Source.Text)});
    UpdateContext({ClearInput: ""})

    Obs! Avgränsa flera formler med semikolon ”;”.Note: Separate multiple formulas with a semi-colon “;”.

  3. Ange egenskapen Standard för Källa som ClearInput.Set the Default property of Source to ClearInput.
  4. Tryck på F5 och testa sedan appen genom att lägga till flera siffror tillsammans.Press F5, and then test the app by adding several numbers together.

Lägg till en annan knapp för att återställa summanAdd another button to reset the total

Lägg till ytterligare en knapp för att rensa summan mellan beräkningar.Add a second button to clear the total between calculations.

  1. Lägg till ytterligare en Knapp, ställ in egenskapen Text som ”Rensa” och ange egenskapen OnSelect som följande formel:Add another Button control, set its Text property to "Clear", and set its OnSelect property to this formula:

    UpdateContext({Total:0})UpdateContext({Total:0})

  2. Tryck på F5, lägg till flera siffror tillsammans och klicka eller tryck sedan på Rensa för att återställa summan.Press F5, add several numbers together, and then click or tap Clear to reset the total.

Ändra en knapps utseendeChange a button's appearance

Ändra en knapps formChange a button's shape

Som standard skapar PowerApps en rektangulär Knapp-kontroll med avrundade hörn.By default, PowerApps creates a rectangular Button control with rounded corners. Du kan göra enkla ändringar av formen på en Knapp-kontroll genom att ange dess egenskaper för Höjd, Bredd och Radie.You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

Obs! Ikoner och former ger flera olika utseenden och kan utföra några av de grundläggande funktioner som Knapp-kontroller gör.Note: Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. Ikoner och former har dock inte egenskapen Text.However, Icons and Shapes don’t have a Text property.

  1. Lägg till en Knapp-kontroll och ange dess egenskaper för Höjd och Bredd som 300 för att skapa en stor kvadratisk knapp.Add a Button control, and set its Height and Width properties to 300 to make a large square button.
  2. Ändra egenskaperna RadiusTopLeft, RadiusTopRight, RadiusBottomLeft och RadiusBottomRight för att justera rundningen på varje hörn.Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. Följande är några exempel på olika former, var och en utgår från en kvadratisk knapp med måtten 300 x 300:Here are some examples of different shapes, each one starting from a 300 x 300 square button:

Ändra knappens färg när man hovrar över denChange a button's color when you hover over it

Fyllningsfärgen för en Knapp-kontroll dämpas som standard med 20 % när man hovrar med musen över den.By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. Du kan anpassa det här beteendet genom att ändra egenskapen HoverFill, som använder funktionen ColorFade.You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. Om du ställer in formeln ColorFade på ett positivt procenttal blir färgen ljusare när du hovrar över en knapp, medan ett negativt procenttal gör färgen mörkare.If you set the ColorFade formula to a positive percentage, the color becomes lighter when you hover over the button, while a negative percentage makes the color darker.

  • Ändra procenttalet för ColorFade i egenskapen HoverFill för en av knapparna som du har skapat och se vad effekten blir.Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

Du kan också ange färgen på en Knapp-kontroll genom att ange dess egenskap HoverFill som en formel som innehåller funktionen ColorValue i stället för funktionen ColorFade, som i ColorValue("Red").You can also specify the color of a Button control by setting its HoverFill property to a formula that contains the ColorValue function instead of the ColorFade function, as in ColorValue("Red").

Obs! Färgvärdet kan vara valfri CSS-färgdefinition, antingen ett namn eller ett hexadecimalt värde.Note: The color value can be any CSS color definition, either a name or a hex value.

  • Ersätt funktionen ColorFade med funktionen ColorValue för en av knapparna som du har skapat och se vad effekten blir.Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.