Nota
El acceso a esta página requiere autorización. Puede intentar iniciar sesión o cambiar directorios.
El acceso a esta página requiere autorización. Puede intentar cambiar los directorios.
En el mundo clásico de SharePoint, se usó para personalizar la representación de listas y bibliotecas mediante XSLT (eXtensible Stylesheet Language for Transformation) y el control XsltListViewWebPart . Hoy en día, en el mundo moderno, se pueden obtener mejores resultados dependiendo del formato de lista.
Importante
En este artículo se hace referencia a los denominados componentes de PnP, ejemplos o herramientas que son recursos de código abierto respaldados por una comunidad activa que proporciona soporte técnico para ellos. Los canales oficiales de soporte técnico de Microsoft no ofrecen ningún contrato de nivel de servicio para herramientas de código abierto. Sin embargo, estos componentes o ejemplos usan las API y características de microsoft compatibles de forma predeterminada y que son compatibles con Microsoft.
Si lo prefiere, puede watch el siguiente vídeo, en lugar de leer todo el artículo, que todavía puede considerar como una referencia mucho más detallada.
De hecho, a través del formato de lista puede personalizar la representación de un solo campo, mediante el formato de columna o la representación de una vista de lista completa, a través del formato de vista de lista. Puede hacerlo fácilmente mediante la interfaz de usuario basada en web de SharePoint y un diseñador fácil de usar, o bien escribiendo sus propias plantillas JSON personalizadas. En la portada, el formato de lista procesará la representación de los datos en el lado cliente, sin afectar ni cambiar los datos reales, sino simplemente aplicar una plantilla de representación personalizada encima de ellos.
Además, el formato de lista se puede aplicar a listas y bibliotecas de SharePoint, así como a listas de Listas Microsoft, que bajo la portada se basa en SharePoint Online. En este artículo puede aprender a aprovechar el formato de lista en las soluciones.
Formato de columna
El formato de columna permite personalizar la representación de un único campo en una lista o biblioteca. Para aprender a usarlo, vamos a crear una nueva lista en un sitio de destino, por ejemplo, con la plantilla de lista "Solicitudes de viaje" . La salida tendrá un aspecto similar al de la captura de pantalla siguiente.
Formato de columna con el diseñador
Ahora, imagine que desea personalizar la representación de la columna "Duración del viaje (días)" , para resaltar los viajes que más duran. Haga clic en la flecha situada junto al nombre de la columna, elija "Configuración de columna" y, a continuación, "Dar formato a esta columna", como se muestra en la captura de pantalla siguiente, para activar la interfaz de usuario para personalizar la representación de columnas.
En el lado derecho de la pantalla se mostrará un panel lateral, que puede usar para personalizar el formato de columna. Seleccione "Formato condicional" e inicie la personalización de la representación de la columna seleccionada.
Una vez seleccionada, la opción permite configurar las reglas de representación de la columna seleccionada.
Puede crear tantas reglas como desee. Una regla de representación condicional puede ser global, no relacionada con una condición específica, o puede ser específica cuando una o varias condiciones (iguales o no iguales) se comprueban en uno o varios campos. Para cada regla, puede definir un estilo de representación personalizado. En la captura de pantalla siguiente, puede ver la interfaz de usuario básica para definir una regla.
Al configurar el estilo de representación, simplemente puede elegir uno de los estilos predefinidos, o bien puede hacer clic en "Más estilos" y obtener acceso a un conjunto completo de opciones de estilo, como se muestra en la captura de pantalla siguiente.
Como puede ver, un estilo personalizado se puede hacer de muchas configuraciones, como fuente, color de texto, color de relleno, icono, color de icono y bordes. En la captura de pantalla siguiente puede ver una regla definida para la columna "Duración del viaje (días)" , donde las duraciones entre 1 y 3 días están "ok" y resaltadas con color verde, las duraciones de 4 días son "arriesgadas" y resaltadas con color naranja, mientras que las duraciones de 5 días (toda la semana) se consideran demasiado largas y resaltadas con color rojo.
Como acaba de ver, puede definir este tipo de reglas simplemente mediante el explorador web y el diseñador.
Formato de columna con plantilla JSON personalizada
Sin embargo, ¿qué ocurre si necesita definir reglas más avanzadas? Por ejemplo, ¿qué ocurre si desea definir un intervalo de referencia de valores para la columna "Duración del viaje (días)" en lugar de valores explícitos? ¿O qué ocurre si desea definir una representación completamente personalizada para las columnas?
Afortunadamente, puede hacer clic en el "modo avanzado" que ve en la parte inferior de la pantalla y empezar a editar una plantilla JSON en un nivel bajo.
Nota:
El JSON de la plantilla se basa en un esquema definido por Microsoft y está disponible en la siguiente dirección URL y puede encontrar la referencia del esquema de detalles en la referencia de sintaxis de formato del documento.
Lo suficientemente interesante como para cambiar al modo avanzado, la plantilla JSON comenzará a mostrar la plantilla JSON del formato condicional real que ya ha definido. Por lo tanto, puede empezar fácilmente con el diseñador y, cuando necesite más, puede cambiar al modo avanzado y continuar desde donde ya estaba.
Aunque esté fuera de contexto para este artículo profundizar en todos los detalles de la sintaxis de la plantilla JSON, es útil inspeccionar el JSON generado para la columna "Duración del viaje (días)" , que se muestra en el siguiente extracto de código.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px",
"overflow": "hidden",
"text-overflow": "ellipsis"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "||",
"operands": [
{
"operator": "||",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"1"
]
},
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"2"
]
}
]
},
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"3"
]
}
]
},
"sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"4"
]
},
"sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"5"
]
},
"sp-css-backgroundColor-BgDustRose sp-css-borderColor-DustRoseFont sp-field-fontSizeSmall sp-css-color-DustRoseFont",
""
]
}
]
}
]
}
},
"txtContent": "[$TravelDuration]"
}
La plantilla JSON define que la salida será un elemento HTML div con algunos estilos de representación predefinidos.
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px",
"overflow": "hidden",
"text-overflow": "ellipsis"
}
A continuación, define un conjunto de operadores y operandos para definir todas las reglas (valor igual a 1, 2 o 3; valor 4; valor 5) y el estilo CSS correspondiente que se aplicará cuando la condición de regla sea efectiva. Con la plantilla JSON de bajo nivel, en lugar del diseñador basado en web, puede incluso mejorar la calidad y el mantenimiento de la plantilla. Por ejemplo, en lugar de enumerar todos los valores (1, 2 o 3) para el estilo verde, simplemente puede declarar una sola regla para valores inferiores o iguales a 3 (<= 3). Lo mismo se aplica al estilo rojo, donde puede declarar que la regla se aplica a cualquier valor mayor que 5 (>>5). En el fragmento de código siguiente, puede leer la plantilla JSON revisada.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 2px",
"overflow": "hidden",
"text-overflow": "ellipsis"
},
"attributes": {
"class": {
"operator": ":",
"operands": [
{
"operator": "<=",
"operands": [
"[$TravelDuration]",
"3"
]
},
"sp-css-backgroundColor-BgMintGreen sp-css-borderColor-MintGreenFont sp-field-fontSizeSmall sp-css-color-MintGreenFont",
{
"operator": ":",
"operands": [
{
"operator": "==",
"operands": [
"[$TravelDuration]",
"4"
]
},
"sp-css-backgroundColor-BgGold sp-css-borderColor-GoldFont sp-field-fontSizeSmall sp-css-color-GoldFont",
{
"operator": ":",
"operands": [
{
"operator": ">=",
"operands": [
"[$TravelDuration]",
"5"
]
},
"sp-css-backgroundColor-BgDustRose sp-css-borderColor-DustRoseFont sp-field-fontSizeSmall sp-css-color-DustRoseFont",
""
]
}
]
}
]
}
},
"txtContent": "[$TravelDuration]"
}
Se trata de un ejemplo muy sencillo y básico, pero puede crear reglas de representación realmente complejas. Por ejemplo, puede anidar elementos HTML dentro de la salida de una columna, o puede representar imágenes personalizadas, etc.
Nota:
Puede encontrar muchos ejemplos útiles sobre el formato de columna que examinan los ejemplos de formato de lista de SharePoint del repositorio de GitHub y, específicamente, los ejemplos de formato de columna.
Formato de vista de lista
Como puede personalizar la representación de una sola columna, puede usar formato de lista para personalizar la representación de una vista completa de una lista o biblioteca.
Para personalizar la vista de lista de una lista o biblioteca, simplemente puede hacer clic en el menú desplegable para elegir la vista actual y seleccionar la opción "Formatear vista actual", como se muestra en la siguiente captura de pantalla.
Al hacer clic en el elemento de menú, activará un panel lateral a la derecha, a través del cual puede optar por aplicar una plantilla muy sencilla para representar "Estilos de fila alternados", o bien puede activar el "Formato condicional" y crear una plantilla de formato más persolizada. Al igual que con el formato de columna, puede definir condiciones y reglas de estilo, que ahora se aplicarán en el nivel de fila, en lugar del nivel de columna.
Además, en la lista desplegable "Elegir diseño" puede elegir crear una plantilla personalizada de tipo Lista, que es la predeterminada, o Galería, que le proporciona una salida basada en tarjetas donde puede personalizar los campos y la representación de las tarjetas.
Al seleccionar Galería y activar el "Diseñador de tarjetas" haciendo clic en el comando "Editar tarjeta" , puede elegir los campos que se mostrarán en las tarjetas, su orden y algunas opciones de configuración generales para la tarjeta.
Si desea hacer más, puede hacer clic en "Modo avanzado" y definir una plantilla JSON totalmente personalizada, que se aplicará a toda la lista, en lugar de tener como destino una sola columna.
Nota:
Puede encontrar muchos ejemplos útiles sobre el formato de vista de lista explorando los ejemplos de formato de lista de SharePoint del repositorio de GitHub y específicamente los ejemplos de formato de vista de lista.
Formato de formulario de lista
Una opción más que tiene es personalizar la forma de una lista o biblioteca, definiendo un encabezado, pie de página o cuerpo personalizados. De hecho, si está en una lista, simplemente puede mostrar las propiedades de cualquier elemento y, a continuación, hacer clic en el comando "Editar formulario" en la esquina superior derecha de la pantalla y seleccionar la opción "Configurar diseño" , como se muestra en la captura de pantalla siguiente.
Se mostrará un panel lateral a la derecha y podrá configurar un JSON personalizado para personalizar la representación del encabezado, pie de página o cuerpo. En la captura de pantalla siguiente, puede ver el aspecto del panel.
El mismo comportamiento se aplica a las bibliotecas de documentos, pero para activar el panel de formato tiene que seleccionar un documento, haga clic en los tres puntos (menú BCE), seleccione Más y, a continuación, Propiedades. En el panel de propiedades del documento, puede elegir las opciones "Editar formulario" y "Configurar diseño" .
Ahora, veamos qué tipo de personalizaciones puede aplicar con esta funcionalidad. Por motivos de simplicidad, siga usando la lista "Solicitudes de viaje" creada en las secciones anteriores y edite el encabezado de los elementos de lista. Por ejemplo, supongamos que desea reemplazar el encabezado predeterminado por un cuadro personalizado que muestre el avatar del solicitante y el destino del viaje. En la captura de pantalla siguiente, puede ver la salida.
Mientras que en el siguiente fragmento de código puede ver la plantilla JSON para obtener el resultado anterior.
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white ms-borderColor-neutralTertiary"
},
"style": {
"width": "99%",
"margin": "10px",
"border": "1px solid",
"padding": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"box-sizing": "border-box",
"align-items": "center"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=getUserImage('[$Requester.email]','medium')"
},
"style": {
"border-radius": "50%",
"margin-bottom": "10px"
}
}
]
},
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-24"
},
"style": {
"box-sizing": "border-box",
"width": "100%",
"text-align": "left",
"padding": "21px 12px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"txtContent": "='Travel request to ' + [$Destination.DisplayName]"
}
]
}
]
}
La plantilla JSON define un elemento DIV HTML con el color principal del tema actual como el color de fondo, el color blanco del texto y un borde sólido de 1 píxel.
"elmType": "div",
"attributes": {
"class": "ms-bgColor-themePrimary ms-fontColor-white ms-borderColor-neutralTertiary"
},
"style": {
"width": "99%",
"margin": "10px",
"border": "1px solid",
"padding": "10px"
}
A continuación, hay dos elementos DIV como elementos secundarios del DIV anterior. El primer DIV de la izquierda representa la imagen del usuario solicitante.
{
"elmType": "div",
"style": {
"display": "flex",
"box-sizing": "border-box",
"align-items": "center"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=getUserImage('[$Requester.email]','medium')"
},
"style": {
"border-radius": "50%",
"margin-bottom": "10px"
}
}
]
}
Mientras que el segundo DIV representa una cadena personalizada con el nombre del destino.
{
"elmType": "div",
"attributes": {
"class": "ms-fontColor-white ms-fontWeight-bold ms-fontSize-24"
},
"style": {
"box-sizing": "border-box",
"width": "100%",
"text-align": "left",
"padding": "21px 12px",
"overflow": "hidden"
},
"children": [
{
"elmType": "div",
"txtContent": "='Travel request to ' + [$Destination.DisplayName]"
}
]
}
Observe la sintaxis usada para leer las propiedades del elemento actual, en función de corchetes y el símbolo de dólar ($) para hacer referencia a un campo, especificando finalmente propiedades detalladas del campo, como el correo electrónico para el $Requester o displayName para el $Destination. Observe también que puede confiar en funciones personalizadas como getUserImage para recuperar información avanzada de los campos del elemento seleccionado.
El pie de página personalizado se puede personalizar como el encabezado, usando exactamente el mismo enfoque que antes.
Por el contrario, el cuerpo se puede personalizar declarando una o varias secciones personalizadas y una o más columnas para cada sección. Sin embargo, tenga en cuenta que solo se puede hacer referencia a una columna en una sección y, si no hará referencia a una columna en ninguna sección, se mostrará automáticamente en la última sección. Del mismo modo, las nuevas columnas agregadas a la lista o biblioteca se mostrarán automáticamente en la última columna.
En el fragmento de código siguiente, puede ver una plantilla JSON para un cuerpo con una sección "Más información", formada por los campos Title, Requester y Destination, y otra sección catch-all con el nombre "Otros".
{
"sections": [
{
"displayname": "Main information",
"fields": [
"Title",
"Requester",
"Destination"
]
},
{
"displayname": "Others",
"fields": []
}
]
}
Observe que cada objeto de sección está formado por un nombre para mostrar y una matriz de campos.
Aprovisionamiento de PnP y formato JSON
Una última cosa importante que debe tener en cuenta al trabajar con formato de lista es que si extrae una plantilla de sitio o una plantilla de lista mediante el motor de aprovisionamiento de PnP, el motor también exportará cualquier formato de columna personalizado o formato de vista de lista y los almacenará en atributos CustomFormatter para columnas o elementos para vistas. Por lo tanto, puede personalizar las columnas y vistas de lista, exportar la personalización y aplicarla de nuevo a los sitios de producción o de clientes mediante un montón de scripting de PowerShell.
Nota:
Si no sabe cuál es el motor de aprovisionamiento de PnP o si desea profundizar más en lo que es, puede leer el artículo Descripción del aprovisionamiento moderno de artefactos.
Por ejemplo, aquí puede ver la sintaxis con PowerShell PnP para extraer una plantilla de las "Solicitudes de viaje", incluidas las plantillas de formato de vista de lista y columna.
Connect-PnPOnline https://<source-tenant-name>.sharepoint.com/sites/<SourceSite>
Get-PnPSiteTemplate -Out .\travel-requests.xml -ListsToExtract "Travel requests" -Handlers Lists
Mientras que en el siguiente fragmento de código puede ver cómo aplicar la plantilla recién extraída a un sitio de destino.
Connect-PnPOnline https://<target-tenant-name>.sharepoint.com/sites/<TargetSite>
Invoke-PnPSiteTemplate -Path .\travel-requests.xml
Observe que la extracción y la aplicación de la plantilla pueden incluso producirse en distintos inquilinos de Microosft 365.
Contenido recomendado
Puede encontrar información adicional sobre este tema leyendo los documentos siguientes: