Ejercicio: Crear su primera aplicación en Power Apps

  • 15 minutos

En el siguiente ejercicio, crearemos su primera aplicación con una tabla de Excel como origen de datos. Podemos usar cualquier tabla de Excel como origen de datos si ha formateado los datos como una tabla y los ha guardado en un origen de datos al que tenga acceso, como OneDrive. En este ejercicio, descargaremos los datos, los guardaremos en OneDrive, crearemos una aplicación rápida de tres pantallas y, luego, comenzaremos a crear una aplicación en un lienzo en blanco. La aplicación que empezaremos a crear desde una pantalla en blanco en este ejercicio será la misma que usaremos en futuras unidades de aprendizaje. La aplicación de tres pantallas es para usted y le sirve de referencia, para que vea cómo interactúan los controles entre sí a fin de acceder a sus datos. Ambas aplicaciones pueden interactuar con los mismos datos.

Obtener los datos

Descargue la hoja de cálculo de Excel CoffeeMachineData.xlsx. Seleccione el vínculo y, luego, el botón Descargar archivo sin formato para descargar el archivo. Tras la descarga, siga con estos pasos.

Captura de pantalla del vínculo de GitHub para el archivo Excel; el botón para descargar el archivo sin formato se ha resaltado

  1. En la pestaña de OneDrive del navegador, seleccione Agregar nuevo>Cargar archivos.

    Captura de pantalla de la interfaz de archivos en OneDrive, con la carga de archivos resaltada

  2. En la ventana emergente Abrir, seleccione la ubicación del archivo CoffeeMachineData.xlsx (es probable que esté en su carpeta Descargas).

  3. Cuando encuentre y seleccione el archivo CoffeeMachineData.xlsx, seleccione Abrir. Confirme que el archivo está en su OneDrive; para ello, introduzca "CoffeeMachineData" en el campo de búsqueda, en la parte superior central de la barra de comandos de OneDrive. Ahora que tiene el archivo de datos en su OneDrive, vamos a crear la aplicación.

Crear una aplicación de tres pantallas

Para empezar, vamos a crear una aplicación de tres pantallas, algo que Power Apps puede hacer con unos pocos clics.

  1. Vuelva a Power Apps Maker Portal make.powerapps.com e inicie sesión con su cuenta de organización.

  2. Seleccione la pestaña Crear en el menú del lado izquierdo.

  3. Seleccione el botón Excel en las opciones de Comenzar desde.

    Captura de pantalla de Power Apps, con la pestaña Crear y Excel resaltados

  4. Si no ve su conexión a OneDrive en Conexiones, seleccione el botón + Nueva conexión y el botón Crear para crear la conexión. Desde ahí, seleccione su conexión a OneDrive para la Empresa.

  5. En Elegir un archivo Excel, busque y seleccione CoffeeMachineData.xlsx. Puede buscarlo con el campo de búsqueda de la esquina superior derecha.

    Captura de la pantalla de opciones Conexiones y Elegir un archivo Excel, con la conexión de OneDrive y CoffeeMachineData.xlsx resaltados

  6. En Elegir una tabla, seleccione CoffeeMachines. CoffeeMachines es la tabla donde residen los datos de la aplicación.

  7. Seleccione el botón Conectar, en la parte inferior derecha, y observe cómo crea Power Apps una aplicación de tres pantallas.

    En tan solo unos momentos, Power Apps le muestra una aplicación completamente funcional con apariencia para dispositivos móviles. Para tener una idea del aspecto que tendrá en un dispositivo móvil, use el botón de vista previa (que parece un botón de "reproducción") en la esquina superior derecha, junto al icono de "guardar". Seleccione el botón "reproducir" (o pulse F5) y pruebe la interfaz.

    Captura de pantalla de la aplicación CoffeeMachines generada por Power Apps. El botón Reproducir se ha resaltado.

    Como puede ver, puede desplazarse por la lista de elementos, seleccionarlos, ver los detalles relacionados, editar estos detalles y guardar/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.

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

  9. 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 puede Power Apps crear una aplicación, vamos a crear una nosotros.

