Ejercicio: Crear su primera aplicación en Power Apps

En el siguiente ejercicio, creará su primera aplicación con una tabla de Excel como origen de datos. Puede usar cualquier tabla de Excel, siempre que los datos tengan el formato de tabla y se almacenen en una ubicación a la que Microsoft Power Apps pueda acceder, como OneDrive.

Este ejercicio se compone de dos partes:

• Generar una aplicación de tres pantallas a partir de una tabla de Excel.

• Crear una aplicación de lienzo en blanco que mejoraremos en futuras unidades.

Ambas aplicaciones usan los mismos datos. La aplicación de tres pantallas sirve como referencia para comprender cómo funcionan conjuntamente los controles para mostrar datos.

Obtener los datos

Para completar este ejercicio, necesitará descargar los archivos de App in a Day. Seleccione el vínculo para descargar los archivos. A continuación, extraiga los archivos del archivo ZIP descargado. Cuando haya extraído los archivos, busque y abra el archivo de Excel con el nombre Machine-Order-Data.xslx.

1. Abra OneDrive en un explorador. Seleccione + Agregar nuevo>Cargar archivos.

   

2. En el cuadro de diálogo Abrir, vaya a la carpeta Descargas y seleccione Machine-Order-Data.xlsx.

3. Seleccione Abrir. Luego, busque "Machine-Order-Data" en OneDrive para confirmar que la carga se ha realizado correctamente.

Crear una aplicación de tres pantallas

Ahora, creará una aplicación móvil de tres pantallas.

1. Vaya a Power Apps Maker Portal make.powerapps.com e inicie sesión.

2. Seleccione Aplicaciones en el panel de navegación de la izquierda.

3. Seleccione Empezar desde una plantilla de aplicación.

   

4. En Aplicaciones móviles centradas en datos, seleccione Desde Excel.

5. En Seleccione la tabla, expanda OneDrive para la Empresa, busque el archivo Machine-Order_Data.xlsx, seleccione la tabla Máquinas y elija Crear aplicación.

   

   Power Apps genera una aplicación móvil funcional. Si su aplicación es similar a lo que se ve en la siguiente imagen, continúe con el siguiente paso. Si no es así, vaya al paso 17.

   

6. Expanda BrowseGallery1 y seleccione Title1. Con Title1 seleccionado, mueva el cursor hacia arriba, hasta el menú desplegable Propiedad (encima del encabezado de la vista de árbol), y seleccione la propiedad llamada Text.

7. En la barra de fórmulas, elimine el valor y el tipo ThisItem. existentes (no se olvide de incluir el punto). La característica de autocompletado muestra una lista con todos los campos disponibles para el elemento actual en la galería.

   

8. Como quiere que el nombre de la máquina aparezca en el título, seleccione "Machine Name" en la lista desplegable. Como puede ver, ahora la barra de fórmulas muestra ThisItem.'Machine Name'. Esto es una fórmula de Power Fx que le dice a Power Apps que muestre el campo "Machine Name" para cada elemento de la galería.

   Observe que cada elemento de la galería ahora muestra su propio nombre de máquina. Esta es la ventaja de usar ThisItem en una galería: hace referencia al registro actual de forma dinámica, por lo que cada control dentro de la galería muestra datos específicos de ese elemento.

9. Vuelva al panel de la vista de árbol, en BrowseGallery1, y seleccione Subtitle1. Con Subtitle1 seleccionado, seleccione la propiedad Text. En esta ocasión, escriba ThisItem.Price en la barra de fórmulas.

   

   Como puede ver, ahora todos los elementos de la galería muestran el precio del artículo.

10. A continuación, añadirá un color de máquina a cada elemento de la galería. Seleccione Body1 en BrowseGallery1, en la vista de árbol. Con Body1 seleccionado, seleccione "Text" en el menú desplegable de propiedades y escriba ThisItem.Color.

    

11. También puede añadir la imagen de una cafetera en la galería. Primero, tendrá que mover los campos de título, subtítulo y cuerpo ligeramente a la derecha a fin de dejar espacio para la imagen. Mantenga presionada la tecla Mayús en el teclado y seleccione los campos Title1, Subtitle1 y Body1, desde el panel de vista de árbol o en el lienzo de la galería. La pantalla debería tener ahora el aspecto de la imagen siguiente.

    

12. Con los tres campos aún seleccionados, seleccione X en el menú desplegable de propiedades. El valor X es la ubicación horizontal de los campos en la pantalla. Ponga el valor en la barra de fórmulas a 80. (También puede arrastrar los campos hacia la derecha en el lienzo).

