Añada diversos elementos de interfaz de usuario a su aplicación y configure aspectos de su apariencia y comportamiento directamente, desde la barra de herramientas o en la barra de fórmulas. Estos elementos de interfaz de usuario se denominan controles y los aspectos que configura se denominan propiedades.

Requisitos previos

  1. Suscríbase a PowerApps, instálelo, ábralo e inicie sesión con las mismas credenciales que usó para suscribirse.

  2. En PowerApps Studio, pulse o haga clic en Nuevo en el menú Archivo (cerca del borde izquierdo).

    Opción Nuevo en el menú Archivo

  3. En el icono Aplicación vacía, pulse o haga clic en Diseño de teléfono.

    Crear una aplicación desde cero

  4. Si se le pide que realice un paseo introductorio, haga clic o pulse en Siguiente para familiarizarse con las áreas principales de la interfaz de PowerApps (o haga clic o pulse en Omitir).

    Pantalla inicial del paseo introductorio

    Siempre puede realizar el paseo más tarde haciendo clic o pulsando en el icono del signo de interrogación situado cerca de la esquina superior derecha de la pantalla y, a continuación, haciendo clic o pulsando en Take the intro tour (Realizar paseo introductorio).

Adición de un control

Puede agregar cualquier control en diversas categorías, para lo que debe hacer clic o pulsar en la pestaña Insertar de la barra de herramientas, a continuación, en una categoría y, finalmente, en el control que desea. En esta sección, revise los controles de cada categoría para familiarizarse con los tipos de controles que se pueden añadir y dónde puede encontrarse cada tipo.

Si necesita más espacio para los controles, añada una pantalla.

Configuración directa de un control

En este procedimiento, añadirá y configurará un control Cuadro de texto, pero podrá aplicar muchos de los mismos principios a otros controles.

  1. En la barra de herramientas, pulse o haga clic en la pestaña Insertar y, a continuación, en Cuadro de texto.

    Pestaña Insertar

    Al añadir un control, se selecciona de forma predeterminada. También puede seleccionar un control existente haciendo clic en él o pulsándolo. Cuando se selecciona un control, aparece un cuadro de selección alrededor de él y otras áreas de la interfaz de usuario cambian para que pueda configurar el control seleccionado. Por ejemplo, un control Cuadro de texto seleccionado presentará un aspecto similar al siguiente.

    Cuadro de texto seleccionado

    Importante: si ya hay un control seleccionado, al seleccionar otro control o un área en blanco de la pantalla, el primer elemento dejará de estar seleccionado.

  2. Reduzca la anchura del control Cuadro de texto arrastrando un controlador del borde derecho del cuadro de selección hacia la izquierda. El controlador central solo aparece al acercar la imagen.

    Cuadro de texto cuyo tamaño se ha modificado

    También es posible cambiar el tamaño de un control si modifica sus propiedades Altura, Ancho o ambas, como se describe más adelante en este tema.

  3. Mueva el control Cuadro de texto arrastrando el propio cuadro de selección (o modificando las propiedades X, Y o ambas, como se describe más adelante en este tema).

  4. Haga clic tres veces en el texto que aparece en el control Cuadro de texto y, a continuación, escriba Hola, mundo.

    Cuadro de texto con texto personalizado

    También puede definir la propiedad Texto de este control para modificar este texto, como se describe más adelante en este tema.

  5. Para eliminar el control Cuadro de texto, haga clic en él o púlselo y, a continuación, presione Suprimir.

  6. Para restaurar el control Cuadro de texto, presione Ctrl-Z (o repita los cuatro primeros pasos de este procedimiento).

Configuración de un control desde la barra de herramientas

Al configurar un control desde la barra de herramientas, puede especificar una mayor variedad de opciones que si lo hace directamente.

  1. Con el control Cuadro de texto seleccionado, pulse o haga clic en la pestaña Inicio de la barra de herramientas.

    Pestaña Inicio

  2. Pulse o haga clic en Rellenar y, a continuación, pulse o haga clic en un color como aguamarina.

    Opción de relleno

    El control Cuadro de texto reflejará la selección.

    Cuadro de texto con relleno de color aguamarina

  3. Cambie la familia de fuentes y el tamaño del texto (por ejemplo, a 18 ptos. Georgia).

    Controles de fuente

    El control Cuadro de texto reflejará la selección.

    Georgia, 18 puntos

  4. Pulse o haga clic en la pestaña Cuadro de texto, posteriormente en Alineación vertical y, a continuación, en Superior.

    Pestaña Cuadro de texto

    El control Cuadro de texto reflejará la selección.

    Cuadro de texto con texto alineado en la parte superior del cuadro

