Control Botón en PowerAppsButton control in PowerApps

Un control en el que el usuario puede hacer clic o pulsar para interactuar con la aplicación.A control that the user can click or tap to interact with the app.

DescripciónDescription

Configure la propiedad AlSeleccionar de un control Botón para ejecutar una o más fórmulas cuando el usuario haga clic en el control o lo pulse.Configure the OnSelect property of a Button control to run one or more formulas when the user clicks or taps the control.

Propiedades principalesKey properties

OnSelect: indica cómo responde la aplicación cuando el usuario toca o hace clic en un control.OnSelect – How the app responds when the user taps or clicks a control.

Text: texto que aparece en un control o que el usuario escribe en un control.Text – Text that appears on a control or that the user types into a control.

Propiedades adicionalesAdditional properties

Align: la ubicación del texto respecto al centro horizontal de su control.Align – The location of text in relation to the horizontal center of its control.

AutoDisableOnSelect (DesahabilitarAutomáticamenteAlSeleccionar): deshabilita automáticamente el control mientras se está ejecutando el comportamiento AlSeleccionar.AutoDisableOnSelect – Automatically disables the control while the OnSelect behavior is running.

BorderColor: el color de un borde del control.BorderColor – The color of a control's border.

BorderStyle: si el borde del control es Solid, Dashed, Dotted o None.BorderStyle – Whether a control's border is Solid, Dashed, Dotted, or None.

BorderThickness: el grosor de un borde del control.BorderThickness – The thickness of a control's border.

FocusedBorderThickness (GrosorDelBordeResaltado): grosor del borde del control cuando se resalta el teclado.FocusedBorderThickness – The thickness of a control's border when it has keyboard focus.

Color: el color del texto en un control.Color – The color of text in a control.

DisplayMode: indica si el control permite entradas de usuario (Edit), solo muestra datos (View) o si está deshabilitado (Disabled).DisplayMode – Whether the control allows user input (Edit), only displays data (View), or is disabled (Disabled).

DisabledBorderColor: el color de un borde del control si la propiedad DisplayMode del control está establecida en Disabled.DisabledBorderColor – The color of a control's border if the control's DisplayMode property is set to Disabled.

DisabledColor: el color del texto en un control si su propiedad DisplayMode está establecida en Disabled.DisabledColor – The color of text in a control if its DisplayMode property is set to Disabled.

DisabledFill: el color de fondo de un control si su propiedad DisplayMode está establecida en Disabled.DisabledFill – The background color of a control if its DisplayMode property is set to Disabled.

Fill: el color de fondo de un control.Fill – The background color of a control.

Font: el nombre de la familia de fuentes en la que aparece el texto.Font – The name of the family of fonts in which text appears.

FontWeight: el peso del texto en un control: Bold, Semibold, Normal o Lighter.FontWeight – The weight of the text in a control: Bold, Semibold, Normal, or Lighter.

Height: la distancia entre los bordes superior e inferior de un control.Height – The distance between a control's top and bottom edges.

HoverBorderColor: el color de un borde del control cuando el usuario mantiene el puntero del mouse sobre ese control.HoverBorderColor – The color of a control's border when the user keeps the mouse pointer on that control.

HoverColor: el color del texto de un control cuando el usuario mantiene el puntero del mouse sobre él.HoverColor – The color of the text in a control when the user keeps the mouse pointer on it.

HoverFill: el color de fondo de un control cuando el usuario mantiene el puntero del mouse sobre él.HoverFill – The background color of a control when the user keeps the mouse pointer on it.

Italic: indica si el texto de un control está en cursiva.Italic – Whether the text in a control is italic.

RellenoInferior: distancia entre el texto de un control y el borde inferior de ese control.PaddingBottom – The distance between text in a control and the bottom edge of that control.

RellenoIzquierdo: distancia entre el texto de un control y el borde izquierdo de ese control.PaddingLeft – The distance between text in a control and the left edge of that control.

RellenoDerecho: distancia entre el texto de un control y el borde derecho de ese control.PaddingRight – The distance between text in a control and the right edge of that control.

RellenoSuperior: distancia entre el texto de un control y el borde superior de ese control.PaddingTop – The distance between text in a control and the top edge of that control.

Pressed: true mientras se presiona un control, en caso contrario false.PressedTrue while a control is being pressed, false otherwise.