13. Seleccione el espacio en blanco que ha creado a la izquierda de los campos Body1, Subtitle1 y Title1. Esto anulará la selección de los campos, la pantalla debería tener el aspecto de la siguiente imagen.

    

14. En la barra de comandos, seleccione + Insertar, escriba imagen en la barra de búsqueda y seleccione el control Imagen.

    

15. Cambie el tamaño y mueva la imagen en el elemento superior del lienzo hasta que se encuentre claramente a la izquierda de los campos de título, subtítulo y cuerpo.

16. En el panel de vista de árbol o en el lienzo, seleccione la imagen, seleccione Imagen en el menú desplegable de propiedades y escriba ThisItem.Photo. Las imágenes de la cafetera aparecerán ahora dentro de la galería.

    

    Use lo que acaba de aprender para actualizar las otras pantallas de su aplicación, DetailScreen1 y EditScreen1, a fin de mostrar los campos que le gustaría que apareciesen.

17. Para tener una idea del aspecto que tendrá la aplicación en un dispositivo móvil, use el botón de versión preliminar (que parece un botón de reproducción) en la esquina superior derecha, junto al icono para guardar. Seleccione el botón "Reproducir" (o pulse F5) y pruebe la interfaz.

    

    Como puede ver, puede desplazarse por la lista de elementos, seleccionarlos, ver los detalles relacionados, editar estos detalles y guardar o cancelar los cambios. Cuando crea una aplicación con el botón de Excel, puede tener una aplicación completamente funcional rápidamente.

    Ahora, salimos del modo de vista previa, presionando la X en la esquina superior derecha, y guardamos la aplicación.

18. Seleccione el botón Guardar e introduzca un nombre para la aplicación en el panel Guardar como. A continuación, seleccione Guardar.

19. Seleccione el botón Atrás, en la parte superior izquierda de la barra de comandos, para salir de la aplicación.

Ahora que ya ha visto cómo crear una aplicación con Power Apps, puede empezar a crear la suya a partir de cero.

Crear una aplicación de lienzo

1. Desde Power Apps Maker Portal (make.powerapps.com), seleccione la pestaña Crear.

2. En la ventana emergente Crear, seleccione Empezar con una aplicación de lienzo en blanco.

   

3. En la ventana emergente Empezar con un lienzo en blanco, seleccione Tamaño de tableta.

4. Se le dirigirá al lienzo de edición en Power Apps. Si aparece el mensaje emergente Le damos la bienvenida a Power Apps Studio, seleccione Omitir.

5. Seleccione Guardar en la parte superior derecha de la pantalla y póngale a la aplicación el nombre Contoso Coffee Machines desde Guardar como. Seleccione Guardar.

   

6. Para empezar, cree una galería para ver los registros de datos. Seleccione el botón Insertar desde la barra de comandos y busque y seleccione Vertical gallery. Es el mismo tipo de galería que Power Apps creó automáticamente en la aplicación móvil.

   

7. Aparecerá en la pantalla un control llamado Gallery1. Actualmente no está conectado a datos, por lo que Power Apps le solicitará Seleccionar un origen de datos. Como hay distintos tipos de datos, debemos decirle a Power Apps a qué tipo de datos queremos conectarnos. En este caso, nos conectaremos a la hoja de cálculo de Excel guardada en OneDrive con la conexión a OneDrive para la Empresa. Esta conexión nos permite acceder a documentos desde nuestra cuenta OneDrive (empresa) y a cualquier biblioteca de documentos de SharePoint a la que tengamos acceso.

8. Busque y seleccione OneDrive para la Empresa. Puede escribir OneDrive en el campo de búsqueda para encontrarlo rápidamente. Luego, es posible que tenga que seleccionar Agregar una conexión y autenticar la conexión.

   

9. Cuando complete la conexión a OneDrive para la Empresa, aparecerá un panel en el lado derecho de la pantalla que le pedirá que elija un archivo de Excel. Busque y seleccione el documento de Excel que ha copiado en su OneDrive, llamado "Machine-Order-Data.xlsx.". Si le cuesta encontrarlo, escriba el nombre del archivo en el campo de búsqueda para limitar las opciones.

   

10. Tras seleccionar "Machine-Order-Data.xlsx", el panel le solicitará ahora que elija una tabla. Debería haber dos opciones, "Máquinas" y "MachineTypes". Seleccione la casilla junto a "Máquinas" y, luego, seleccione el botón Conectar en la parte inferior del panel.

    

11. Recibirá un aviso de que el origen de datos se agregó a su aplicación.

