Ejercicio: Crear su primera aplicación en Power Apps
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.
En la pestaña de OneDrive del navegador, seleccione Agregar nuevo>Cargar archivos.
En la ventana emergente Abrir, seleccione la ubicación del archivo CoffeeMachineData.xlsx (es probable que esté en su carpeta Descargas).
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.
Vuelva a Power Apps Maker Portal make.powerapps.com e inicie sesión con su cuenta de organización.
Seleccione la pestaña Crear en el menú del lado izquierdo.
Seleccione el botón Excel en las opciones de Comenzar desde.
Si no ve su conexión a OneDrive para la Empresa 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.
En Elegir un archivo Excel, busque y seleccione CoffeeMachineData.xlsx. Puede buscarlo con el campo de búsqueda de la esquina superior derecha.
En Elegir una tabla, seleccione CoffeeMachines. CoffeeMachines es la tabla donde residen los datos de la aplicación.
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.
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.
Seleccione el botón Guardar e introduzca un nombre para la aplicación en el panel Guardar como. A continuación, seleccione Guardar.
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
Desde Power Apps Maker Portal (make.powerapps.com), seleccione la pestaña Crear y, luego, seleccione Aplicación vacía.
En la ventana emergente Crear, debajo de Aplicación de lienzo en blanco, seleccione Crear.
Asígnele a su aplicación el nombre "Cafeteras Contoso" y deje el botón Formato seleccionado en Tableta. Seleccione Crear.
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 Vertical gallery.
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.
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.
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 para la Empresa, llamado "CoffeeMachineData.xlsx". Si le cuesta encontrarlo, escriba el nombre del archivo en el campo de búsqueda para limitar las opciones.
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.
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.
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.
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.
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.
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.
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.
En el panel emergente Campos, seleccione el botón Agregar campo.
Marque la casilla junto a cada uno de los campos en Elegir un campo. Luego, seleccione Agregar. Ahora, el formulario muestra campos de entrada dispuestos en un formulario de tres columnas. Todos los campos deberían estar en blanco.
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.
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.
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.
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.
Vamos a cambiar el texto del botón (de "Botón" a "Guardar"); en el panel Propiedades de la derecha, el primer elemento es la propiedad Text. Cambie "Botón" por "Guardar" e introdúzcalo.
Coloque el nuevo control de botón debajo del formulario, en la parte inferior de la pantalla.
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".
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.
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.
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 Height 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.
Ahora, cambie el tamaño de la galería y los controles de formulario para que encajen correctamente justo debajo del rectángulo.
Introduzca un control Etiqueta de texto. Cambie la propiedad Text para que diga "Cafeteras Contoso".
A continuación, ajuste el Size del control de etiqueta (a 24) y cambie el tamaño del control para que el título quepa en una sola línea.
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.
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.
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.