Menús desplegables relacionados en SharePoint Online

Hola a tod@s, en la siguiente entrada vengo a presentaros como resolver de forma sencilla, uno de los principales problemas que nos encontramos los desarrolladores de SharePoint desde sus orígenes en SharePoint On-Premise.

Quien no se ha topado en su vida laboral, con el clásico problema de tener que trabajar en las listas con los menús desplegables, que tienen que estar relacionados entre ellos. Como pueden ser la lista de comunidades autónomas y sus provincias en los datos de los clientes. O por poner otro ejemplo, si se trata de una empresa su negocio está relacionado con la automoción, donde la lista de modelos de los vehículos está relacionada con las marcas de vehículos que maneja la empresa.

Para resolver este tipo de problemas de datos relacionados en listas, se podía resolver desde los siguientes puntos de vista según en la versión de SharePoint se maneje:

• Implementación de formularios a medida a través de webpart clásicos o componentes SPfx que insertan los datos directamente en la lista.
• Implementación de columnas personalizadas en el lado del servidor como los ‘Custom Field’
• A través de ‘SharePoint Designer’, editando la página de edición de la lista y agregando código JavaScript, para alterar el comportamiento de los campos relacionados.
• A partir de SharePoint 2013, con la entrada de la funcionalidad ‘JSLink’ se permitía modificar las vistas y el comportamiento de las listas, aplicando ‘Client Side Rendering’ o directamente con JavaScript.
• Y en SharePoint Online, con la llegada de ‘Microsoft PowerApps’, la posibilidad de editar los formularios de las listas con esta herramienta.

En esta entrada del blog, se va a centrar en explicar cómo resolver este problema de disponer menús desplegables relacionados, utilizando ‘Microsoft PowerApps’. Pero hay que tener en cuenta las siguientes consideraciones a la hora de implementar este tipo de soluciones antes de comenzar.

• Analizar la complejidad de la lista, ya que si es muy compleja es más rentable hacer un formulario personalizado.
• Esta implementación, no es una implementación de ‘soluciones PowerApps’, por lo que no se puede exportar e importar en otros entornos del tenant de la organización.
• Esta implementación al no ser una solución, no hay variables de entorno, por lo que las conexiones que se realizan son ‘Hard-code’.
• La gestión al cambio, puede ser más complejas ya que hay que solventarla directamente sobre la propia lista, por lo que se recomienda disponer un entorno o colección de sitios de desarrollo para garantizar mejor su mantenibilidad o mejoras futuras.

Prerrequisitos

Antes de empezar a implementar las mecánicas para disponer de menús desplegables relacionados, se han de explicar las infraestructuras y configuraciones básicas para su implementación y futura gestión al cambio.

Para este ejercicio se va a contar con las siguientes listas:

• Lista de comunidades: destinada a contener las comunidades de España

• Lista de provincias: destinada a contener las provincias de España.

  Para establecer la relación de las provincias con la lista de comunidades, se ha creado una columna de tipo búsqueda para establecer esta relación.

  

• Lista de clientes: Destinada a contener la información de los clientes, entre los que se encuentra los datos de la comunidad y la provincia a la que pertenece cada cliente.

  Para establecer las relaciones entre la comunidad y la provincia del cliente, se han agregados o reutilizadas columnas de tipo búsqueda a las listas comunidades y provincias.

  

NOTA: Aun no es necesario, pero se recomienda tener las columnas de tipo búsqueda con la opción ‘Eliminación restringida’ en la sección ‘Relación’ de las listas configuradas para que no permita el borrado en cascada o la eliminación de elementos en la lista padre que afecte a las listas hijo.

Menús desplegables relacionados en formulario de edición

Los pasos que hay que realizar para relacionar los menús desplegables en un formulario de SharePoint Online los siguientes pasos:

1. Acceder a la lista donde se quiere cambiar el comportamiento de los menús desplegables en modo edición.

2. Pulsar la opción ‘Personalizar con PowerApps’ de la sección ‘Editar formulario’ al dar al botón ‘Nuevo’ para agregar un nuevo elemento a la lista.

   

3. Se abrirá una nueva ventana correspondiente a la herramienta ‘Microsoft Power Apps’ con el formulario de la lista en formato ‘PowerApps’

   

4. Crea una conexión a la lista hijo de la relación de menús desplegables. Para este ejemplo, la lista hijo es la lista de provincias.

   

   NOTA IMPORTANTE: Como este formulario de ‘PowerApps’ esta sincronizado directamente con una lista de una colección de sitios, las conexiones nuevas son conexiones directas a listas de la colección de sitios, y no se pueden usar variables de entornos de soluciones ‘PowerApps’

5. Desproteger la sección de la provincia en el formulario ‘PowerApps’, para poder cargar únicamente las provincias de una comunidad autónoma seleccionada.

   

