Personalizar su aplicación con Power Apps Studio

  • 5 minutos

En la lección anterior, ha creado una nueva aplicación con los datos que ha cargado en Dataverse for Teams. Power Apps para Teams puede crear rápidamente una aplicación útil, pero es probable que necesite personalizar dicha aplicación para que se adapte a sus necesidades.

En esta lección, vamos a actualizar campos en el formulario y a cambiar el orden; además, actualizaremos los campos en la galería y cambiaremos el título de la aplicación.

Para empezar, abra Teams con el cliente de escritorio, o bien navegando a Teams, y luego abra también la aplicación Power Apps. Desde la pestaña Inicio, busque la aplicación en Aplicaciones recientes; si no la encuentra, seleccione Ver más (a continuación) para buscar o seleccionar la aplicación.

Captura de pantalla donde se muestra cómo buscar una aplicación en Teams

La aplicación se abre en Teams, donde podremos editarla.

Las aplicaciones de Power Apps se desarrollan utilizando diversos elementos de la IU, denominados Controles. Utilice controles para crear una mejor experiencia cuando sus usuarios naveguen e interactúen con la aplicación.

Estos son algunos de los controles más comunes.

  • Etiqueta: muestra información al usuario en forma de texto, números, fechas o divisas.

  • Formulario de edición: permite al usuario crear y editar registros, y luego guardarlos.

  • Cuadro de texto: cuadro en el que el usuario puede introducir datos como texto o números.

  • Galería vertical: muestra varios registros de un origen de datos en orientación vertical. Este control puede mostrar numerosos tipos de datos por cada registro.

  • Agregar icono: seleccione de entre una biblioteca de símbolos gráficos. Este control se puede configurar para responder cuando un usuario lo selecciona.

  • Rectángulo: forma de borde que se puede colocar en cualquier lugar de la aplicación.

  • Selector de fecha: permite al usuario seleccionar una fecha usando una ventana emergente.

  • Botón: permite al usuario interactuar con la aplicación.

Cuando esté editando la aplicación, seleccione una de las siguientes opciones en el raíl lateral izquierdo.

  • Vista de árbol: muestra una jerarquía visual de todos los controles de la aplicación.

  • Insertar: inserte nuevos controles, como etiquetas, botones, iconos y formularios.

  • Datos: agregue más tablas desde Dataverse for Teams o agregue un conector a otros servicios de datos.

  • Medios: agregue imágenes, vídeos y audio.

  • Variables: le permite ver los datos almacenados en variables y colecciones utilizadas en su aplicación.

  • Power Automate: le permite conectarse a un flujo en Power Apps para Teams (o crear uno) directamente, sin salir de la aplicación.

  • Buscar: para que el desarrollador busque medios, texto, orígenes de datos, fórmulas, etc. Incluye una funcionalidad de buscar y reemplazar.

En la parte central de la pantalla, o lienzo de la aplicación, puede agregar, mover y editar los componentes que integran la aplicación. Cuando se selecciona un control, ya sea en la vista de árbol o en la vista de la aplicación, el panel Propiedades muestra las propiedades. En la parte superior de la pantalla se encuentra la barra de fórmulas, que ofrece más capacidades de edición.

Captura de pantalla de Power Apps Studio para introducir cambios

Usaremos la aplicación que hemos creado en la unidad anterior para seguir personalizando la aplicación.

