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, en la pestaña Propiedades 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.

  • En la pestaña Insertar, pulse o haga clic en cualquiera de estas categorías y luego pulse o haga clic en el control que desea agregar:

    Texto: Etiqueta, Entrada de texto, Texto HTML, Entrada manuscrita
    Controles: Botón, Lista desplegable, Selector de fecha, Cuadro de lista, Casilla, Radio, Alternar, Control deslizante, Clasificación, Temporizador
    Galería: Vertical, Horizontal, Flexible height (Alto flexible), Blank vertical (Blanco vertical), Blank horizontal (Blanco horizontal), Blank flexible height (Blanco alto flexible)
    Tabla de datos
    Formularios: Editar, Mostrar, Entity form (Formulario de la entidad)
    Elementos multimedia: Imagen, Cámara, Código de barras, Vídeo, Audio, Micrófono, Agregar imagen
    Gráficos: Gráfico de columnas, Gráfico de líneas, Gráfico circular
    Iconos

Sugerencia: si necesita más espacio para controles, agregue otra pantalla.

Configuración directa de un control

En este procedimiento, agregará y configurará un control Etiqueta, pero puede aplicar muchos de los mismos principios a otros controles.

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

    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 Etiqueta seleccionado se parece a este gráfico.

    Una etiqueta seleccionada

    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 Etiqueta arrastrando un controlador del borde derecho del cuadro de selección hacia la izquierda. El controlador central solo aparece al acercar la imagen.

    Una etiqueta cuyo tamaño ha cambiado

    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 Etiqueta 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 Etiqueta y escriba Hola, mundo.

    Una etiqueta 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.

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 Etiqueta 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 Etiqueta reflejará la selección.

    Etiqueta 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 Etiqueta reflejará la selección.

    Georgia, 18 puntos

  4. Pulse o haga clic en la pestaña Etiqueta, en Alineación vertical y, después, en Superior.

    Pestaña Cuadro de texto

    El control Etiqueta reflejará la selección.

    Etiqueta con texto alineado en la parte superior del cuadro

Configuración de un control mediante la pestaña Propiedades

Mediante la pestaña Propiedades, puede configurar un control sin necesidad de escribir una fórmula. En este procedimiento, agregará y configurará un control Etiqueta, pero puede aplicar muchos de los mismos principios a otros controles.

  1. Agregue otro control Etiqueta como ya se describió anteriormente en este tema.

  2. Con el nuevo control seleccionado, pulse o haga clic en la pestaña Propiedades del panel derecho.

    Panel Propiedades

  3. En el cuadro Texto, escriba pestaña Propiedades.

    Panel Propiedades Etiqueta Texto

    El control Etiqueta muestra el texto escrito.

    Panel Propiedades lienzo Texto

  4. Haga clic o pulse en el icono de relleno del panel Propiedades y, a continuación, haga clic o pulse en un color.

    Panel Propiedades color Texto

    El control Etiqueta reflejará la selección.

    Panel Propiedades lienzo color

  5. Haga clic o pulse en la propiedad Color del panel de propiedades.

    Panel Propiedades propiedad

    El valor de la propiedad Color está resaltado en la barra de fórmulas.

    Panel Propiedades propiedad expresión

    1. Para eliminar el segundo control Etiqueta, pulse o haga clic en él y presione Suprimir.

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 en la pestaña Propiedades 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 en la pestaña Propiedades 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 Etiqueta restante seleccionado, pulse o haga clic en Texto en la lista de propiedades y escriba "Nombre de mi empresa" (comillas incluidas) en la barra de fórmulas.

    Cadena literal en una etiqueta

    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 Etiqueta seleccionado, pulse o haga clic en Texto en la lista de propiedades y 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, agregará una casilla y, a continuación, configurará la etiqueta que ya tiene para que aparezca solo cuando se activa 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 Etiqueta 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, haga clic o pulse en su nombre justo encima de la pestaña Propiedades y, a continuación, escriba MyCheckbox

    Cambio de nombre de casilla

  5. Haga clic o pulse en el control Etiqueta para seleccionarlo.

  6. En la pestaña Propiedades, haga clic o pulse en la propiedad Visible.

    Propiedad Visible

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

    If(MyCheckbox.Value = true, true, false)

    Esta función If indica que la etiqueta debe aparecer solo cuando se activa la casilla. Al estar desactivada la casilla, el control Etiqueta 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 control Etiqueta vuelve a aparecer:

    Etiqueta mostrada cuando la casilla está activada

  9. Desactive el control Casilla para ocultar el control Etiqueta.

    La etiqueta desaparece cuando la casilla está 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 el panel derecho, haga clic o pulse en el nombre del control (justo encima de la pestaña Propiedades) y, a continuación, escriba el nombre que desee.

    Cambio de nombre de casilla

Buscar y seleccionar una pantalla o un control

Puede buscar y seleccionar una pantalla o un control, incluso si está oculto o se solapa con otro; solo tiene que buscarlo en el panel izquierdo. Este panel muestra una miniatura de cada pantalla de la aplicación o una vista jerárquica de cada pantalla y de los controles que contiene.

  • Para cambiar entre las miniaturas y la vista jerárquica, pulse o haga clic en un icono de la esquina superior derecha del panel.

    Alternancia de las vistas

  • Para buscar un control, escriba uno o varios caracteres para resaltar los nombres de los controles que contienen el texto que escribe.

    Si pulsa o hace clic en un resultado de búsqueda, selecciona ese control en la aplicación.

    Buscar en la vista de árbol

  • Para mover una pantalla arriba o abajo, duplicarla, eliminarla o cambiar su nombre, haga clic en ella con el botón derecho (o pulse y haga clic en el botón de puntos suspensivos situado al lado) y luego pulse o haga clic en la opción que desea.

    Menú contextual de vista de árbol

  • Para copiar y pegar un control, eliminarlo o cambiar su nombre, haga clic en él con el botón secundario (o pulse y haga clic en el botón de puntos suspensivos situado al lado) y, a continuación, pulse o haga clic en la opción que desea.