Desarrollo de una aplicación demo con Power Apps y SharePoint Un viaje autodidacta

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

En este proyecto, desarrollé una aplicación demo utilizando Power Apps y SharePoint. Comencé creando una lista en blanco en SharePoint para almacenar la información necesaria. Luego, conecté Power Apps a esta lista y diseñé la interfaz de usuario en Power Apps, incluyendo pantallas de inicio de sesión y formularios de registro.

Implementé la autenticación de usuarios y validación de credenciales utilizando funciones simples como Lookup y Notify. Desarrollé procesos para agregar, editar y eliminar registros en la lista de SharePoint directamente desde la aplicación Power Apps.

Finalmente, personalicé visualmente la aplicación mediante la adición de imágenes, botones y diseño de formularios. Este proyecto me permitió explorar y aprender sobre el desarrollo de aplicaciones con Power Apps y SharePoint de manera autónoma.

 

CREAMOS UN APP DEMO DE UN APP CON POWER APPS ,Y SHAREPOINT.

Primero creamos una lista en blanco en SharePoint. Imagen 1 en el  sitio donde almacenaras la información.

 

Segundo Creamos una lista en blanco , el cual le colocaremos para este ejercicio El nombre de información  personal, recuerda que esta app es un demo de como utilizar Power apps, con SharePoint. Imagen 2

 

Luego de estar creada nuestra lista , realizaremos una modificaciones , iniciales , las cuales serán , básicas de editar , nos dirigimos a configuración de la lista, imagen 3

En esta opción , Seleccionamos configuración avanzada, en el cual seleccionaremos imagen 4

Dentro de esta opción marcamos como si Donde dice desea permitir la administración de contenido , le decimos que si . imagen 5

 

Luego de esta modificación empezamos a crear las columnas , para este  ejemplo que sera de crear permisos , seleccionaremos , primero la columna Empleado . Tambien crearemos 3 columnas mas que seran FechaInicioPermiso, FechaFinPermiso y CantidadDias.

 

Como vemos tenemos nuestros campos creados con las opciones columnas de esta app de demo , asi entraras en tus primeros pasos de como usar Power Apps imagen 7

 

Ahora , nos conectados a power apps, en el cual usaremos la conexión hacia nuestra lista de SharePoint , seleccionaremos desde un lienzo imagen 8 y 9

Buscamos la conexión a a nuestro SharePoint, para que funcione correctamente, conectándonos a nuestro sitio creado imagen 10

 

Luego de tener todo conectado, empezamos a editar nuestra app, lo primero que aremos es renombrar nuestra pantalla con el nombre de bienvenida, añadirnos otra donde insertaremos los registros imagen 12.

 

Ahora pasamos a añadir nuestro primer , texto, que sera nuestro encabezado , en mi caso utiliza Gestiona tus permisos, añadiendo tambien un logo o una imagen , que yo añadire el logo de mi blog imagen 13 y 14

La Ventana de usuario, crearemos un login fácil y sencillo en el cual usaremos específicamente, Es decir crearemos dos propiedades de entrada una de usuario y otra de contraseña, imagen 14, en el place holder le colocamos el nombre a cada una de estas .

 

Para tener en nuestros botones la opción de placeholder, es en la propiedad del botón llamada HintText, en la imagen 15

Ahora para colocar en modo password, nuetro input de tipo contraseña utilizaremos específicamente, la propiedad , en la propiedad Mode, escribimos , TextMode.Password, para que salgan ocultos. Imagen 16

 

Insertamos lineas verticales y horizontales para darle un poco mas de diseño personalizado a nuestro ventana de bienvenida, y claro esta colocando en el lienzo nuestro botón de Ingreso imagen 17

 

Ahora debemos crear específicamente un paso a paso para , tener una lista desplegable de nuestros usuarios y contraseña, vamos a ello la crearemos como ya sabes, en SharePoint, imagen 18

Como en pasos anteriores creamos nuestras columnas de la misma manera lo crearemos acá, con los procesos de revisión en cada caso, es decir, creamos, una columna de usuario y contraseña

Insertamos el primer dato (De prueba para garantizar nuestra interactividad) Imagen 19

 

Conectamos nuestra apps a sharepoint, con nuestra nueva lista
imagen 20

Ahora desarrollaremos un poco de código utilizamos funciones super fáciles, para validar si el usuarios y contraseña están correctos

If(IsBlank(LookUp(InformacionContactoContraseña;Usuario=TextInput1.Text And Contraseña=TextInput1_1.Text));»»;Navigate(Añadir_Registros))

 

Este es el código en primera instancia que crearemos, el cual Con lokup, hace un buscar en las columnas de nuestra lista , si el texto introducido, en los inputs , son iguales a lo que tenemos en las lista.

Si es asi pasa a ser validado por isblank el cual confirma si viene o no la búsqueda en blanco o con dato, si viene con dato pasa a la siguiente pagina utilizando el navigate, para el caso negativo crearemos una notificación de que están mas los datos ingresados

Imagen 21

 