Actualizar el formulario

  1. Seleccione el formulario EditForm1.

    Captura de pantalla con la Screen1 de la aplicación, con EditForm1 seleccionado

  2. En el panel Propiedades de la derecha, seleccione Editar campos.

    Captura de pantalla del panel de propiedades, con Editar formulario y Editar campos resaltados

  3. Ahora, debería ver un panel Campos a la izquierda del panel de propiedades. El panel Campos muestra todos los campos que hay actualmente en el formulario. Para agregar más, seleccione + Agregar campo y marque las casillas junto a las columnas que desea incluir en el formulario. En la lista Agregar campo, solo aparecen los campos que aún no están en su formulario. Esto resulta útil si elimina un campo y, luego, decide usarlo en el formulario. En el ejemplo, vamos a agregar los campos que habíamos agregado a nuestra tabla de datos, como Fecha de instalación, Ubicación, Notas, Reparación necesaria y Número de asientos; sin embargo, puede agregar o eliminar cualquier campo. En la lista, los campos están ordenados alfabéticamente.

    Captura de pantalla del cuadro de diálogo de campos, con Agregar campo resaltado y varias casillas marcadas junto a las columnas que queremos agregar a la vista

  4. Seleccione Agregar para agregarlos al formulario; ahora, están incluidos en el cuadro de diálogo Campos y aparecen en el lienzo de la aplicación.

    Captura de pantalla de los campos agregados en el cuadro de diálogo Campos y de los campos que se encuentran ahora en el formulario; en el formulario, Fecha de instalación está resaltado, con un valor de hora de 00:00

  5. Aunque no es obligatorio, puede ajustar el orden de los campos; solo tiene que arrastrarlos y soltarlos en la posición deseada dentro del cuadro de diálogo Campos. En el ejemplo, vamos a reorganizar los campos para que estén en este orden:

    Captura de pantalla del cuadro de diálogo de campos con los cinco campos de nuestra tabla resaltados y en el orden deseado

  6. Cierre el panel de campos.

  1. Nuestra galería muestra tres elementos de la tabla de datos; no aparece ninguna imagen porque no tenemos imágenes. Además, también se ve cuándo se creó el elemento, algo que no resulta útil. Actualizaremos la galería para que muestre información que sea más relevante para nosotros. Para ello, seleccione el control de galería y el menú desplegable bajo Diseño, en el panel Propiedades que encontrará a la derecha de la pantalla, donde actualmente tiene Imagen, título y subtítulo como valor.

    Captura de pantalla con la galería seleccionada y el panel de propiedades, con el botón Editar, en Campos, resaltado

  2. Seleccione Título, subtítulo y cuerpo.

    Captura de pantalla de las opciones de diseño de la galería, con la opción Título, subtítulo y cuerpo seleccionada

  3. Eso nos acerca un poco más a lo que queremos, pero vamos a reajustar los campos empleados en la galería. En el panel de propiedades de la galería, busque la propiedad Campos y seleccione Editar (o donde diga # seleccionado).

    Captura de pantalla de las propiedades de la galería, con el botón Editar, en Campos, resaltado

  4. En el cuadro de diálogo Datos, cambie el valor del subtítulo a Ubicación; la galería en el lienzo cambiará inmediatamente. También puede cambiar el campo Cuerpo para que muestre "Número de asientos". Ahora, la galería debería tener un aspecto similar al de la siguiente imagen.

    Captura de pantalla del cuadro de diálogo de datos con el campo Subtítulo cambiado a ubicación; la galería muestra ahora la ubicación como subtítulo

  5. Cierre el cuadro de diálogo Datos.

Cambiar el título de la aplicación

  1. Para actualizar el título de la aplicación, seleccione la etiqueta en la pantalla que actualmente muestra el nombre de la tabla, en la esquina superior izquierda del lienzo.

    Captura de pantalla de la etiqueta del título de la aplicación seleccionada

  2. Cambie la propiedad Texto de la etiqueta por un título de aplicación que sea más significativo. Puede hacerlo en la barra de fórmulas, justo por encima del control seleccionado, o en el panel de propiedades, en el lado derecho de la pantalla.

    Captura de pantalla de las opciones de texto actualizado

  3. Escriba el nuevo nombre para el título. En el ejemplo, lo cambiaremos a "Ubicaciones y capacidad de las mesas de pícnic".

    Nota

    El título cambiará inmediatamente cuando introduzca el cambio en la barra de fórmulas. Si usa el panel de propiedades, los cambios entrarán en vigor al seleccionar Introducir en el teclado. Como puede ver, deberá usar comillas antes y después del texto si usa la barra de fórmulas, pero no las necesitará si utiliza el campo del panel de propiedades.

En la siguiente unidad, publicaremos la aplicación para que esté disponible para el equipo.