12. Seleccione la galería de nuevo. En el lado derecho de la pantalla, encontrará el panel de Propiedades de su control de galería. Compruebe que el Origen de datos se haya configurado en Máquinas. Si la galería no se ha rellenado con la imagen, el título y el precio, añada estos elementos ahora siguiendo las mismas instrucciones que usó con la aplicación móvil anterior. (Sugerencia: use ThisItem.'Machine Name', ThisItem.Price y ThisItem.Photo.)

    

13. Cambie el tamaño de la galería para que se extienda hasta la parte inferior de la pantalla y toque el lado izquierdo de la pantalla.

14. Ahora puede añadir un control de formulario para actualizar los datos que aparecen en la galería. Seleccione en una parte en blanco de la pantalla para anular la selección de la galería y, a continuación, seleccione el botón Insertar en el menú del encabezado. Busque y seleccione Editar formulario.

    

15. El control Form1 aparecerá en la pantalla. Arrástrelo a la mitad derecha de la pantalla y cambie su posición y tamaño de tal modo que ocupe la mitad derecha de la pantalla.

16. Como puede ver, el nuevo formulario le solicita Conectar con datos. Con el control de formulario seleccionado, observe el panel Propiedades, en la parte derecha de la pantalla. Justo debajo de Propiedades verá la opción Origen de datos y un menú desplegable con la palabra Nada. Seleccione el menú desplegable y la tabla Máquinas.

    

17. Ahora puede añadir campos en el formulario, ya que ahora mismo está en blanco. En el panel Propiedades, seleccione el vínculo a Editar campos. Está justo debajo del menú desplegable Origen de datos.

18. En el panel emergente Campos, seleccione el botón Agregar campo.

19. Marque la casilla junto a cada uno de los siguientes campos en Elegir un campo: Photo, Machine ID, Machine Name, Price, Color, Description, Feature, Machine Type, Machine Type ID, Avg. Cups/Week, and Avg. Espressos/Week. Márquelos en el orden indicado. Es posible que deba desplazarse hacia abajo para verlos todos. Luego, seleccione Agregar. Puede cerrar el panel Campos.

    

    Ahora, el formulario muestra campos de entrada dispuestos en un formato de tres columnas. Como puede ver, los campos se han añadido en el orden en el que los seleccionó. Todos los campos deberían estar en blanco.

20. A continuación, debemos designar qué elemento de nuestros datos debe aparecer en el formulario. Observe el control Galería, en la parte izquierda de la pantalla. La Galería muestra todas las cafeteras, así que el formulario debe mostrar una de ellas. Con el formulario seleccionado, vaya a la barra de fórmulas fx en la parte superior de la pantalla. A la izquierda de la barra de fórmulas, encontrará un menú desplegable para buscar las propiedades del control Formulario. Seleccione el menú desplegable y busque/seleccione la propiedad Item.

    

21. En el campo Item del cuadro de entrada de fórmula fx, introduzca Gallery1.Selected. Debería ver inmediatamente que los datos se introducen en los campos del formulario.

    

22. La imagen de la foto se ha añadido como un cuadro de texto en lugar de un control de imagen. Es por eso que puede ver la URL de la imagen en lugar de la imagen en sí. Puede solucionar esto seleccionando la tarjeta de datos de la foto (en el ejemplo, Photo_DataCard2). En la tarjeta de datos de la foto, seleccione el valor de la tarjeta de datos (en el ejemplo, DataCardValue12). Elimine el valor de la tarjeta de datos.

    

23. Al eliminar el valor de tarjeta de datos, aparecerán un par de "x" rojas en el lienzo, lo que indica que hay errores de fórmula. Puede solucionarlos rápidamente. Sin embargo, seleccione primero la tarjeta de datos de la foto y, a continuación, Insertar. Busque la imagen de la palabra y seleccione Imagen.

24. Recibirá el mensaje de error emergente Tarjeta de datos bloqueada. Deberá desbloquear la tarjeta de datos antes de poder insertar un control de imagen. Seleccione Desbloquear y agregar. Ahora, se debería haber insertado un control de imagen en la tarjeta de datos de la foto.

25. Seleccione el control Imagen que acaba de insertar y, en la barra de fórmulas, introduzca ThisItem.Photo. La pantalla debería tener ahora el aspecto de la imagen siguiente.

    

26. Ahora ya puede corregir los errores de fórmula que aparecían al eliminar el valor de la tarjeta de datos de entrada de texto de la imagen. Seleccionar la x roja situada más a la derecha y, luego, Editar en la barra de fórmulas.

    