Vamos a analizar diferentes, procesos en los cuales manejamos, cuando luego de que salga error , nos devuelva una alerta o una notificación indicando que las credenciales son incorrectas , usando la propiedad de Notify

If(IsBlank(LookUp(InformacionContactoContraseña;Usuario=TextInput1.Text And Contraseña=TextInput1_1.Text));Notify(«Creedenciales erradas»;NotificationType.Error;5000);Navigate(Añadir_Registros))

En la misma formula pero en la parte lógica verdadera imagen 22

Ahora en la pestaña de Navegación (Que le termine cambiando el nombre porque me gusto más como navegación), Añadimos par de botones en los cuales manejamos, diferentes procesos, Solicitar y ver permisos, claro está el botón de salir. Imagen 23

Ahora pasamos a registrar específicamente, a crear la vista donde crearemos nuestros registros, es decir donde los insertaremos en la base de datos, insertamos un formulario de edición asociado a nuestra lista de SharePoint imagen 24

Empezamos a editar específicamente, nuestro formulario con el cual crearemos y asociaremos el nombre de nuestro usuario logueado , en Default , escribimos en la formula User(), para que cargue nuestro usuario , usuario().fullname, en el cual tendremos el usuario full. Imagen 25

 

Para que Logremos ver la cantidad de días que deseamos ver , hacemos esta formula en el input de cantidad de  días DateDiff(DataCardValue3.SelectedDate; DataCardValue4.SelectedDate)

Para obtener la cantidad final de días  imagen 26

Para visualizar nuestro formulario, lo coloco manualmente en la vista Añadirnuevoregistros, y escribimos nuevo formulario NewForm(Formulario)

Imagen 27

Seguimos con los cambios manuales que tenemos que hacer en nuestro editor de registros, es decir modificamos los procesos visuales, de los inputs imagen 28

Ahora procedemos a crear nuestro botón de guardar registro creado, y que este cumpla su función , en la propiedad onselect, colocamos submit(Y el nombre del formulario en los paréntesis), tambien creamos el botón volver a nuestro app en la navegación imagen 29

Ahora bien para que luego de enviar nos direccione a la vista de navegacion , en la misma formula del onselect  colocamos SubmitForm(Formulario);;Navigate(Navegacion)

 

Luego creamos la vista visualizar permisos , para en nuestra app de tipo demo podremos observar nuestros permisos  , creando una galería vertical en la cual podrás observar cada proceso ,de tus solicitudes , en la galería vertical , para la imagen , llamamos a la función user, es decir a la función en la cual estamos trabajando, para este caso sera asi user().image imagen 30

Ahora creamos una nueva ventana , en la cual editaremos nuestros registros , en esta nueva ventana ingresamos un formulario de presentación , editando visualmente nuestro formulario de presentación imagen 31 y 32

Lo que realizaremos es desde la vista ver , editaremos específicamente , este proceso usando Si variables, enviaremos de un formulario a otro los datos con variables, super fácil verdad , para poder crear, esto , vamos a ello , lo primero será crear la variable que me almacene el item a editar Set(VarPermiso;ThisItem);;Navigate(Editar_eliminar_permisos)

 

Ahora editamos donde se recibirá , el formulario para ser editado o eliminado, el formulario tiene una opción llamada item en la cual se almacena la información , en esta se pasamos nuestra variable VarPermiso, añadimos dos botones , para completar nuestro CRUD , el cual sera eliminar y editar, modificamos el editar recuerda en la propiedad onselect, añadimos esta formula , Remove(InformacionPrincipal;VarPermiso);;Navigate(VerPermisos)la cual se encarga de eliminar de la lista de SharePoint,en base al item de la variable  imagen 33

 

Ahora para el botón editar en la propiedad onselect colocamos la siguiente línea de código Navigate(Añadir_registro);;EditForm(Formulario)

La cual nos servirá, para poder editar , el formulario con el actual que ya tenemos pasándole la variable.  Y en el formulario le sesteamos nuestra variable creada por medio del item imagen 36,37

 

Con todos estos pasos te vas aprendiendo power apps, y SharePoint.

En resumen, el desarrollo de esta aplicación demo utilizando Power Apps y SharePoint ha sido una experiencia enriquecedora y educativa. A través de este proyecto, he adquirido una comprensión más profunda de cómo crear aplicaciones de manera eficiente y efectiva utilizando estas herramientas.

He aprendido a diseñar interfaces de usuario intuitivas, implementar funcionalidades de autenticación y validación, y conectar la aplicación a una base de datos en SharePoint para almacenar y gestionar datos de manera segura.

Además, este proyecto me ha enseñado la importancia de la planificación y la organización en el desarrollo de aplicaciones, así como la capacidad de adaptarse y solucionar problemas en el camino.

En general, estoy satisfecho con el resultado de este proyecto y emocionado de seguir explorando y desarrollando mis habilidades en el mundo de las aplicaciones con Power Apps y SharePoint.

 

Para ver la app en vivo,  Link de mi canal en YouTube:
https://youtu.be/AOG8fLXJGjo?si=tHkUXdRFR9-xS36h

Vicente Antonio Juan Magallanes.

Loading

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *