PowerApps es probablemente un producto bastante bueno, pero cuando las aplicaciones creadas con él se ven tan mal.
Escucho esto a menudo. Es cierto que las PowerApps tienden a tener un aspecto bastante resistente. Pueden estar bien pensados en términos de funcionalidad, pero cuando se trata de una herramienta destinada al uso interno de una organización, no siempre se invierte en el diseño visual.
Pero eso no significa que PowerApps no se vea bien.
Esta vez, vamos a hacer que PowerApps sea un poco más estilizado. Se implementará una copia de la aplicación móvil ofrecida por Viking Line a los consumidores. La aplicación original tiene este aspecto.
Veremos si lo consigue. ¡Empezar!
Navegación
Limitemos nuestro experimento a tres pantallas principales (pantalla de inicio, mi viaje y libre de impuestos). Vamos a crear una pantalla en blanco para cada uno. Agregue una imagen copiada de la aplicación móvil a la pantalla de inicio como base para el menú.
Pero la imagen es solo un fondo de pantalla. La funcionalidad real se implementa con cuadros (rectángulo). Agreguemos un cuadro sobre cada icono en la parte inferior.
Agregue la navegación al evento OnSelect para cada cuadro a la pantalla correspondiente al icono.
Por último, vamos a hacer que las cajas sean transparentes. La navegación con una sola pantalla está completa.
Vamos a copiar toda la parte inferior (fondo de pantalla y cajas) a otras pantallas. Para cada pantalla, cambie la imagen detrás de los mosaicos a una en la que esa pantalla esté resaltada en rojo.
De esta manera tendremos una navegación funcional en cada pantalla.
Pantalla estática libre de impuestos
Esto es fácil. Hay seis botones en la pantalla que abren diferentes cosas. Inicialmente, agreguemos a la pantalla el fondo de pantalla capturado de la aplicación original.
Una vez más, los botones se implementan con la ayuda de formas. Agregue un círculo de iconos > y ajuste su tamaño exactamente al tamaño del icono en la pantalla.
Cambie el color de fondo del círculo a transparente y el color que se muestra cuando se presiona el círculo (PressedFill) a rojo translúcido.
Esto crea la ilusión de que las imágenes en el fondo de pantalla reaccionan cuando se presionan.
Añade un círculo correspondiente sobre cada icono.
Por último, desde cada icono se añaden enlaces a las pantallas/páginas web correctas.
Listo.
Empezar
Una imagen capturada de la aplicación original con el texto eliminado (con la excepción del texto de Viking Line, que está en su propia fuente especial) se utiliza como fondo de pantalla.
Añadido a la pantalla
- Texto de bienvenida del usuario (que muestra el nombre del usuario de la aplicación)
- Botón Reservar viaje
Un botón es un botón en PowerApps. Lo establecemos transparente, cambiamos el color del borde a blanco, así como aumentamos el redondeo de las esquinas.
Me parece bien.
Pantalla Mi viaje
Esta es una parte un poco más laboriosa. La pantalla Mi viaje muestra los momentos importantes (salida, llegada, comidas, etc.) de un crucero en una línea de tiempo. Al hacer clic en la esquina superior derecha de la pantalla, aparecerá otra pantalla donde puede elegir qué viaje ver.
Necesitamos dos listas de SharePoint.
Mis reservas, que contiene información básica de reservas.
Accidentes de viaje, que incluye los eventos detallados de cada viaje.
En la pantalla Mi viaje, agreguemos un título con iconos. Se usan iconos estándar de PowerApps.
Agregue las listas de SharePoint que desea usar como orígenes de datos.
A continuación, se hace algo salvaje. Agregue un rectángulo a la pantalla, pero colóquelo fuera de la pantalla visible (posición x = 640).
Construyamos una barra de título en nuestra pantalla oculta. Establezca las coordenadas x de todos los controles ubicados en la pantalla oculta para que se refieran a las coordenadas x de la pantalla oculta. En el futuro, cuando movemos la pantalla oculta, otros controles se mueven con nosotros.
Agregue un título y una línea gris claro (=cuadro de un píxel de alto).
Para esta pantalla hasta ahora oculta, se lleva a cabo la elección del viaje. Agreguemos una galería y péguela en la lista MyTrips en SharePoint.
Vamos a ajustar el contenido y la apariencia de la galería de las siguientes maneras.
- Las filas de la galería presentan los valores de los campos de la lista de SharePoint de forma ordenada en dos filas
- Ajustar los tamaños de fuente para corregir
- Cambiar el color de la línea separadora
- Agregue una casilla de verificación para eliminar la fila, así como una pequeña lengüeta para seleccionar la fila
- Establece el color de las letras de la línea activa en rojo
- Vamos a mover la galería a su lugar apropiado
El resultado final se ve así.
Volvamos a la construcción de la pantalla real de Mi Viaje. Agregue información sobre el crucero activo (= seleccionado en la pantalla oculta) en la parte superior de la pantalla.
Finalmente, compilamos una línea de tiempo que describe los eventos del crucero seleccionado. Agreguemos una galería que muestre toda la información del crucero (la otra lista de SharePoint).
Filtra la galería para mostrar solo los detalles del crucero seleccionado.
Items = Filter(VinkingLine;varausnumero = Gallery3.Selected.Title)
Agregue una línea vertical verde y una esfera a la plantilla de galería (plantilla). Agregue toda la información que se encuentra en la lista de SharePoint como contenido. Establezcamos los tamaños de fuente para que se ajusten.
Después de los tiempos hay una bandera que describe la hora del país. Una marca es un elemento de imagen en el que la imagen utilizada está determinada por el valor del campo de bandera de la lista.
La línea de tiempo siempre muestra una sección de "Servicios a bordo" después de la salida, cuyo contenido difiere de las otras líneas. Para ello, vamos a añadir una imagen con los logotipos de los servicios a la plantilla de galería. Sin embargo, la imagen se inserta solo cuando la línea se titula "Servicios a bordo".
Menú desplegable
Pero, ¿cómo demonios hacemos que una pantalla oculta se deslice bien dentro y fuera de la existente? Por supuesto, con la ayuda de un temporizador (timer).
Establezca el icono del gofre (y la flecha de vista flotante) en OnSelect
UpdateContext({startMyTimer:false}); UpdateContext({showMenu: !showMenu, startMyTimer:true})
Así que tenemos dos variables booleanas:
- showMenu, que le indica si el menú (es decir, la pantalla oculta) está visible o no
- startMyTimer para iniciar un temporizador
Cada vez que presione el valor de la variable showMenu en la esquina superior derecha de la pantalla principal, y el valor de la variable startMyTimer se establece en false > true.
Agregue un temporizador con una duración de 300 milisegundos y una variable StartMyTimer establecida anteriormente.
El temporizador siempre se activa cuando el valor de la variable startMyTimer cambia de false a > true. Y nuestra pantalla desplegable tarda 300 milisegundos en encajar en su lugar.
Entonces, ¿cómo sucede esto? Establezcamos el valor del eje x de nuestra pantalla oculta
If(!showMenu;0 + ChooseTrip.Width * Timer1.Value/Timer1.Duration;
ChooseTrip.Width-ChooseTrip.Width * Timer1.Value/Timer1.Duration
)
Es decir, si la pantalla viene de oculto, su valor del eje x es 640 – 640 * (valor del temporizador actual/600). El valor del temporizador siempre comienza desde cero y termina con seiscientos.
Cuando la pantalla está oculta, su valor en el eje x es 0 + 640 * (valor del temporizador actual/600).
Lógico.
Si mi escritura fue en hebreo, es posible que desee ver este gran video sobre el tema.
Rendimiento: almacenamiento de información en el dispositivo terminal
La aplicación original de Viking Line almacena los datos de viaje del usuario en su teléfono móvil. Tampoco queremos recuperar viajes y sus datos de SharePoint cada vez que se inician. Vamos a guardarlos también en el teléfono.
En la práctica, cada vez que se inicia PowerApps, se intenta cargar los datos de viaje del repositorio local del teléfono en la memoria. Si esto no es posible, los datos se recuperan de la lista de SharePoint y se almacenan en la memoria y, desde allí, en el almacén de datos local del teléfono.
LoadData(myReservations,"local_mytrips"; true);
If(IsEmpty(myReservations), ClearCollect(myReservations, VikingLine_MyTrips);SaveData(myReservations, "local_mytrips"));
LoadData(myTrips,"local_mytripEvents", true);
If(IsEmpty(myTrips), ClearCollect(myTrips,VinkingLine);SaveData(myTrips, "local_mytripEvents"))
Resumen
¿Cómo se ve y se siente el resultado final en comparación con el original? Creo que muy bien. La mejor manera de hacerlo es ver los videoclips cortos que he grabado con ambas aplicaciones.
PowerApps
Texto original en
Si bien todo se ve bien en nuestro ejemplo, PowerApps tiene sus limitaciones. También en la construcción de la interfaz de usuario.
- Hay un número muy limitado de fuentes diferentes disponibles. Si haces el look estrictamente de acuerdo con la marca, esto es fácilmente un problema
- PowerApps no tiene control de deslizamiento. Debido a esto, no implementé la navegación entre diferentes secciones en la página de inicio de la aplicación deslizando el dedo por la página. Esto se puede hacer con un control deslizante, pero no es tan bueno como uno real.