PressedBorderColor: el color de un borde del control cuando el usuario toca o hace clic en ese control.PressedBorderColor – The color of a control's border when the user taps or clicks that control.

PressedColor: el color de texto de un control cuando el usuario toca o hace clic en ese control.PressedColor – The color of text in a control when the user taps or clicks that control.

PressedFill: el color de fondo de un control cuando el usuario toca o hace clic en ese control.PressedFill – The background color of a control when the user taps or clicks that control.

RadiusBottomLeft: el grado al que se redondea la esquina inferior izquierda de un control.RadiusBottomLeft – The degree to which the bottom-left corner of a control is rounded.

RadiusBottomRight: el grado al que se redondea la esquina inferior derecha de un control.RadiusBottomRight – The degree to which the bottom-right corner of a control is rounded.

RadiusTopLeft: el grado al que se redondea la esquina superior izquierda de un control.RadiusTopLeft – The degree to which the top-left corner of a control is rounded.

RadiusTopRight: el grado al que se redondea la esquina superior derecha de un control.RadiusTopRight – The degree to which the top-right corner of a control is rounded.

Size: el tamaño de la fuente del texto que aparece en un control.Size – The font size of the text that appears on a control.

Strikethrough: indica si aparece una línea sobre el texto de un control.Strikethrough – Whether a line appears through the text that appears on a control.

TabIndex: personaliza el orden de tabulación de los controles en tiempo de ejecución cuando se establece en un valor distinto de cero.TabIndex – Customizes the tab order of controls at runtime when set to a non-zero value.

Información sobre herramientas: texto explicativo que aparece cuando el usuario mantiene el puntero sobre un control.Tooltip – Explanatory text that appears when the user hovers over a control.

Underline: indica si aparece una línea debajo del texto de un control.Underline – Whether a line appears under the text that appears on a control.

VerticalAlign: la ubicación del texto en un control respecto al centro vertical de ese control.VerticalAlign – The location of text on a control in relation to the vertical center of that control.

Visible: indica si un control aparece o está oculto.Visible – Whether a control appears or is hidden.

Width: la distancia entre los bordes derecho e izquierdo de un control.Width – The distance between a control's left and right edges.

X: la distancia entre el borde izquierdo de un control y el borde izquierdo de su contenedor primario (la pantalla si no hay un contenedor primario).X – The distance between the left edge of a control and the left edge of its parent container (screen if no parent container).

Y: la distancia entre el borde superior de un control y el borde superior de su contenedor primario (la pantalla si no hay un contenedor primario).Y – The distance between the top edge of a control and the top edge of the parent container (screen if no parent container).

Navegar( NombrePantalla, ScreenTransitionValue )Navigate( ScreenName, ScreenTransitionValue )

EjemplosExamples

Agregar una fórmula básica a un botónAdd a basic formula to a button

  1. Agregue un control Entrada de texto y denomínelo Origen.Add a Text input control, and name it Source.

    ¿No sabe cómo agregar, nombrar y configurar un control?Don't know how to add, name, and configure a control?

  2. Agregue un control Botón, establezca su propiedad Texto en "Agregar" y su propiedad AlSeleccionar en esta fórmula: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)})

    ¿Desea más información sobre la función UpdateContext u otras funciones?Want more information about the UpdateContext function or other functions?

  3. Agregue un control Etiqueta, establezca su propiedad Texto en Total y presione F5.Add a Label control, set its Text property to Total, and then press F5.
  4. Borre el texto predeterminado de Origen, escriba un número en él y, a continuación, haga clic o pulse Agregar.Clear the default text from Source, type a number in it, and then click or tap Add.

    El control Etiqueta muestra el número que ha escrito.The Label control shows the number that you typed.

  5. Borre el número de Origen, escriba otro número y, a continuación, haga clic o pulse Agregar.Clear the number from Source, type another number in it, and then click or tap Add.

    El control Etiqueta muestra la suma de los números que ha escrito.The Label control shows the sum of the two numbers that you typed.

  6. (opcional) Repita el paso anterior una o varias veces.(optional) Repeat the previous step one or more times.
  7. Para volver al área de trabajo predeterminada, presione Esc (o haga clic o pulse el icono de cerrar en la esquina superior derecha).To return to the default workspace, press Esc (or click or tap the close icon in the upper-right corner).

Configuración de un botón con varias fórmulasConfigure a button with multiple formulas