6. En el propiedad/evento ‘Items’ del menú desplegable hijo de los menús desplegables relacionados, se establece la siguiente formular

   

   La composición del código es la siguiente:

   1. De la lista de provincias en SharePoint, se filtra aquellas provincias que pertenezcan a la comunidad autónoma seleccionada.

   2. Para evitar problemas con columnas del mismo nombre en los siguientes procesos, se cambia el nombre de la columna ‘ID’, por ‘IDProvincia’ a los resultados obtenido del filtrado anterior.

   3. Por cada elemento obtenido en el filtrado inicial, se obtiene las provincias que coincidan con los valores de configuración inicial del control.

      El comando ‘ForAll’ por cada iteración, dejará su información en un grupo de elementos.

   4. Como ahora se dispone las provincias en una lista de grupos que contienen datos, se procede a unificar los resultados obtenidos, eliminando la agrupación creada en el comando ‘ForAll’ a través del comando ‘Ungroup’.

   5. Para asegurar que los valores se presentan ordenados por el nombre de la provincia, se procede a ordenar los resultados obtenidos, por su valor.

7. Si se guarda estos cambios y se publica los cambios de la PowerApps, a la hora de cumplimentar el formulario de la lista para agregar nuevos elementos, al seleccionar una comunidad, solo se cargan las provincias relacionadas con esa comunidad autónoma.

   

8. Aun que ya se disponga de una carga correcta de los menús desplegables relacionados, hay que garantizar la integridad de la información guardada con la información de las otras listas relacionadas.

   

   Para garantizar esta integridad de la información, hay que establecer ciertos controles en el formulario de la PowerApps.

9. En la propiedad/evento ‘OnSave’ del componente ‘SharePointIntegration’, establecer el siguiente código, que se encarga de garantizar la integración entre la comunidad autónoma y la provincia seleccionada.

   

   La composición del código es la siguiente:

   1. De la lista de provincias, se obtiene la provincia que pertenezca a la comunidad autónoma seleccionada y a la provincia seleccionada en el menú desplegable.

   2. Se cuentan el número de elementos obtenidos en la consulta previa.

   3. Si no hay elementos encontrados, se notifica al usuario que los datos del formulario no son correctos, a través de un mensaje en pantalla.

      Por lo contrario, si hay elementos, se procede a guardar los datos del formulario en la lista de SharePoint Online.

10. Si se guarda y publica estos ajustes en el proceso de guardar el formulario, se puede comprobar que no permite guardar el formulario, si la información aportada, no son correctos.

    

11. Se vuelve a editar el formulario de PowerApps, para agregar unas funcionalidades, que mejoren la experiencia de usuario al editar los registros de la lista.

12. En la propiedad/evento ‘OnChange’ del menú desplegable padre, se introduce el siguiente código, destinado a controlar y reiniciar el menú despegable hijo de los menús desplegables relacionados, cada vez que el menú desplegable padre cambie su valor.

    

    La composición del código es la siguiente:

    1. De la lista de provincias, se obtiene la provincia que pertenezca a la comunidad autónoma seleccionada y a la provincia seleccionada en el menú desplegable.

    2. Se cuentan el número de elementos obtenidos en la consulta previa.

    3. Si no hay elementos encontrados, se notifica al sistema que hay que reiniciar el menú desplegable de las provincias.

       Si, por lo contrario, hay elemento, se notifica al sistema que no hay que reiniciar el menú desplegable de provincias.

    4. La notificación al sistema de si hay que reiniciar o no el menú desplegable de provincias, se almacena en una variable de contexto de formulario de la PowerApps.

13. En la propiedad/evento ‘Reset’ del menú desplegable hijo, se establece la variable de contexto que controla si el componente se tiene que reiniciar al estado inicial del formulario.

    

14. En la propiedad/evento ‘OnChange’ del menú desplegable hijo, se establece el valor ‘false’ en la variable de contexto destinada a reiniciar, ya que, si el valor del control cambia, ya no es necesario que se reinicie.

    

15. Si se guarda y publica estos ajustes realizados, se mejoran la experiencia de usuario a la hora de rellenar los elementos de la lista.

    A continuación, se muestra un ejemplo que como se comporta los menús desplegables relacionados, con las modificaciones realizadas en el formulario de la lista con PowerApps.

    

Realizados estos pasos, ya se pueden disponer de menús desplegables relacionados en los formularios de edición de SharePoint, sin tener que desarrollar componentes SPfx o inyectando JavaScript para alterar el comportamiento de la edición de la lista.

Recordad que se puede revertir los cambios realizados y volver a la versión original del formulario de la lista, accediendo a la opción ‘Configuración de formulario’ de la configuración de la lista.