¡Bienvenidos, muy buenos días tardes o noches , según donde me leas !

En este artículo, exploraremos paso a paso cómo crear una aplicación de ejemplo en Power Apps utilizando datos de Excel. Desde la transformación de datos hasta la personalización del diseño, guiaremos a los lectores a través del proceso de desarrollo de una aplicación funcional y atractiva.

Comenzaremos por explicar cómo transformar los datos de Excel en una tabla y subirlos a OneDrive para facilitar su acceso. Luego, mostraremos cómo conectar estos datos a Power Apps y generar automáticamente pantallas básicas para buscar, editar y listar/detalles.

Continuaremos personalizando el tema y el diseño de la aplicación, utilizando colores y orientación específicos para mejorar la experiencia del usuario. También abordaremos la creación de una portada atractiva utilizando herramientas como Canvas y PowerPoint.

 

El diseño inicial es un app desde Excel para poder desarrollar y trabajar con ella.

Primero se transformarla el Excel a tabla , para  tener nuestra data inicial.

 

Esta app sera un app de ejemplo para mostrar específicamente, vehículos en ventas es una demo. Imagen 1

 

 

Debemos subir nuestro fichero a one drive imagen 2

Nos movemos a conectarnos a una app en power apps , usamos la conexiones desde un Excel imagen 3

Abrimos en la cuenta de one drive donde alojamos la información necesaria imagen 4

, seleccionamos nuestra tabla y nos conectamos

Nos cargara y creara 3 pantallas de manera automática imagen 5

Buscar, editar y listar o detalles .

Recordemos que este es un demo para crear tu app básica con estos pasos , en este caso es para ofrecer Coches y Motos

Esta ves seleccionaremos un tema diferente, un color negro y amarillo predeterminado imagen 6

 

Pasaremos a modo horizontal, dado que en blog pasado nunca lo realizamos, para este paso a paso, realizaremos , en la opción de configuración , dentro de la ventana de dialogo donde dice mostrar , lo pasamos a horizontal imagen 7 y 8

Creamos dos paginas más imagen 9

Para la portada de nuestra app tipo demo lo que debemos crear es un diseño personalizado, referente al tema para editar yo utilizo canvas y power point, con estos dos nos bastaría para la presentación inicial  , se realizan modificaciones , personales para nuestra portada.imagen10

 

Referencias de la imágenes en :

https://pixabay.com/es/illustrations/motocicleta-bicicleta-moto-569865/

Para editar fondo y colores
https://pixlr.com/

 

Ahora bien insertamos un botón y un artículo de texto el primero lo modificaremos para que nos lleve , estilo menú, y el texto para  asignar nuestro titulo de la app , sumamos a ello una figura circular , y las opciones de reordenamiento dentro del lienzo activándolas con botón derecho del ratón , con estas opciones podrás utilizarlo. Imagen 11

Luego configuramos el botón , para que nos lleve al menú de navegación y así poder utilizar el proceso normalmente , recuerden esto lo realizaremos con un navigate

Navigate(Menu);;ScreenTransition.Fade imagen 12

 

Ahora pasaremos a editar y crear nuestro menú de negación donde podremos seleccionar desde tres tipos de categorías , Automóvil , Camioneta o motocicleta .

 

Para crear imágenes personalizadas solo con un mensaje y utilizando la creatividad, te dejo acá el link el cual utilice para las tres imágenes de mi menú , creamos nuestra imágenes con https://www.krea.ai/apps/image/realtime, el cual es una maravilla para crear imágenes. Sin costo (Hasta la creación de esto post tres imágenes descargadas sin costo alguno.)Estas sumado a ello creamos los botones que filtraran nuestra galería visual enviando el tipo de transporte a visualizar en nuestra galería destino

imagen 13 y 14

 

Editando la galería ,La lógica en este caso será pasar el prefiltrado hacia la galería cuando demos clic , creamos una colección, con la siguiente formula
ClearCollect(Coleccion; Filter(Tabla1; TIPO = «Camioneta»));;

Navigate(BrowseScreen1;ScreenTransition.CoverRight);;

 

Pasandole la variable Camioneta , y asi con las dos otras opciones Imagen 15

 

Para darle un poco mas dinamismo , creamos específicamente dos modificaciones puntuales, que son para editar y enviar variables tanto para seleccionar la imagen enviado como el nombre del tipo de transporte
Set(numero;»1″);;

Set(seleccion;»Camioneta»)

Imagen 17

 

Y creamos en la pagina receptora las modificaciones

If(numero=»1″;Camioneta_ia;If(numero=»2″;coche_ia;If(numero=»3″;moto_ia)))

Imagen 18

 

Ahora procedemos a activar las imágenes de nuestra galería, para poder visualizar la imagen de tipo URL con la imagen ThisItem.URL_FOTO

 

Ahora empezamos a editar , la vista de detalle , para darle un poco mas de profesionalidad y un toque agradable al diseño., añadiendo transparencia , a las imágenes y personalizando el formulario. Imagen 19
Por ultimo utilizamos en cada acción de nuestro CRUD, unos mensajes, y direccionando a la pagina de menú luego de cada acción.