Cómo personalizar el diseño de tus listas y formularios de Microsoft 365 sin código
Con las opciones de configuración y formato de listas de Microsoft Lists y SharePoint podemos personalizar la forma en la que se muestran las columnas, las vistas y los formularios de alta y edición de elementos sin necesidad de usar código a medida.
Una lista de SharePoint, Teams o Microsoft Lists es una colección de información que se puede compartir con las personas. Esta información consiste en un conjunto de elementos con metadatos. Cada uno de estos metadatos o propiedades se almacena en una columna.
Cuando se crea una lista, como mínimo tiene una vista asociada y formularios para crear y modificar los elementos que contiene. Las vistas son formas de presentar la información de la lista en el navegador y son personalizables. Por ejemplo, se pueden filtrar los elementos por la fecha de creación o modificar las columnas que se muestran, bien para ampliar la información, bien para reducirla.
Aunque la configuración básica de las listas permite personalizar vistas y formularios, es muy común desarrollar código a medida para adaptarse a las necesidades de los clientes, tanto de diseño como de funcionalidad. Sin embargo, no siempre es necesario. Conocer todas las posibilidades puede ahorrar tiempo de desarrollo y facilita el mantenimiento por parte de los usuarios.
- Algunas personalizaciones las podremos aplicar mediante opciones de configuración de las columnas.
- Otras, cuando la presentación depende del valor de otra columna, se aplican mediante el uso de fórmulas condicionales.
- Por último, otros formatos se aplican construyendo objetos JSON que sustituyen la visualización predeterminada.
Es este último punto, una novedad de 365 mediante la que, siguiendo una estructura definida, se puede describir los elementos HTML que se muestran cuando un campo se incluye en una vista de lista o en un formulario y los estilos que se aplican a esos elementos.
Las vistas son formas de presentar la información de la lista en el navegador y son personalizables
Es importante tener en cuenta que el formato aplicado no cambia los datos, únicamente cómo se muestran.
Preparación del ejemplo
Para hacer una prueba, accedemos a Microsoft Lists y creamos una lista con la plantilla “Seguimiento de problemas”. Añadimos estas nuevas columnas:
- Comentarios, de tipo “Varias líneas de texto”. Contendrá anotaciones sobre la tarea.
- Solución, de tipo “Varias líneas de texto”. Queremos que sea obligatorio añadir un comentario cuando el problema esté resuelto.
- Pantalla, de tipo elección.
- Fecha de corrección de tipo “Fecha”. Haremos que el nombre interno sea “Fechacorreccion” creándola primero con este nombre y posteriormente modificando el nombre a “Fecha de corrección”.
Reorganizar, mostrar y ocultar columnas
Para mostrar la información de forma que facilite su lectura y edición, en ocasiones es necesario ajustar el orden de las columnas en la vista o en el formulario. Los pasos para esta ordenación son los siguientes:
En los formularios
- Abrimos el formulario pulsando en “Nuevo”.
- Seleccionamos el menú de edición de columnas.
- Arrastramos las columnas en el orden que queremos verlas.
- Marcamos o desmarcamos las columnas que deseamos que se muestren. Ten en cuenta que, si una columna es obligatoria, no se puede desmarcar.
En las vistas
En las vistas, estos cambios pueden ser realizados mediante el menú contextual de la columna. Para cambiar el orden, es posible, además, arrastrar las columnas a la posición deseada.
Mostrar y ocultar columnas en base al contenido de otras
En nuestro ejemplo, cuando se resuelve un problema, queremos disponer de más información sobre la solución llevada a cabo. Haremos que la solución esté visible únicamente cuando el estado del problema sea “Completado”. La fecha de corrección también se visualizará únicamente cuando el estado sea “Completado”.
Para esto debemos usar las fórmulas condicionales y seguiremos los siguientes pasos:
- Abrimos el formulario pulsando en “Nuevo”.
- Seleccionamos el menú de edición de columnas.
- En el menú contextual de la columna Solución hacemos clic en “Editar fórmula condicional”.
- Incluimos la fórmula =if([$Status] == 'Completado', 'true', 'false'). Recuerda que los nombres de las columnas en las fórmulas deben ser los nombres internos, que deben ir precedidos por “$” y entre corchetes. En el ejemplo, el nombre interno de la columna “Estado” es “Status”.
- Incluimos la misma fórmula en la columna fecha de corrección.
Puedes ver ejemplos sobre las fórmulas condicionales según los tipos de campos aquí.
Modificación del formulario
Mediante la configuración del formulario podemos describir cómo será la cabecera, pie y la estructura del cuerpo. En este caso debemos aplicar el formato mediante objetos JSON.
En nuestra lista de ejemplo, hay campos relacionados con la descripción del problema, otros que amplían la información y otros que nos permiten realizar un seguimiento. Teniendo en cuenta esto, nos sería de gran utilidad agrupar los campos en estas secciones que organicen los campos. Además, vamos a modificar también la cabecera para personalizarla con un título e icono nuevo.
Puedes encontrar toda la información necesaria sobre la estructura de los objetos JSON y ejemplos desde los que partir en la aquí.
Encabezado
Esta vez, desde el menú mostrado en el formulario “Nuevo”, seleccionaremos la opción “Configurar diseño” y primeramente configuraremos el encabezado.
Copiamos el JSON de la sección encabezado de la página de Microsoft. Observa en la siguiente imagen cómo, con una estructura predefinida, se va construyendo el HTML que contendrá la cabecera. En este caso, un icono y un texto con estilos personalizados.
- Para icono, podemos incluir cualquiera de los proporcionados por FluentUI (https://developer.microsoft.com/en-us/fluentui#/styles/web/icons). En nuestro caso, dado que se trata de una lista de seguimiento de problemas, vamos a usar “WorkItemBug”.
- El texto contendrá la palabra “Problema” y el título del elemento. Observa que, a medida que se modifica el título, va cambiando también el encabezado. Se puede utilizar cualquier columna del elemento precedido por “$” y entre corchetes.
Esta es la diferencia entre el encabezado por defecto y con nuestra modificación:
Cuerpo
En la configuración del diseño del formulario, escogemos el valor “Texto” del desplegable. Recuerda que nuestro objetivo esta vez es facilitar la cumplimentación, agrupando la información en:
- Datos básicos del problema.
- Datos de seguimiento.
- Más información.
Copiamos el JSON de la sección “Configurar un cuerpo personalizado con una o varias secciones” de la página de Microsoft y lo modificamos adaptándolo a nuestro ejemplo:
- Cada sección puede tener un título.
- En “fields” tenemos que incluir los “display names” de todas las columnas que se incluirán en la sección.
- Incluimos una sección vacía que contendrá otros campos visibles que no se han incluido en el resto de secciones.
Así es como queda nuestro formulario modificado, que además, tiene un diseño responsive.
Recuerda que las columnas “Solución” y “Fecha de corrección" se mostrarán cuando el estado sea “Completado”.
Si repetimos los pasos de la organización de columnas, verás cómo ahora también se incluyen las secciones:
Dispones de muchos más ejemplos de formato de listas en la página de PnP: https://pnp.github.io/List-Formatting/formsamples/
Validaciones
Por último, vamos a validar que los datos introducidos cumplen los siguientes requisitos:
- La fecha de la notificación no puede ser mayor que el día de.
- La fecha de corrección sea igual o mayor que la fecha de notificación.
Podemos incluir validaciones de los valores de una columna o de varias columnas del formulario mediante el uso de las fórmulas condicionales, que se pueden aplicar tanto a la validación de una columna como al formulario completo.
Es importante tener en cuenta que solo se puede incluir una validación a nivel de lista, por lo que el mensaje de error debe ser claro e incluir el detalle de todos los datos validados.
En nuestro formulario
- En la vista, seleccionamos “Editar” de la columna “Fecha de notificación”.
- En “Validación de columna” incluiremos la fórmula “=DateReported<TODAY()”. El mensaje de error será “La fecha de notificación no puede ser mayor que el día actual”.
- En la configuración de la lista > Configuración de validación, incluimos la fórmula “=[Fecha de corrección]>=[Fecha de notificación]” y el mensaje “La fecha de corrección debe ser igual o mayor que la fecha de notificación. La fecha de notificación no puede ser mayor que el día actual.”
Una vez configurado, al crear un nuevo elemento con fechas incorrectas, se mostrarán los mensajes de validación:
Modificación de una vista
Al igual que ocurre con los formularios, podemos aplicar formato a una vista de lista mediante la configuración. En caso de no cubrir todos los casos, tenemos la opción de modificar el JSON asociado.
Podemos aplicar formato a:
- Columnas.
- Vistas. En este caso, hay dos tipos de diseño:
- Diseño de lista: los elementos se muestran como en una tabla.
- Diseño de galería: los elementos se muestran en cajas.
En nuestro ejemplo, vamos a realizar estas modificaciones desde la opción “Formato de la vista actual”:
- Modificar la columna “Estado” según su valor con colores e iconos.
- Accede a la modificación del formato de la vista actual.
- Pulsa en “Aplicar formato a columnas”.
- Elige la columna “Estado” y en “Colores de fondo” edita los estilos:
- Marcar en rojo todo el elemento si la prioridad es “Critica” y llevan más de 5 días pendientes de solución:
- Accede a la modificación del formato de la vista actual.
- Pulsa en “administrar las reglas” del “Formato condicional”.
- Crea la siguiente regla:
Con las opciones que tenemos no podemos poner como regla que la fecha de notificación sea menor que Hoy menos un número de días, por lo que en esta ocasión, tenemos que modificar el JSON asociado al formato.
- Pulsamos en “Modo avanzado” y modificamos el JSON para restar 5 días a la fecha de notificación.
La vista ahora se mostrará así:
Conocer las posibilidades de configuración de las listas te permite sacar el máximo partido para facilitar el acceso a la información y hacerla más atractiva. Es posible que, en muchos casos, evite recurrir al uso de código y hacerlo mantenible por usuarios