27. La barra de fórmulas muestra DataCardValue12.Y + DataCardValue12.Height (o el nombre equivalente de los valores de la tarjeta de datos que ha eliminado anteriormente). Recuerde que DataCardValue12 es la tarjeta de datos que ha eliminado. Cambie la fórmula para eliminar la referencia al valor de la tarjeta de datos e incluya el nombre de su control de imagen. En el ejemplo, el control de imagen es Image2, por lo que la fórmula actualizada será Image2.Y + Image2.Height. (La fórmula debe incluir el nombre real de la imagen). La primera advertencia de error desaparecerá.

28. Seleccione la advertencia de error restante (la x roja) y elija de nuevo Editar en la barra de fórmulas. La barra de fórmulas muestra que la propiedad Update está establecida en DataCardValue12.Text. Elimine el valor de la tarjeta de datos de la fórmula y reemplácelo de nuevo con el nombre de su control de imagen. En el ejemplo, la fórmula se actualizará a Image2.Text.

    En esta ocasión, el error no ha desaparecido porque la imagen no tiene una propiedad llamada text. Deberá seguir editando la fórmula. Cambie la fórmula a Image2.Image. Ahora debería desaparecer la advertencia de error de fórmula.

29. Para ver la versión preliminar de la aplicación, seleccione el icono "Reproducir", en la parte superior derecha de la barra de comandos, pulse la tecla F5 o mantenga pulsada la tecla Alt mientras hace clic en los controles. Con la aplicación en modo de versión preliminar, intente desplazarse por la galería y seleccionar distintas cafeteras. Como puede ver, el formulario se va rellenando con el elemento que seleccione.

30. A continuación, añadirá un control de botón para guardar los cambios que haga en los datos. Primero, seleccione Screen1 en el panel de vista de árbol. Seleccione el botón Insertar de la barra de comandos y busque/seleccione Botón.

    

31. Ajuste el tamaño y la ubicación del botón y el formulario para que el botón esté inmediatamente debajo del formulario en el lado derecho de la pantalla.

32. Cambie el texto del botón (de "Botón" a "Guardar cambios"); en el panel Propiedades de la derecha, el primer elemento es la propiedad Text. Cambie "Botón" por "Guardar cambios" e introdúzcalo.

    

33. Con el control de botón seleccionado, suba a la barra de fórmulas fx. Cambie la propiedad OnSelect para que ponga SubmitForm(Form1) en lugar de "false". (Si el formulario no se llama Form1, use el nombre real).

34. Ahora, ponga la aplicación de nuevo en modo de Versión preliminar. Actualice uno de los campos de su formulario, como Machine Price. Pulse el botón Guardar para registrar los cambios.

35. A continuación, añadirá un encabezado para la aplicación. Seleccione Screen1 en el panel de vista de árbol. Seleccione el botón Insertar nuevamente y busque/seleccione un control Rectángulo.

36. Coloque el control rectángulo en la esquina superior izquierda de la pantalla y estírelo para que llegue hasta el lado derecho de la pantalla. En el panel de propiedades del rectángulo, busque el campo de entrada Altura e introduzca 75.

    

    Sugerencia

    Todos los elementos en el panel de propiedades tienen un valor correspondiente visible en la barra de fórmulas (fx). Si no logra encontrarlo en el panel de propiedades, seleccione el menú desplegable que encontrará justo a la izquierda del campo de entrada de la barra de fórmulas. En este caso, puede buscar/seleccionar la propiedad Height.

37. Ahora, cambie el tamaño de la galería y los controles de formulario para que encajen correctamente justo debajo del rectángulo.

38. Introduzca un control Etiqueta de texto. Cambie la propiedad Text para que diga "Contoso Coffee Machines".

39. A continuación, ajuste el Size del control de etiqueta a un tamaño de fuente 24 y cambie el tamaño del control para que el título quepa en una sola línea.

40. Luego, cambie el color de la fuente seleccionando el ajuste Color en la barra de comandos. En Colores estándar, seleccione el círculo blanco.

41. Mientras la etiqueta esté seleccionada, busque Alineación de texto en el panel de propiedades. Cambie la alineación para que esté centrada.

42. Por último, cambie la posición del control de etiqueta para que esté centrado en la pantalla y en el centro del rectángulo. Como puede ver, aparecen líneas discontinuas a medida que se acerca al centro de la pantalla, como ayuda para alinear la etiqueta. La pantalla debería tener ahora el aspecto de la imagen siguiente.

    

Ha creado una aplicación de lienzo de una sola pantalla desde cero, capaz de leer y actualizar los datos sobre cafeteras. En la siguiente unidad, usaremos como base esta aplicación para descubrir conceptos nuevos de Power Apps.