Crear una aplicación de lienzo

  1. Desde Power Apps Maker Portal (make.powerapps.com), seleccione la pestaña Crear y, luego, seleccione Aplicación vacía.

  2. En la ventana emergente Crear, debajo de Aplicación de lienzo en blanco, seleccione Crear.

    Captura de pantalla de las selecciones del menú de Power Apps, con Aplicación vacía y Crear resaltados

  3. Asígnele a su aplicación el nombre "Contoso Coffee Machines" y deje el botón Formato seleccionado en Tableta. Seleccione Crear.

    Captura de pantalla de la ventana emergente

  4. Verá una pantalla en blanco con el mensaje emergente "Bienvenido a Power Apps Studio". Le solicitará "Agregar un elemento desde el panel Insertar o conectarse a los datos". Para empezar, vamos a crear una galería a fin de ver nuestros registros de datos. Seleccione la opción de galería. Si no ve esta ventana emergente, seleccione el botón Insertar en la barra de comandos y busque/seleccione Galería vertical.

    Captura de pantalla en la que Gallery1, Insertar y Galería vertical se han resaltado

  5. Aparecerá en su pantalla un control llamado Gallery1. Actualmente no está conectado a datos, por lo que Power Apps nos solicita 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, necesitamos conectarnos a la hoja de cálculo de Excel que guardamos en OneDrive. Podemos hacer esto con la conexión a OneDrive para la Empresa. Esta conexión nos permite acceder a documentos de nuestra cuenta OneDrive (empresa) y a cualquier biblioteca de documentos de SharePoint a la que tengamos acceso.

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

    Captura de pantalla de la galería recién insertada, con el campo de datos; se introduce OneDrive en el cuadro de búsqueda y se selecciona OneDrive para la Empresa

  7. 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 copiamos en nuestro OneDrive, llamado "CoffeeMachineData.xlsx". Si le cuesta encontrarlo, escriba el nombre del archivo en el campo de búsqueda para limitar las opciones.

    Captura de pantalla del cuadro de diálogo

  8. Tras seleccionar "CoffeeMachineData.xlsx", el panel le solicitará ahora que elija una tabla. Debería haber una única opción de "CoffeeMachines". Seleccione la casilla junto a "CoffeeMachines" y, luego, seleccione el botón Conectar, en la parte inferior del panel.

    Captura de pantalla con la solicitud Elegir una tabla, con Cafeteras seleccionada y con el botón Conectar resaltado

  9. Seleccione la galería de nuevo. En el lado derecho de la pantalla, encontrará el panel de Propiedades de su control de galería. Confirme que el Origen de datos se haya configurado en CoffeeMachines. Si aún no había visto la galería con una imagen, un título y un precio, debería verlo ahora.

    Captura de pantalla con el control Galería en la pantalla y seleccionado; en el panel Propiedades, se ha resaltado el origen de datos, que muestra la tabla CoffeeMachines

  10. 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.

  11. Ahora, agreguemos un control de formulario para que podamos actualizar los datos que aparecen en la galería. Seleccione el botón Insertar desde el menú del encabezado. Busque y seleccione Editar formulario.

    Captura de pantalla del botón Insertar seleccionado, en la barra de comandos, y del menú Insertar, con

  12. 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.

  13. Como puede ver, el nuevo formulario nos 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 CoffeeMachines.

    Captura de pantalla de la pestaña de propiedades de Form1, con CoffeeMachines como origen de datos

  14. El formulario está en blanco, así que vamos a agregar algunos campos. En el panel Propiedades, seleccione el vínculo para Editar campos, justo debajo del menú desplegable Origen de datos.

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

  16. Marque la casilla junto a cada uno de los campos en Elegir un campo (es posible que deba desplazarse hacia abajo para verlos todos). Luego, seleccione Agregar. Ahora, el formulario muestra campos de entrada dispuestos en un formulario de tres columnas. Puede cerrar el panel Campos. Todos los campos deberían estar en blanco.

    Captura de pantalla de la imagen con las propiedades de Form1, con el panel Campos mostrando todos los campos resaltados; los campos Editar, el campo Agregar y el botón Agregar están resaltados

  17. 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.

    Captura de pantalla del menú desplegable de propiedades de Form1 con la propiedad Item seleccionada

  18. En el campo Elemento 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.

    Captura de pantalla de Form1, con la propiedad Items como Gallery1.Selected; todos los campos del formulario están rellenados

  19. Puede obtener una vista previa de la aplicación en cualquier momento seleccionando el icono "Reproducir", en la parte superior derecha de la barra de comandos, presionando la tecla de función F5 o manteniendo pulsada la tecla Alt del teclado. Con la aplicación en modo de vista previa, intente desplazarse por la galería y seleccionar distintas cafeteras. Como puede ver, el formulario se va rellenando en función del elemento que seleccione.

  20. A continuación, vamos a agregar un control de botón para poder guardar los cambios que hagamos en los datos. Seleccione el botón Insertar de la barra de comandos y busque/seleccione Botón. Consulte la siguiente imagen para entender cuáles son los siguientes tres pasos.

    Captura de pantalla en la que se ve el control de botón, con

  21. Vamos a cambiar 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.

  22. Coloque el nuevo control de botón debajo del formulario, en la parte inferior de la pantalla.

  23. 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".

  24. Ahora, ponga la aplicación de nuevo en modo de Versión preliminar. Actualice uno de los campos de su formulario, como el "Precio de la máquina". Pulse el botón Guardar para registrar los cambios.

  25. A continuación, vamos a agregar un encabezado para la aplicación. Seleccione el botón Insertar nuevamente y busque/seleccione un control Rectángulo.

  26. 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.

    Captura de pantalla con las propiedades del rectángulo; el valor de altura del botón (75) está resaltado

    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.

  27. Ahora, cambie el tamaño de la galería y los controles de formulario para que encajen correctamente justo debajo del rectángulo. Consulte la siguiente imagen numerada para entender cuáles son los siguientes pasos.

    Captura de pantalla con las propiedades de control de etiqueta; se ha resaltado el texto (

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

  29. 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.

  30. Ahora, cambiaremos el color de fuente. Puede cambiarlo seleccionando el ajuste Color en la barra de comandos. En Colores estándar, seleccione el círculo blanco.

  31. Finalmente, 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.

    Captura de pantalla de la aplicación Contoso Coffee Machines al final del ejercicio

Ya está. A partir de una pantalla en blanco, ha creado una aplicación de una sola pantalla que le permite actualizar y guardar los datos de cafeteras. En la siguiente unidad, seguiremos desarrollando esta aplicación mientras aprendemos nuevos conceptos.