Crea Mediante una Galería Horizontal en Power Apps un Carrusel de Prductos Paso por Paso con Apoyo de Power Fx y Controles Básicos.
En este vídeo y artículo, vamos a guiarte paso a paso en la creación de un elemento visual clave para tu aplicación en Power Apps: el Carrusel.
Carrusel en Power Apps
El Carrusel en Power Apps es recurso fundamental para listar productos, testimonios o cualquier contenido que desees de manera visual y fácil de navegar, sino que también es una excelente oportunidad para darle vida a tu aplicación. Aunque el término carrusel es ampliamente utilizado en diseño web, su implementación en Power Apps puede ser igualmente efectiva. Además, este proyecto será una oportunidad perfecta para practicar algunos conceptos básicos de Power Fx, mejorando así tus habilidades de desarrollo en esta poderosa plataforma.
Concretamente vamos a construir:
Gestión de Imágenes y Preliminares
El primer paso en la creación de nuestro carrusel interactivo es la selección y gestión de imágenes para cada automóvil. Optamos por utilizar representaciones gráficas coloridas que no solo ilustran, sino que capturan esencialmente la identidad de cada vehículo. La asignación de colores como azul, naranja, rojo, verde y violeta, se correlaciona directamente con la marca del carro, aportando un método intuitivo y visualmente atractivo para la clasificación.
El proceso de incorporación de estas imágenes en Power Apps es sorprendentemente sencillo, gracias a la interfaz amigable de Power Apps Studio. Desde la sección de multimedia, ubicada en el extremo izquierdo, se revela un espacio inicialmente vacío.
Al seleccionar Cargar, podemos navegar en nuestro computador y elegirlas imágenes:
Ahora, procederemos a crear una nueva pantalla que servirá como el lienzo para nuestro proyecto de carrusel. Para comenzar, es esencial asegurarnos de estar en la vista de árbol, donde organizamos y navegamos por los elementos de nuestra aplicación con facilidad. Una vez en esta vista, buscaremos la opción Nueva pantalla para añadir una pantalla completamente en blanco a nuestro diseño. Esta pantalla será el punto de partida para nuestra creatividad y la llamaremos ScreenCarros.
Procederemos también a agregar una pantalla adicional, a la cual, por simplicidad, mantendremos su nombre por defecto como Screen1.
Datos para Carrusel en Power Apps
Antes de crear los datos datos temporales mediante la función ClearCollect, necesitamos realizar una navegación, para esto, estando posicionados en la pantalla Screen1, nos dirigimos a la pestaña Insertar en la parte superior y, desde la sección Popular que aparece por defecto, seleccionamos el Botón.
Ubicamos este botón en un lugar conveniente en nuestra pantalla Screen1.
A continuación, en el Panel de propiedades en el extremo derecho de Power Apps Studio, Sección Avanzadas, seleccionamos la propiedad OnSelect para realizar una acción específica. Eliminamos el valor false predeterminado en la barra de fórmulas y escribimos la siguiente expresión de Powr Fx:
1 | Navigate (2 | ScreenCarros;3 | ScreenTransition.Fade4 | ) 
Hasta ahora, hemos establecido la navegación entre pantallas pero no hemos creado datos para nuestra aplicación. Sin embargo, este paso es crucial, especialmente cuando nos dirigimos a la pantalla ScreenCarros. Queremos asegurarnos de que, al llegar a esta pantalla, la propiedad OnVisible ejecute la siguiente expresión de Power Fx:
1 | ClearCollect ( 2 | CatalogoDeCarros; 3 | { 4 | Marca: "Amarillo"; 5 | Image: Amarillo; 6 | Descripcion: "Carro con 4 puestos sin baul"; 7 | PaginaWeb: "https://loscoches.com/vehiculo/audi-a3/" 8 | }; 9 | {10 | Marca: "Azul";11 | Image: Azul;12 | Descripcion: "Carro con 4 puestos con baul";13 | PaginaWeb: "https://loscoches.com/vehiculo/audi-a4/"14 | };15 | {16 | Marca: "Rojo";17 | Image: Rojo;18 | Descripcion: "Carro con 4 puestos con baul";19 | PaginaWeb: "https://loscoches.com/vehiculo/audi-a6/"20 | };21 | {22 | Marca: "Morado";23 | Image: Violeta;24 | Descripcion: "Carro con 4 puestos sin baul";25 | PaginaWeb: "https://loscoches.com/vehiculo/audi-q2-2/"26 | };27 | {28 | Marca: "Naranja";29 | Image: Naranja;30 | Descripcion: "Carro con 4 puestos con baul";31 | PaginaWeb: "https://loscoches.com/vehiculo/audi-a3/"32 | };33 | {34 | Marca: "Verde";35 | Image: Verde;36 | Descripcion: "Carro con 4 puestos con baul";37 | PaginaWeb: "https://loscoches.com/vehiculo/audi-a3/"38 | }39 | ) Regresamos a la pantalla Screen1 y lanzamos la aplicación presionando F5. Luego, hacemos clic en el botón diseñado para llevarnos a ScreenCarros, que actualmente se encuentra en blanco. Una vez ejecutado para que la propiedad OnVisibl de la pantalla Screen1 entre en acción, salimos del modo de ejecución de la app para verificar que todo esté en orden. Para ello, nos dirigimos al extremo izquierdo, a la sección de Variables y dentro de Colecciones, comprobamos si el catálogo de carros se ha generado correctamente.
Al hacer clic en los tres puntos y seleccionar la opción Vista de Tabla observaremos que nuestra colección cuenta con seis filas. En esta vista, podemos apreciar las columnas de Descripción, Imagen, Marca, Página Web, y los registros correspondientes a cada una de estas categorías.
Artículo en construcción
