Crear una aplicación optimizada para dispositivos móviles que utilice diseños con capacidad de respuesta

  • 6 minutos

En este ejercicio, creamos una aplicación de una pantalla optimizada para dispositivos móviles basada en nuestros datos de Cafeteras Contoso. El propósito de este ejercicio es brindarle experiencia en la creación de una aplicación con contenedores de diseño automático y mostrarle de cerca cómo se comportan las aplicaciones dinámicas. Vamos a crear una aplicación completamente nueva, así que vaya a la página principal de Power Apps y siga estos pasos.

  1. 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, vaya al paso siguiente.

  2. Seleccione Crear>Aplicación en blanco>Tableta. Póngale un nombre a la aplicación y pulse Crear.

  3. Puede consultar el siguiente diagrama para saber cuáles son los siguientes pasos (la numeración sigue el orden de los pasos). En la barra de comandos, seleccione el botón Configuración. (Es posible que tenga que seleccionar Aplicación en el panel Vista de árbol para mostrarla).

    Imagen de los pasos numerados 3 a 7 y 9; la imagen muestra el panel de Configuración de la aplicación junto con la barra de comandos y la vista de árbol

  4. En el panel emergente Configuración, seleccione la pestaña Visualizar, baje y Desactive la opción Escalar para ajustar (esta acción pone automáticamente la opción Bloquear relación de aspecto en Desactivado).

  5. Cierre la ventana emergente Configuración.

  6. Cree una Nueva pantalla con un diseño de barra lateral para su aplicación. Póngale el nombre "Catalog screen".

  7. Cree una Nueva pantalla desde Plantillas>Éxito. Póngale el nombre "Success Screen".

  8. Elimine Screen1.

  9. Luego, seleccione el botón Agregar datos desde la barra de comandos. A continuación, busque/seleccione OneDrive para la Empresa.

  10. En el panel Elegir un archivo de Excel, en el lado derecho de la pantalla, seleccione su archivo CoffeeMachineData.xlsx y seleccione la tabla CoffeeMachines. Conecte la tabla seleccionando Conectar en la parte inferior del panel.

  11. Seleccione el contenedor horizontal en el lado izquierdo de su pantalla, llamado SidebarContainer1. Consulte la siguiente imagen para entender cuáles son los siguientes pasos.

    Captura de pantalla de los pasos numerados del 11 al 13

  12. Seleccione el icono más (+) en el contenedor, inserte una Galería vertical en SidebarContainer1 y seleccione CoffeeMachines como origen de datos. Ponga la propiedad Fill en Color.LightSteelBlue.

  13. A continuación, insertaremos un formulario en Catalog Screen. Seleccione MainContainer1, al lado derecho del lienzo de su aplicación. Seleccione el icono más (+) (o el botón Insertar de la barra de comandos) para insertar un Editar formulario. En el panel de Propiedades, en el lado derecho de la pantalla, seleccione CoffeeMachines como Origen de datos.

  14. Aún en el panel Propiedades, seleccione la opción Editar campos en Origen de datos.

  15. En el panel Campos, seleccione Agregar campo y agregue todos los campos marcando la casilla junto al nombre de cada campo en la ventana emergente Elegir un campo. Luego, seleccione el botón Agregar en la parte inferior.

  16. Cierre el panel Campos.

  17. Mientras Form1 aún está seleccionado, en el menú desplegable Propiedad, en la parte superior izquierda de la pantalla, seleccione la propiedad Item y, en el campo de fórmula (fx), introduzca Gallery1.Selected.

  18. Finalmente, todavía en el formulario, configure la propiedad Fill en Color.LightSteelBlue

  19. A continuación, lo agregamos a nuestro contenedor de encabezado. Seleccione el control HeaderContainer, use el icono más (+) para insertar un control Etiqueta de texto y ajuste las propiedades en el menú desplegable de la siguiente manera.

    Text: "Contoso Coffee Catalog"

    Size: cambiar de 13 a 20

    Height: cambiar de 40 a Parent.Height

    Width: cambiar de 150 a 200

  20. Con el botón Alinear en la barra de comandos (a la izquierda del botón Color; también puede buscar la selección Alineación de texto en el panel Propiedades de la derecha), cambie Alinear de "Alinear a la izquierda" a Justificar.

  21. A continuación, inserte un control Imagen en HeaderContainer1 y ajuste las propiedades de la siguiente manera.

    Image: User().Image

    Height: Parent.Height

  22. Vamos a crear un icono de conexión insertando un icono de globo en HeaderContainer1. Ajuste las propiedades del siguiente modo.

    Height: 20

    Width: 20

    Color: If(Connection.Connected, Color.Green, Color.LightSteelBlue)

  23. A continuación, justificamos a la derecha nuestros elementos HeaderContainer. Para ello, busque en el panel Propiedades a la derecha la opción Justificar (horizontal). La tercera opción es Fin. Selecciónela.

  24. Finalmente, vamos a agregar algo de color de fondo a nuestro contenedor de encabezado. Ajuste la propiedad Fill en Color.LightSteelBlue

  25. Seleccione MainContainer1, donde reside su formulario. Inserte un control Botón con las siguientes propiedades.

    Text: "Guardar"

    Width: Parent.Width

    OnSelect: SubmitForm(Form1)

  26. Seleccione el formulario dentro de MainContainer1 y ajuste la propiedad OnSuccess a Navigate(Screen3)

  27. Desde el panel Vista de árbol, seleccione Success Screen.

  28. Seleccione el icono Comprobar (iconCheck1) y actualice la propiedad OnSelect a lo siguiente:

    Back()

  29. Ponga la aplicación en modo de versión preliminar. Ajuste la pantalla al iPhone 12 seleccionando el menú desplegable Teléfono. ¿Ha visto cómo ha cambiado los controles su pantalla? Pruebe con diferentes tabletas y teléfonos, y cambie de orientación para ver cómo cambia la pantalla.

Nuestra sencilla y dinámica aplicación se puede ahora utilizar en cualquier plataforma. ¡Fantástico!