Agregue una fórmula que borra el control Entrada de texto entre las entradas.Add a formula that clears the Text input control between entries.

  1. Establezca la propiedad TextoDeSugerencia de Origen en "Enter a number" (Escriba un número).Set the HintText property of Source to "Enter a number".
  2. Establezca la propiedad AlSeleccionar de Agregar en esta fórmula: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: ""})

    Nota: Utilice el punto y coma ";" para separar varias fórmulas.Note: Separate multiple formulas with a semi-colon “;”.

  3. Establezca la propiedad Predeterminad de Origen en ClearInput (Borrar entrada).Set the Default property of Source to ClearInput.
  4. Presione F5y, a continuación, pruebe la aplicación agregando varios números juntos.Press F5, and then test the app by adding several numbers together.

Integración de otro botón para restablecer el totalAdd another button to reset the total

Agregue un segundo botón para borrar el total entre un cálculo y otro.Add a second button to clear the total between calculations.

  1. Agregue otro control Botón, establezca su propiedad Texto en "Borrar" y su propiedad AlSeleccionar en esta fórmula: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. Presione F5, sume varios números y luego haga clic o pulse Borrar para restablecer el total.Press F5, add several numbers together, and then click or tap Clear to reset the total.

Cambio de la apariencia de un botónChange a button's appearance

Cambio de la forma de un botónChange a button's shape

De forma predeterminada, PowerApps crea un control Botón rectangular con esquinas redondeadas.By default, PowerApps creates a rectangular Button control with rounded corners. Puede realizar modificaciones básicas en la forma de un control Botón estableciendo sus propiedades Altura, Ancho, y Radius (Radio).You can make basic modifications to the shape of a Button control by setting its Height, Width, and Radius properties.

Nota: Icons and Shapes (Iconos y formas) proporciona una gran variedad de diseños y puede realizar algunas de las mismas funciones básicas que hacen los controles Botón.Note: Icons and Shapes provide a wide variety of designs and can perform some of the same basic functions that Button controls do. Pero, Icons and shapes (Iconos y formas) no tiene una propiedad Texto.However, Icons and Shapes don’t have a Text property.

  1. Agregue un control Botón, y establezca sus propiedades Altura y Ancho en 300 para hacer un botón cuadrado grande.Add a Button control, and set its Height and Width properties to 300 to make a large square button.
  2. Modifique las propiedades RadiusTopLeft (RadioSuperiorIzquierdo), RadiusTopRight (RadioSuperiorDerecho), RadiusBottomLeft (RadioInferiorIzquierdo), y RadiusBottomRight (RadioInferiorDerecho) para ajustar la cantidad de curvatura en cada esquina.Modify the RadiusTopLeft, RadiusTopRight, RadiusBottomLeft, and RadiusBottomRight properties to adjust the amount of curvature on each corner. Estos son algunos ejemplos de formas diferentes, cada una comenzando a partir de un botón cuadrado de 300 x 300:Here are some examples of different shapes, each one starting from a 300 x 300 square button:

Cambio del color de un botón cuando se mantiene el puntero sobre élChange a button's color when you hover over it

De forma predeterminada, el color de relleno de un control Botón se atenuará en un 20 % al mantener el mouse sobre él.By default, the fill color of a Button control will dim by 20% when you hover over it with a mouse. Puede ajustar este comportamiento cambiando la propiedad RellenoAlMantener, que usa la función ColorFade.You can adjust this behavior by changing the HoverFill property, which uses the ColorFade function. Si establece la fórmula ColorFade en un porcentaje positivo, el color se vuelve más claro al mantener el mouse sobre el botón, mientras que un porcentaje negativo hace que el color sea más oscuro.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.

  • Cambie el porcentaje de ColorFade en la propiedad RellenoAlMantener de uno de los botones que creó y observe los efectos.Change the ColorFade percentage in the HoverFill property of one of the buttons that you created, and observe the effects.

También puede especificar el color de un control Botón estableciendo su propiedad RellenoAlMantener en una fórmula que contenga la función ColorValue función en lugar de la función ColorFade, como en 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").

Nota: El valor de color puede ser cualquier definición de color CSS, ya sea un nombre o un valor hexadecimal.Note: The color value can be any CSS color definition, either a name or a hex value.

  • Reemplace la función ColorFade con una función ColorValue en uno de los botones que creó y observe los efectos.Replace the ColorFade function with a ColorValue function in one of the buttons that you created, and observe the effects.