La documentación entera la podéis encontrar como siempre en los manuales técnicos de SharePoint, pero he querido dejaros aquí tres ejemplos bastante sencillos y típicos.
¡Vamos allá!
Color condicional según valor del campo
Este creo que es uno de los escenarios más típicos y que además está muy bien documentado en los manuales de Microsoft. Básicamente queremos dar un formato condicional a la celda de una columna en concreto según su valor. Podemos añadir tanto colores de fondo, como iconos al lado del valor, sustituir el valor del campo, cambiar el color de las letras... Vamos a dejarlo fácil para empezar y vamos a tomar de ejemplo este:
Nuestro campo "Rating" tiene 4 posibles valores: REJECTED, LOW, MEDIUM, ACCEPTED. Vamos a darle color a la celda según el valor. Podemos hacerlo desde la configuración de la lista, como también dándole a la flecha al lado del nombre de la columna:
Esto nos abrirá una nueva ventana a mano derecha con la opción de utilizar el editor que proporciona SharePoint para el formato condicional. Atención porque según el tipo de campo (Numérico, opción, texto...) nos predefine un solo template que podemos utilizar de manera user friendly. De momento utilizaremos este camino y veremos en otros ejemplos cómo editar directamente el JSON.
Le damos a "Edit template" para elegir los colores según nuestros valores (por defecto son en escala de azules). Asignamos a cada uno de nuestros valores el color que más se adecue a nuestras necesidades.
El resultado se asemeja a la experiencia de KPIs que vemos en las típicas listas de riesgos y oportunidades. Lo bueno es que cualquier usuario medio podría configurarlo y es bastante intuitivo. Vamos a ver qué se puede mejorar si aprendemos a tocar el JSON 😋
Añadir un botón a una columna
Si bien podemos llamar un flujo de Power Automate seleccionando el elemento de una lista o librería, ¿qué sucede cuando lo que queremos activar es un flujo de Logic Apps o una función de Azure? Tenemos soluciones con desarrollo, claro, pero una vez más podemos aprovechar el formato en JSON para añadir un botón de acción.
Tenemos una lista de Productos donde una vez se ha ido añadiendo toda la información, queremos lanzar un proceso alojado en Azure; añadiremos para ello primero, una columna "Acciones" de texto de una sola línea a la lista.
Abriremos la ventana de formato de la columna:
A continuación pegaremos este código:
Nuestro elmType es de tipo "a" y dentro incluye otro de tipo "button", el texto que aparece en el botón (en este caso "GO") se especifica en la propiedad "txtContent" y por último, los colores del borde del botón y fondo (entre otros) están incluidos dentro del atributo "style". En la propiedad "href" vamos a incluir la URL que debe llamar nuestro botón. Lo más seguro es que necesitéis una referencia al elemento, normalmente la ID, así que será necesario pasarle la ID también a la función externa a través de la URL.
No os olvidéis de incluir vuestra URL junto con la composición "=+URL" tal y como se muestra en el código.
En la URL, jugad con la concatenación de strings para pasar por parámetro la ID del elemento; simplemente para acceder a una de las columnas del mismo elemento que el botón deberéis indicar el nombre interno, en este caso [$ID].
'https://prod-12.westeurope.logic.azure.com/urlgenerator/Id/'+[$ID]+'?api-version=2016-06-01'
Y vamos a darle a Visualizar o Guardar:
El botón se visualizará de este modo:
Como extra os voy a dejar el código de la misma columna con botón doble jugando con elementos span. Realmente con el JSON podemos conseguir resultados bastante prácticos sin pelearnos con desarrollos.
Y así se vería en nuestra lista:
Porcentaje visual con color condicional
La idea en este siguiente ejemplo es seguir tirando del efecto condicional, pero esta vez en campos de porcentaje. Queremos mostrar visualmente un porcentaje y su total de completado. Para lograrlo partiré de un ejemplo de la documentación de Microsoft, pero añadiremos un punto extra al JSON.
Tenemos una lista de productos con un flujo de aprobación a 3 niveles, eso quiere decir que tenemos 3 columnas donde vamos guardando el valor de la aprobación de cada nivel. El flujo se tiene que ejecutar completo y el usuario final necesita transparencia para saber rápidamente en qué punto se encuentra la aprobación.
Para resolver esta necesidad crearemos una columna "Estado" de tipo texto que nos mostrará el % de completado del flujo de aprobación. Antes de continuar necesitamos identificar el nombre interno de las columnas donde se guarda la aprobación, en mi caso son "Aprobacion_mktg", "Aprobacion_ventas" y "Aprobacion_direccion" (son columnas que normalmente están ocultas a los usuarios).
Antes de continuar comentaros que no hace falta que guardemos ningún valor por defecto en la columna "Estado", lo introduciremos con el código JSON. ¡Vamos allá! Abrimos el editor de formato de la columna:
Al editor vamos a pegar el siguiente código JSON:
Y así se visualizaría en nuestra columna:
La clase por defecto "sp-field-dataBars" es de color azul, pero podríamos cambiar el estilo e incluso generar nuestra propio cálculo con formato en distintos colores. Pero todo esto es ya historia para otros entrada.
Por último me gustaría recomendaros que si generáis vuestro propio JSON más avanzado trabajéis con el Visual Studio Code y así reduciréis las pruebas que tendréis que ejecutar y os será más fácil su composición.
Espero traeros en un futuro una entrada con casos más complejos, pero también mucho más resultones.
.png)
Soy aficionada a la fotografía digital y analógica (mi querida Kiev 4A del 1972).
0 Comentarios