Formato de Columna en Listas

Formato de Columna en Listas SharePoint

Las listas de SharePoint permiten almacenar y gestionar datos de manera organizada dentro de un sitio. Para mejorar la visualización y usabilidad de los datos, es posible aplicar formato de columna mediante JSON. Esto permite personalizar la apariencia y funcionalidad de los valores sin modificar los datos subyacentes.

¿Qué es el Formato de Columna en SharePoint?

El formato de columna en SharePoint permite personalizar cómo se muestra la información en una lista utilizando JSON. Según el tipo de columna, existen diferentes opciones para aplicar formato:

- - Color de relleno: Para columnas de fecha, sí/no y opciones.
- - Barras de datos: Para columnas numéricas.
- Formato avanzado: Para cualquier otro tipo de columna mediante JSON. https://youtu.be/oYHstG532Sc

Convertir una columna «Email» en un hipervínculo

Si tienes una columna llamada «email» y deseas convertir sus valores en enlaces para enviar correos electrónicos, usa el siguiente JSON:

{
    "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
    "elmType": "a",
    "txtContent": "@currentField",
    "attributes": {
        "href": "='mailto:' + @currentField"
    }
}

📌 ¿Qué hace este formato?

- - Muestra el email como un enlace clickeable.
- Al hacer clic, abre la aplicación de correo predeterminada.

Convertir una columna «Web» en un hipervínculo

Si tienes una columna llamada «Web» con URLs y quieres que sean enlaces activos:

{
   "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
   "elmType": "a",
   "txtContent": "@currentField",
   "attributes": {
      "target": "_blank",
      "href": "='http://' + @currentField"
   }
}

📌 ¿Qué hace este formato?

- - Convierte el texto en un enlace.
- - Agrega «http://» si la URL no lo tiene.
- Abre el enlace en una nueva pestaña.

WhatsApp (abrir chat con número en `wa.me`)

Requisito: guarda el teléfono en formato internacional sin + ni espacios (ej. 34600111222).

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "='WhatsApp'",
  "attributes": {
    "target": "_blank",
    "href": "='https://wa.me/' + @currentField"
  }
}

Teams (abrir chat con una persona por email)

Requisito: en la columna guardas el UPN/email (ej. persona@empresa.com).

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "='Chat en Teams'",
  "attributes": {
    "target": "_blank",
    "href": "='https://teams.microsoft.com/l/chat/0/0?users=' + @currentField"
  }
}

Convertir una columna de Texto en un Botón

Crea una columna tipo texto llamada «Para Firmar» y copia este código JSON en el formato de la columna para poner un botón:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Ejecutar flujo",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\":\"AQUI_EL_ID_DEL_FLUJO\"}"
  },
  "style": {
    "background-color": "#0078d4",
    "color": "white",
    "border": "none",
    "padding": "6px 12px",
    "cursor": "pointer",
    "border-radius": "4px"
  }
}

📌 ¿Qué hace este formato?

- - - - Convierte el texto de la columna en un Botón.
    - Ejecuta un flujo de Power Automate.

¿Cómo aplicar el Formato de Columna en SharePoint?

1. 1. Abrir la lista en SharePoint.
1. 1. Seleccionar la columna a personalizar.
1. 1. Ir a «Configuración de columna» y elegir «Dar formato a esta columna».
1. 1. Elegir una opción de formato (color, barras de datos o avanzado con JSON).
1. Guardar los cambios.

Ejemplo 1: Aplicar Formato Condicional a una Columna

Para resaltar valores en una columna llamada «Estado», puedes definir reglas condicionales:

1. 1. Selecciona la columna > «Configuración de columna» > «Dar formato a esta columna».
1. 1. Elige Formato condicional y selecciona «Administrar reglas».
1. 1. Define reglas, por ejemplo:
    - - Si «Estado» es «Aprobado», color de fondo verde.
      - Si «Estado» es «Pendiente», color de fondo amarillo.
      - Si «Estado» es «Rechazado», color de fondo rojo.
1. Guarda los cambios

Ejemplo 2: Agregar Barras de Datos a una Columna Numérica

Para representar visualmente valores en una columna de tipo número:

1. 1. Selecciona la columna > «Configuración de columna» > «Dar formato a esta columna».
1. 1. Selecciona Barras de datos.
1. 1. Define los valores mínimo y máximo.
1. 1. Elige los colores.
1. Guarda los cambios.