Apps Personalizadas Usando Power Apps y SharePoint

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

En este proyecto, replicaremos el caso de Rezza para desarrollar una aplicación eficiente utilizando Power Apps y SharePoint. El objetivo principal es crear y configurar listas en SharePoint, las cuales se integrarán con Power Apps para gestionar los datos necesarios en el seguimiento de estudiantes. Este proceso incluirá la creación de columnas específicas, la configuración de botones modernos, la conexión de datos, y la implementación de controles modernos para una funcionalidad óptima. Además, se abordarán aspectos importantes como la validación de datos, la actualización y eliminación de registros, y la implementación de ventanas emergentes para confirmaciones de acciones.

Replicaremos el caso de rezza, para poder tener en nuestro desarrollo las apps que necesitamos:

  • Crear el modelo las listas el sitio en sharepoint.

 

Colocaremos diferentes columnas en cada unos de los procesos para validar el acceso al contenido y validar sus datos, primero será crear una lista especifica.

 

Creamos 6 columnas las cuales necesitamos manejar tres de texto, dos de seleccione una de fecha y otra de Casilla de verificación

 

Conectaremos esa lista de SharePoint a power apps , recordemos que copiamos y pegamos la URL y será la opción de seguimiento de estudiante

Para empezar a inserta botones y cambios, utilizaremos la opción de botones modernos, activándola en las configuraciones i

 

Toda la operación se realizara en una galería vertical blanca y conectando a nuestro origen de datos que es el SharePoint

 

Para activar los controles modernos los activamos en este apartado.

 

Insertaremos en la galería una propiedad para cada caso es decir un atributo para cada uno de ellos y que funcionen de manera eficiente

Para TITULO  UNA ENTRADA de texto para el apellido también y asi con cada campo

 

Continuamos ahora para conectar los datos.

Para empezar alimentar por ejemplo a los datos de validación de texto son los siguientes.

ThisItem.Apellido

La parte fundamental , cuando usamos un desplegable, tenemos dos opciones de cargar información , una Choices(Seguimiento_Estudiante.Materia), para poder meter la información en la propiedad ítems y otra luego en defaultsselectitems, esta segunda es para aterrizar el datos que necesitamos , pero solo si la columna la cual se tendrá el input es con la validación de carácter único ,es decir que los datos que tenemos , en nuestros SharePoint nuestra columna, es de selección , si que funcionara ,pero si no es de selecciono , y el origen de datos es SQL o cualquier otro que no permite esta distinción toca colocar distinct(FUENTES;THISITEM.Columna)

Distinct(Seguimiento_Estudiante;ThisItem.Grado)

En lo que corresponde al atributo de fecha , no existe , ya la propiedad  value asi que en ese caso se seleccionara o se ubica el código en otro lugar , yo lo coloque en ThisItem.Fecha

En selecteddate , y la propiedad casilla , usaremos cheked la cual nos sirve para con este código ThisItem.Activo

Ahora para poder guardar la información utilizamos un paso muy interesante el cual es con el botón oculto .

El cual tendrá la lógica de acción para activar la funcionabilidad del código If(IsBlank(LookUp(ColeccionEstudiantes;ID=ThisItem.ID));

Collect(ColeccionEstudiantes;ThisItem));;

UpdateIf(ColeccionEstudiantes;ID=ThisItem.ID;{

Título:TextInputCanvas1.Value;

Apellido:TextInputCanvas2.Value;

Materia:DropdownCanvas1.Selected;

Grado:DropdownCanvas1_1.Selected.Value;

Fecha:DatePickerCanvas1.SelectedDate;

Activo:CheckboxCanvas1.Checked

 

})

 

Este  es usado tiene ambas  casos cuando se use un dato de origen sql  o de tipo selección en SharePoint , ahora este código esta almacenado en el botón que desactivaremos visualmente, pero que en la propiedad onchange de cada botón , colocaremos , Select(ButtonCanvas2)

, es decir que cada ves que se modifique algo se realizara un clic activando el código empleado , dentro del botón.imagne 10

Para la propiedad casilla , seleccionamos onselect para que funcione correctamente ,

 

Ahora metemos el botón que guaardara la información Patch(Seguimiento_Estudiante;

ShowColumns(ColeccionEstudiantes;

Título;

Apellido;

Materia;

Grado;

Fecha;

Activo;

ID))

Lo que hace es actualizar la información que se tiene modificada y pasando el patch y las columnas de mi conexión fundamental el ID para que haga el update con el where

Pero para evitar errores extraños no usare los controles nuevos solo utilizare los controles antiguos.

Procedo a explicar como alimentar información de estos controles de manera correcta, para los de entrada de texto antiguos , realizas el siguiente paso a paso, para lo que son entrada de texto ThisItem.Nombre_real