Configuración de un control en la barra de fórmulas

Mediante el uso de la barra de fórmulas, puede establecer propiedades que no se pueden definir directamente ni con la barra de herramientas. Por ejemplo, puede definir que aparezca información sobre herramientas cuando un usuario señale el control, pero no haga clic en él ni lo pulse. También puede especificar fórmulas complejas que aumentan la capacidad de la aplicación.

Cada cambio que ha realizado anteriormente en este tema actualiza el valor de una propiedad para el control que ha configurado.

  • Al cambiar el tamaño del control, ha cambiado su propiedad Width.
  • Al mover el control, ha cambiado sus propiedades X e Y.
  • Al cambiar el texto que muestra el control, ha cambiado su propiedad Texto.

En lugar de configurar un control directamente o desde la barra de herramientas, también puede actualizar el valor de una propiedad seleccionándola en la lista de propiedades y, a continuación, especificando un valor en la barra de fórmulas. Con este enfoque, puede buscar una propiedad por orden alfabético y especificar otros tipos de valores.

  1. Con el control Cuadro de texto seleccionado, pulse o haga clic en Texto en la lista de propiedades y, a continuación, escriba "Nombre de mi empresa" (comillas inglesas incluidas) en la barra de fórmulas.

    Cadena literal en un cuadro de texto

    Al incluir una cadena de texto entre comillas, especifica que debe tratarse exactamente tal como la escribió. Como alternativa, puede definir una fórmula para el valor de una propiedad.

  2. Con el control Cuadro de texto seleccionado, pulse o haga clic en Texto en la lista de propiedades y, a continuación, escriba Today() (sin comillas) en la barra de fórmulas.

    El control mostrará la fecha actual.

    Función Today

    Sugerencia: puede cambiar el formato de fechas y horas de varias maneras, además de realizar cálculos en ellas.

Configuración de dos controles para interactuar entre sí

En este procedimiento, añadirá una casilla y, a continuación, configurará el cuadro de texto que ya tiene para que aparezca solo cuando se selecciona la casilla.

  1. Pulse o haga clic en la pestaña Insertar.

    Pestaña Insertar

  2. Pulse o haga clic en Controles y, a continuación, pulse o haga clic en Casilla.

    Inserción de casilla

  3. Mueva el control Casilla de forma que aparezca debajo del control Cuadro de texto y establezca la propiedad Texto del control Casilla para que aparezca Mostrar texto.

    Configuración de casilla

  4. Con el control Casilla aún seleccionado, pulse o haga clic en la pestaña Inicio de la barra de herramientas.

    Cambio de nombre de casilla

  5. Pulse o haga clic en el nombre actual del control Casilla (a la derecha de Nueva pantalla) y, a continuación, escriba MiCasilla.

    Cambio de nombre de casilla

  6. Pulse o haga clic en el control Cuadro de texto para seleccionarlo, a continuación, en la pestaña Cuadro de texto y, finalmente, en la opción Visible.

    Propiedad Visible

  7. En la barra de fórmulas, elimine true y, a continuación, escriba o pegue esta fórmula:

    If(MiCasilla!Value = true, true, false)

    Esta función If indica que el cuadro de texto debe aparecer solo cuando se selecciona la casilla. Al no estar seleccionada la casilla, el control Cuadro de texto desaparece (excepto el cuadro de selección).

    Fórmula Visible

  8. Pulse o haga clic en el control Casilla para agregar el cuadro de selección y, a continuación, haga clic en él o púlselo de nuevo para agregar una marca de verificación.

    El Cuadro de texto volverá a aparecer:

    Cuadro de texto mostrado con la casilla activada

  9. Desactive el control Casilla para ocultar el control Cuadro de texto.

    Cuadro de texto oculto con la casilla desactivada

Este ejemplo es básico, pero puede configurar el comportamiento y la apariencia de la aplicación mediante la creación de una o varias fórmulas que vayan aumentando su nivel de complejidad.

Cambio de nombre de una pantalla o un control

Al cambiar el nombre de una pantalla o un control, puede crear fórmulas que son más fáciles de leer y recordar.

  1. Pulse o haga clic en la pantalla o el control cuyo nombre desea cambiar.

  2. En la pestaña Inicio, pulse o haga clic en el nombre del control (a la derecha de Nueva pantalla) y, a continuación, escriba el nombre que desee.

    Cambio de nombre de una casilla