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

  • 6 minutos

En este ejercicio, crearemos una aplicación, de una solo pantalla y optimizada para dispositivos móviles, utilizando Microsoft Power Apps y los datos de Contoso Coffee Machines. Esta tarea práctica ayuda a comprender más fácilmente cómo usar los contenedores de diseño automático y a observar cómo se comporta el diseño dinámico en todos los dispositivos.

Comenzaremos en la página principal de Power Apps. Siga estos pasos:

  1. Descargue los archivos de App in a Day y extráigalos. Abra el archivo de Excel con el nombre Machine-Order-Data.xslx.

  2. Vaya a make.powerapps.com. Seleccione Crear>Comenzar con un lienzo en blanco>Con capacidad de respuesta. Si aparece un mensaje de bienvenida, seleccione Omitir.

  3. Consulte la siguiente imagen para entender mejor los próximos pasos. En la barra de comandos, seleccione el botón Configuración. Si no puede verlo, seleccione Aplicación en el panel Vista de árbol para que sea visible.

    La imagen muestra el panel

  4. En el panel emergente Configuración, seleccione la pestaña Visualización y baje hasta la opción Ajustar tamaño al contenido para comprobar que esté desactivada. (Esto pondrá Bloquear relación de aspecto en Desactivado).

  5. Cierre la ventana emergente Configuración.

  6. Cree una Nueva pantalla seleccionando +Nueva pantalla en el panel Vista de árbol. Seleccione el diseño Barra lateral para la nueva pantalla. Póngale el nombre Catalog Screen haciendo doble clic en el nombre de la pantalla (Screen2) y escribiendo "Catalog Screen".

  7. Cree otra pantalla nueva; para esta pantalla, utilice la plantilla Correcto. Póngale a la nueva pantalla el nombre "Success Screen".

  8. Para eliminar Screen1, haga clic en la pantalla en la vista de árbol, seleccione los puntos suspensivos a la derecha de la pantalla y seleccione Eliminar.

  9. A continuación, seleccione el contenedor de la barra lateral de Catalog Screen. (Deberá expandir varias capas de contenedores para encontrar el contenedor de la barra lateral). Añada una galería vertical seleccionando + Insertar y Galería vertical con SidebarContainer1 seleccionado.

  10. El panel Seleccionar un origen de datos debería abrirse automáticamente. Si no se abre, seleccione el botón Agregar datos desde la barra de comandos con su control de galería seleccionado en el panel de vista de árbol.

  11. Luego, busque y seleccione OneDrive para la Empresa y cree la conexión. (Puede usar el campo de entrada de búsqueda para limitar la búsqueda).

  12. En el lado derecho de la pantalla, aparecerá el panel Elegir un archivo Excel. Seleccione el archivo Machine-Order-Data.xlsx y, luego, la tabla Máquinas. Conecte la tabla seleccionando Conectar en la parte inferior del panel. Debería ver una notificación en la parte superior de la pantalla; haga clic en la X para cerrarla.

  13. Es posible que deba actualizar los datos que se muestran en su galería. Si su galería se parece a la siguiente imagen, siga los próximos pasos. Si se muestran los campos correctos, puede ir directamente al paso 17.

    Captura de pantalla de la galería, con los campos que se actualizarán

  14. Expanda la galería y seleccione el campo del título. En la barra de fórmulas, cambie la propiedad Text de la etiqueta de texto del título a ThisItem.'Machine Name'.

  15. A continuación, seleccione el campo de subtítulo. En la barra de fórmulas, cambie la propiedad Text de la etiqueta de texto del subtítulo a ThisItem.Price.

  16. A continuación, seleccione el campo de imagen. En la barra de fórmulas, cambie la propiedad Image del control de imagen a ThisItem.Photo.

  17. En la vista de árbol, seleccione el menú desplegable junto al contenedor de la barra lateral para contraer su contenido.

  18. Seleccione el contenedor principal en el lado derecho de su pantalla, llamado MainContainer2.

    Captura de pantalla de los pasos numerados del 11 al 13

  19. Seleccione el icono más (+) (o el botón Insertar de la barra de comandos) para insertar un Editar formulario. Seleccione la tabla Máquinas como origen de datos.

  20. En el panel Propiedades de la derecha, seleccione la opción Editar campos en Origen de datos.

  21. En el panel Campos, seleccione Agregar campo y añada los siguientes campos, en el orden indicado, marcando la casilla junto al nombre del campo: Photo, Machine ID, Machine Name, Color, Description, Feature, Price, Machine Type, Machine Type ID, Avg. Cups/Week y Avg. Espressos/Week. Luego, seleccione el botón Agregar en la parte inferior.

  22. Cierre el panel Campos.

  23. Tenga en cuenta que los campos se insertan en el formulario en el orden en el que los haya seleccionado.

  24. Con Form1 seleccionado, seleccione la propiedad Item en el menú desplegable Propiedad, en la parte superior izquierda de la pantalla (encima del encabezado Vista de árbol); en el campo de fórmulas (fx), introduzca Gallery1.Selected. (Si su galería no se llama Gallery1, use el nombre que corresponda).

  25. Por último, con el formulario seleccionado, ponga la propiedad Fill en Color.LightSteelBlue.

  26. A continuación, lo añadiremos al contenedor del encabezado. Seleccione el control HeaderContainer2 (en todo este ejercicio, use el nombre real del control del encabezado si es distinto) y use el icono de suma (+) para insertar un control Etiqueta de texto. Ajuste las propiedades de la etiqueta de texto desplegando la barra de fórmulas y la lista de propiedades 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

  27. Con el menú desplegable 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.

  28. A continuación, seleccione el contenedor Encabezado fuera de la etiqueta de texto para anular la selección del control de etiqueta de texto. Inserte un control Imagen en HeaderContainer2 y ajuste las propiedades de la siguiente manera.

    Image: User().Image

    Height: Parent.Height

  29. Puede crear un icono de conexión insertando un icono de globo en HeaderContainer2. Ajuste las propiedades del siguiente modo.

    Height: 20

    Width: 20

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

  30. A continuación, puede justificar a la derecha los elementos del contenedor del encabezado. Para ello, seleccione HeaderContainer2 en la vista de árbol y busque en el panel Propiedades, a la derecha. Busque la opción Justificar (horizontal). La tercera opción es Finalizar (pude verla al pasar el cursor sobre el icono). Selecciónela.

  31. Finalmente, vamos a añadir algo de color de fondo al contenedor del encabezado. Ponga la propiedad Fill en Color.LightSteelBlue.

  32. Seleccione MainContainer2, que es donde reside el formulario. Inserte un control Botón con las siguientes propiedades.

    Text: "Guardar"

    Width: Parent.Width

    OnSelect: SubmitForm(Form1)

  33. Seleccione el formulario dentro de MainContainer2 y ponga la propiedad OnSuccess en Navigate('Success Screen').

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

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

    Back()

  36. Entre en el modo de versión preliminar. Ajuste la pantalla al iPhone 12 seleccionando el menú desplegable Teléfono. Observe cómo se ajusta el diseño en función de los dispositivos y las orientaciones.

  37. Guarde la aplicación si desea usarla o volver a visitarla más tarde.

Ya ha creado una aplicación con capacidad de respuesta que se puede usar en distintas plataformas.