, y en onchange, seleccionamos el botón oculto que me crear mi colección.

Para nombre y para apellido

Ahora los desplegables en default se coloca, ThisItem.Materia.Value , pero el .value va por que la columna de SharePoint es de selección, y en ítems va asi Choices(Seguimiento_Estudiante.Materia), recordemos que es de selección en SharePoint, para grado es diferente por que son de texto entonces en default va sin el value ThisItem.Grado,

Dado que este caso si que funciona de manera correcta, Distinct(Seguimiento_Estudiante;Grado), para que cargue el listado e información.

El de fecha si que lo deje.

Y el de casilla use también el anterior en default usamos ThisItem.Activo_1, para la casilla antigua, lo que cambia es como capturamos la información en  la creación de colección

 

Eso es la siguiente explicaron

Este es el código que crea la colección

If(IsBlank(LookUp(ColeccionEstudiantes;ID=ThisItem.ID));

Collect(ColeccionEstudiantes;ThisItem));;

UpdateIf(ColeccionEstudiantes;ID=ThisItem.ID;{

Nombre_real:TextInput1.Text;

Apellido:TextInput2.Text;

Materia:Dropdown1.SelectedText;

Grado:Dropdown2.SelectedText.Value;

Fecha:DatePickerCanvas1.SelectedDate;

Activo_1:Checkbox1.Value

 

})

Cambian pasos en lugar de value es text  para ciertos botones

Ahora procedemos a validar

Creamos dentro del pacth un if error para validar si da error y envia algún mensaje de alerta

IfError(

Patch(

Seguimiento_Estudiante;

ShowColumns(

ColeccionEstudiantes;

Nombre_real;

Apellido;

Materia;

Grado;

Fecha;

Activo_1;

ID

)

);

Notify(«Error al actualizar»; NotificationType.Error; 3000);

Notify(«Actualizados»; NotificationType.Success; 3000)

);;

Clear(ColeccionEstudiantes)

 

Ahora supongamos que deseamos

Empezamos a ajustar visualmente la presentación para que quede muchos mas bonita y visual.

 

Reutilizaremos el código de actualizar de manera interesante dado que si cambiando los pasos lo desea a la normalidad se añade un  botón de actualizar

Primero a la conexión de la galería se le activa un filter , a la conexión que viene de sharepoint Filter(Seguimiento_Estudiante;varrefrescar)

Para que refresque en base a la variable cuando presionemos refrescar

Al botón refrescar lee pasamos este Clear(ColeccionEstudiantes);;Set(varrefrescar;false);;Set(varrefrescar;true)

Ahora creamos el código nuevo

Patch(Seguimiento_Estudiante;

Defaults(Seguimiento_Estudiante);

{Nombre_real:»Nuevo Estudiante»})

 

La lógica acá es para registrar específicamente, los datos completos, para que se registre la información

Ahoora el botón de eliminar para poder eliminar el paso a paso creado con anterioridad.

Remove(Seguimiento_Estudiante;ThisItem);;Clear(ColeccionEstudiantes);;

Notify(«Eliminado correctamente»;NotificationType.Error)

 

Ahora agregaremos una ventana emergente, en la cual podremos tener específicamente, el diseño total, la cual se crean en base a diferentes rectángulos para dar la apariencia visual de las típicas confirmaciones de datos y sus validaciones.

Para cada objeto visual tiene una propiedad llamada visible la cual funciona manera eficiente con true o false pues la lógica es sencilla se coloca true en un caso o false en otro

Set(VentanaEmergente;false)

 

Ahora quien activara estas ventanas el botón de borrado de que insertamos en la galería, la cual contiene el item seleccionado al darle clic con el botón de eliminar

Set(VentanaEmergente;true)

Para que todos sena visible = true

El botón de eliminar contendrá Remove(Seguimiento_Estudiante;Gallery1.Selected);;

Set(VentanaEmergente;false)

 

 

Tenemos nuestra APP demoooo diseñada y explicada en totalidad

 

Link del video

https://youtu.be/h7zcOBw3F3E

 

Al finalizar este desarrollo, habremos creado una aplicación funcional y eficiente que integra SharePoint y Power Apps para el seguimiento de estudiantes. La aplicación contará con una interfaz moderna y fácil de usar, aprovechando las capacidades de los controles modernos y las funcionalidades avanzadas de Power Apps. La implementación de procedimientos para la validación y actualización de datos garantizará la integridad y precisión de la información manejada. Este proyecto no solo demuestra la viabilidad de integrar estas herramientas de Microsoft, sino también cómo optimizar los procesos de gestión de datos en un entorno empresarial.

 

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 *