Compartir a través de

Referencia de sintaxis de formato

  • Artículo

elmType

Especifica el tipo de elemento que se va a crear. Entre los elementos válidos se incluyen:

Cualquier otro valor dará un error.

filepreview

Use el especial elmTypefilepreview con el src atributo establecido @thumbnail.<Size> en para ver las miniaturas de los archivos de la biblioteca de documentos.

Si la miniatura se carga correctamente, un pequeño icono de tipo de marca estará visible en la parte inferior izquierda. Si la miniatura no se carga (o si el tipo de archivo no admite miniaturas), se muestra un icono de tipo de archivo en su lugar.

"elmType": "filepreview",
"attributes": {
  "src": "@thumbnail.medium"
}

Seguridad de img src

Se permiten imágenes de los siguientes dominios:

  • dominio de inquilino, dominios multigeográficos configurados y dominios de vanidad (company.sharepoint.com)
  • cdn.office.net, akamaihd.net, static2.sharepointonline.com CDN

La mayoría de los demás orígenes de imágenes externos están bloqueados de forma predeterminada en formateadores personalizados. Para incluir imágenes externas y permitir dominios o CDN específicos, el dominio debe agregarse a una configuración de nivel de sitio. Para obtener más información, vea: Permitir o restringir la capacidad de insertar contenido en páginas de SharePoint.

txtContent

Propiedad opcional que especifica el contenido de texto del elemento especificado por elmType. El valor de esta propiedad puede ser una cadena (incluidas las cadenas especiales) o un objeto de la expresión.

style

Propiedad opcional que especifica los atributos de estilo que se aplican al elemento especificado por elmType. Se trata de un objeto con pares de nombre-valor que se corresponden con los valores y nombres CSS. Los valores de cada propiedad en este objeto de estilo pueden ser una cadena (incluidas las cadenas especiales) o un objeto de la expresión. Se permiten los siguientes atributos de estilo.

'background-color'
'fill'
'background-image'
'border'
'border-bottom'
'border-bottom-color'
'border-bottom-style'
'border-bottom-width'
'border-color'
'border-left'
'border-left-color'
'border-left-style'
'border-left-width'
'border-right'
'border-right-color'
'border-right-style'
'border-right-width'
'border-style'
'border-top'
'border-top-color'
'border-top-style'
'border-top-width'
'border-width'
'outline'
'outline-color'
'outline-style'
'outline-width'
'border-bottom-left-radius'
'border-bottom-right-radius'
'border-radius'
'border-top-left-radius'
'border-top-right-radius'
'box-decoration-break'
'box-shadow'
'box-sizing'

'overflow-x'
'overflow-y'
'overflow-style'
'rotation'
'rotation-point'

'opacity'
'cursor'

'height'
'max-height'
'max-width'
'min-height'
'min-width'
'width'

'flex-grow'
'flex-shrink'
'flex-flow'
'flex-direction'
'flex-wrap'
'flex'
'justify-content'
'align-items'

'box-align'
'box-direction'
'box-flex'
'box-flex-group'
'box-lines'
'box-ordinal-group'
'box-orient'
'box-pack'

'font'
'font-family'
'font-size'
'font-style'
'font-variant'
'font-weight'
'font-size-adjust'
'font-stretch'

'grid-columns'
'grid-rows'

'margin'
'margin-bottom'
'margin-left'
'margin-right'
'margin-top'

'column-count'
'column-fill'
'column-gap'
'column-rule'
'column-rule-color'
'column-rule-style'
'column-rule-width'
'column-span'
'column-width'
'columns'

'padding'
'padding-bottom'
'padding-left'
'padding-right'
'padding-top'

'bottom'
'clear'
'clip'
'display'
'float'
'left'
'overflow'
'position'
'right'
'top'
'visibility'
'z-index'

'border-collapse'
'border-spacing'
'caption-side'
'empty-cells'
'table-layout'

'color'
'direction'
'letter-spacing'
'line-height'
'text-align'
'text-decoration'
'text-indent'
'text-transform'
'unicode-bidi'
'vertical-align'
'white-space'
'word-spacing'
'hanging-punctuation'
'punctuation-trim'
'text-align-last'
'text-justify'
'text-outline'
'text-overflow'
'text-shadow'
'text-wrap'
'word-break'
'word-wrap'

'stroke'
'fill-opacity'

'--inline-editor-border-width'
'--inline-editor-border-style'
'--inline-editor-border-radius'
'--inline-editor-border-color'

'-webkit-line-clamp'

'object-fit'
'transform' // Only translate(arg) and translate(arg, arg) are currently supported

El ejemplo siguiente muestra el valor de un objeto de estilo. En este ejemplo, se aplicarán dos propiedades de estilo (padding y background-color). El valor padding es un valor de cadena codificado de forma rígida. El valor background-color es una expresión que se evalúa en rojo (#ff0000) o verde (#00ff00), según si el valor del campo activo (especificado por @currentField) es inferior a 40. Para obtener más información, vea la sección Objeto expression.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "padding": "4px",
    "background-color": {
      "operator": "?",
      "operands": [
        {
          "operator": "<",
          "operands": [
            "@currentField",
            40
          ]
        },
        "#ff0000",
        "#00ff00"
      ]
    }
  }
}

El siguiente ejemplo es el mismo de arriba, pero en este caso se usa la sintaxis de expresiones de estilo Excel:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
  "padding": "4px",
  "background-color": "=if(@currentField < 40, '#ff0000', '#00ff00')"
  }
}

atributos

La attributes propiedad opcional especifica más atributos que se van a agregar al elemento especificado por elmType. Este es un objeto con pares de nombre-valor. Los nombres de atributos deben ser uno de los siguientes:

  • href
  • rel
  • src
  • class
  • target
  • title
  • role
  • iconName
  • d
  • aria
  • intercepción de datos
  • viewBox
  • preserveAspectRatio
  • arrastrable

Cualquier otro nombre de atributo dará un error. Los valores de atributo pueden ser objetos o cadenas Expression. El ejemplo siguiente agrega dos atributos (target y href) al elemento especificado por elmType. El atributo target está codificado de forma rígida en una cadena. El atributo href es una expresión que se evaluará en tiempo de ejecución para http://finance.yahoo.com/quote/ y el valor del campo activo (@currentField).

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

secundario

La children propiedad opcional especifica los elementos secundarios del elemento especificado por elmType. El valor se especifica como una matriz de objetos elm. Puede haber un nivel de anidamiento arbitrario. Si un elemento tiene la propiedad txtContent, se ignoran las propiedades secundarias.

debugMode

La debugMode propiedad opcional está pensada para la depuración. Genera mensajes de error y registra advertencias de la consola.

forEach

La forEach propiedad opcional permite que un elemento se duplique por sí mismo para cada miembro de un campo multivalor específico o una matriz. El valor de la "forEach" propiedad debe tener el formato o "iteratorName in @currentField""iteratorName in [$FieldName]" ."iteratorName in Expression-Returning-An-Array"

iteratorName representa el nombre de la variable de iterador que se usa para representar el miembro actual del campo de varios valores. El nombre del iterador puede ser cualquier combinación de caracteres alfanuméricos y un carácter de subrayado (_) que no comienza con un dígito.

El campo usado en el bucle debe estar en un tipo de campo compatible con opciones de varios valores habilitadas: Persona, Búsqueda y Opción. También se puede usar una expresión que devuelve una matriz.

En el elemento con forEach o sus elementos secundarios, se puede hacer referencia a la variable iterador como si fuera un nuevo campo. Se puede tener acceso al índice de iterador con el operador loopIndex.

forEach no se puede aplicar al elemento raíz y no representará ningún elemento si no hay ningún valor en el campo.

Consulte Aplicar formato a campos de varios valores para obtener ejemplos.

customRowAction

Los elementos button pueden usarse para iniciar una acción específica en el elemento primario. Cada button elemento tiene una propiedad necesaria, customRowAction, que especifica una action que se toma cuando se selecciona el botón. Esta acción debe ser uno de los siguientes valores:

  • defaultClick: los botones con esta acción harán lo mismo que al hacer clic en el elemento de lista en una vista no personalizada. En el ejemplo siguiente se muestra un botón que, cuando se selecciona, simula una selección en el elemento, lo que da como resultado la apertura del elemento de lista. Al agregar este botón de ejemplo a una biblioteca de documentos, se simula una selección en el archivo o carpeta, lo que da lugar a que se abra el archivo o carpeta.

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Open this item",
  "customRowAction": {
    "action": "defaultClick"
  }
}

  • compartir: al seleccionar el botón se abrirá el cuadro de diálogo de uso compartido. A continuación se muestra un ejemplo de este tipo de botón:

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Share this item",
  "customRowAction": {
    "action": "share"
  }
}

  • delete: al seleccionar el botón se abrirá el cuadro de diálogo de confirmación de eliminación.

  • editProps: al seleccionar el botón se abrirá la página de propiedades del elemento en modo de edición.

  • openContextMenu: al seleccionar el botón se abrirá el menú contextual predeterminado del elemento.

  • setValue: al seleccionar el elemento se actualizará el elemento con los valores de campo proporcionados.

    {
  "elmType": "div",
  "txtContent": "[$FieldName]",
  "customRowAction":{
    "action": "setValue",
    "actionInput": {
      "FieldInternalName_1": "FieldValue_1",
      "FieldInternalName_2": "FieldValue_2",
    }
  }
}

  • executeFlow: al seleccionar el botón se iniciará el flujo especificado, especificado por id. dentro del actionParams atributo . Para obtener un ejemplo de esto, vea Crear un botón para iniciar un flujo. En el ejemplo siguiente se muestra este tipo de botón:

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "It's Flow Time!",
  "customRowAction": {
    "action": "executeFlow",
    "actionParams": "{\"id\":\"f7ecec0b-15c5-419f-8211-302a5d4e94f1\", \"headerText\":\"It's Flow Time!\",\"runFlowButtonText\":\"Do it\"}"
  }
}

    El atributo actionParams puede tener las opciones siguientes al usar la acción executeFlow:

    • id: ID. del flujo para iniciar (requerido)
    • headerText: configura el texto en la parte superior del panel de flujo (opcional).
    • runFlowButtonText: configura el texto del botón primario en el panel de flujo (opcional).

  • insertar: al hacer clic en el botón se abrirá una llamada con el contenido incrustado en él. El contenido se determinará mediante la dirección URL proporcionada en el src atributo en actionInput. También puede controlar y heightwidth de la llamada mediante .actionInput

    Nota:

    • src debe ser solo la url parte de un código insertable generado por una aplicación (normalmente se encuentra en el src atributo del iframe elemento ).
    • Esta acción solo está disponible en la versión más reciente de la aplicación Listas Microsoft.

    Para obtener más información sobre cómo permitir o restringir dominios, vea Permitir o restringir la capacidad de insertar contenido en SharePoint Listas mediante formateadores personalizados.

    {
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "customRowAction": {
    "action": "embed",
    "actionInput": {
      "src": "https://www.relecloud.com/embed/ll00hWQMJxQ",
      "height": "350",
      "width": "700"
    }
  },
  "txtContent": "Click here to open recipe video 👩‍🍳"
}

    El atributo actionInput puede tener las opciones siguientes al usar la acción embed:

    • src: dirección URL del contenido que desea insertar. (obligatorio)
    • height: alto de la llamada en la que se representará el contenido incrustado. El valor predeterminado es 300. (opcional)
    • width: ancho de la llamada en la que se representará el contenido incrustado. El valor predeterminado es 300. (opcional)

customCardProps

Agregue una tarjeta personalizada al elemento que aparece al mantener el puntero o click al evento. Están disponibles las siguientes personalizaciones:

  • "formatter": Objeto JSON que define el formato de tarjetas personalizadas.
  • "openOnEvent": Evento en el que se debe abrir el customCard.
    • Valores válidos: click, hover
  • "directionalHint": especifique la dirección relativa al destino en el que se colocará la tarjeta personalizada. Esta es la ubicación preferida, pero no se garantiza en función del espacio.
    • Valores válidos: bottomAutoEdge, bottomCenter, bottomLeftEdge, bottomRightEdge, leftBottomEdge, leftCenter, leftTopEdge, rightBottomEdge, , rightCenterrightTopEdge, topAutoEdge, topCenter, , , topLeftEdgetopRightEdge
  • "isBeakVisible": Especifica si se va a mostrar el pico o no.
  • "beakStyle": especifica el objeto de estilo del pico de la tarjeta personalizada.

defaultHoverField

Agrega la tarjeta de perfil para los campos de contactos o la tarjeta de desplazamiento del archivo para los archivos de la biblioteca de documentos.

  • "defaultHoverField": "[$Editor]" agrega una tarjeta de perfil para el campo editor
  • "defaultHoverField": "[$FileLeafRef]" agrega una tarjeta activa de archivo en documentLibrary

columnFormatterReference

Esto se sustituirá por el formateador de columnas JSON mencionado. No se admite la referencia de varios niveles.

No se admiten referencias para plantillas de formateador de columnas de varias opciones y formateadores de columna no basados en plantillas.

{
  "columnFormatterReference": "[$FieldName]"
}

inlineEditField

Agrega el editor de campo a la columna referenciada.

{
  "elmType": "div",
  "inlineEditField": "[$FieldName]",
  "txtContent": "[$FieldName]"
}

filePreviewProps

filePreviewProps es una propiedad opcional que permite reemplazar los estilos predeterminados del icono de tipo de archivo y el icono de tipo de marca en filepreview.elmType.

fileTypeIconClass y brandTypeIconClass se puede usar para proporcionar nombres de clase CSS al icono de tipo de archivo y a los elementos de icono de tipo de marca respectivamente.

y se puede usar para proporcionar estilos al icono de tipo de archivo y al icono de tipo de marca respectivamente.brandTypeIconStylefileTypeIconStyle Estos estilos tendrán prioridad sobre los mismos estilos procedentes de las clases CSS proporcionadas por las dos propiedades anteriores.

"elmType": "filepreview",
"attributes": {
  "src": "@thumbnail.medium",
 },
"filePreviewProps": {
  "fileTypeIconClass": "sp-css-borderColor-neutralLight",
  "fileTypeIconStyle": {
    "width": "100px"
  },
  "brandTypeIconClass": "sp-css-borderColor-neutralLight",
  "brandTypeIconStyle": {
    "width": "68px"
  }
}

Expresiones

Los valores de , las propiedades de estilo y las propiedades de atributo se pueden expresar como expresiones para txtContentque se evalúen en tiempo de ejecución en función del contexto del campo (o fila) actual. Se pueden anidar objetos de expresión para que contengan otros objetos de expresión.

Las expresiones se pueden escribir con expresiones de estilo Excel en SharePoint Online y SharePoint Server Edición de Suscripción a partir de la actualización de características 22H2, o mediante expresiones de árbol de sintaxis abstracta en SharePoint Online, SharePoint Server Edición de Suscripción y SharePoint Server 2019.

Se puede hacer referencia a todos los campos de ViewFields en expresiones, incluso si está marcado como Explicit.

Expresiones de estilo Excel

Todas las expresiones de estilo Excel comienzan con un signo de igual (=). Este estilo de expresión solo está disponible en SharePoint Online y SharePoint Server Edición de Suscripción a partir de la actualización de características 22H2. Este estilo de expresión no está disponible en SharePoint Server 2019 ni SharePoint Server Edición de Suscripción antes de la actualización de características 22H2.

Esta expresión condicional simple se evalúa none como si @me no es igual a [$Author.email]y se evalúa en '' lo contrario:

=if(@me != [$Author.email], 'none', '')

Las instrucciones if/else más complejas se pueden escribir de la siguiente manera:

=if([$Sentiment] <= 0.3, 'sp-field-severity--blocked', if([$Sentiment] < 0.9,'sp-field-severity--warning','sp-field-severity--good'))

Los operadores no condicionales que toman uno o dos operandos se pueden escribir como se indica a continuación:

=[$foo] * -7

=sin(@currentField)

=toString(60 + (sin(6.2831853 * @currentField) * 60))

Expresiones de árbol de sintaxis abstracta

El ejemplo siguiente contiene un objeto Expression que realiza la expresión:

(@currentField > 40) ? '100%' : (((@currentField * 2.5).toString() + '%')

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "operator": "?",
  "operands": [
    {
      "operator": ">",
      "operands": [
        "@currentField",
        "40"
      ]
    },
    "100%",
    {
      "operator": "+",
      "operands": [
        {
          "operator": "toString()",
          "operands": [
            {
              "operator": "*",
              "operands": [
                "@currentField",
                2.5
              ]
            }
          ]
        },
        "%"
      ]
    }
  ]
}

Operadores

Los operadores especifican el tipo de operación que se va a realizar. Los valores de operador válidos incluyen:

  • +
  • -
  • /
  • *
  • <
  • >
  • %
  • ==
  • !=
  • <=
  • >=
  • ||
  • &&
  • toString()
  • Number()
  • Date()
  • cos
  • sin
  • ?
  • :
  • toLocaleString()
  • toLocaleDateString()
  • toLocaleTimeString()
  • indexOf
  • toLowerCase
  • join
  • length
  • abs
  • loopIndex
  • floor
  • ceiling
  • pow
  • substring
  • getDate
  • getMonth
  • getYear
  • toUpperCase
  • lastIndexOf
  • startsWith
  • endsWith
  • replace
  • replaceAll
  • padStart
  • padEnd
  • getThumbnailImage
  • getUserImage
  • addDays
  • addMinutes
  • appendTo
  • removeFrom
  • split

Operadores aritméticos binarios : los operadores binarios aritméticos estándar que esperan dos operandos incluyen:

  • +
  • -
  • /
  • *
  • <
  • >
  • %
  • ==
  • !=
  • <=
  • >=

Operadores unarios : los operadores unaarios estándar que esperan solo un operando son:

  • toString(): devuelve una cadena que representa el objeto
    • "txtContent": "=toString(45)" da como resultado "45"
  • Number(): devuelve el valor numérico, si el operando no es un número, se devuelve NaN.
    • "txtContent": "=Number('365')" da como resultado 365
    • "txtContent": "=Number('Wowee')" da como resultado NaN
    • "txtContent": "=Number(Date('12/26/1981'))" da como resultado 378190800000
  • Date(): devuelve un objeto datetime del parámetro (convierte cadenas o números en fechas, sensibles a la configuración regional)
    • "txtContent": "=Date('12/26/1981')" da como resultado 26/12/1981, 12:00:00
  • cos: devuelve el coseno del ángulo especificado que se debe especificar en radianes.
    • "txtContent": "=cos(5)" da como resultado 0,28366218546322625
  • sin: devuelve el seno de un número
    • "txtContent": "=sin(90)" da como resultado 0,8939966636005579
  • toDateString(): devuelve una fecha en un formato descriptivo corto
    • "txtContent": "=toDateString(@now)" el resultado no varía en función de la configuración regional del usuario y tendrá el aspecto de "Wed Ago 03 2022"
  • toLocaleString(): devuelve una representación que distingue el idioma de una fecha.
    • "txtContent":"=toLocaleString(@now)" Los resultados varían según la configuración regional del usuario, pero en-us se parece a "2/5/2019, 1:22:24 PM"
  • toLocaleDateString(): devuelve una representación que distingue idioma solo de la parte de fecha de una fecha.
    • "txtContent":"=toLocaleDateString(@now)" Los resultados varían en función de la configuración regional del usuario, pero en-us parece "2/5/2019"
  • toLocaleTimeString(): devuelve una representación que distingue el idioma de solo la parte de hora de una fecha.
    • "txtContent":"=toLocaleTimeString(@now)" Los resultados varían en función de la configuración regional del usuario, pero en-us se parece a "1:22:24 p.m.
  • toLowerCase: devuelve el valor convertido en minúsculas (solo funciona en cadenas): solo está disponible en SharePoint Online.
    • "txtContent":"=toLowerCase('DogFood')" da como resultado "dogfood"
  • abs: devuelve el valor absoluto de un número determinado: solo disponible en SharePoint Online
    • "txtContent":"=abs(-45)" da como resultado 45
  • length: devuelve el número de elementos de una matriz (campo de selección múltiple de persona o elección), para todos los demás tipos de valor devuelve 1 cuando es true y 0 cuando es false. NO proporciona la longitud de un valor de cadena (ver la indexOf solución alternativa que se explica más adelante para dicha operación). - Solo disponible en SharePoint Online
    • "txtContent":"=length(@currentField)" puede dar lugar a 2 si hay dos valores seleccionados
    • "txtContent":"=length('Some Text')" da como resultado 1
    • "txtContent":"=length('')" da como resultado 0
    • "txtContent":"=length(45)" da como resultado 1
    • "txtContent":"=length(0)" da como resultado 0
  • floor: devuelve el entero más grande menor o igual que un número determinado. - Solo disponible en SharePoint Online
    • "txtContent":"=floor(45.5)" da como resultado 45
  • ceiling: redondea el número dado hasta el número entero o entero más grande siguiente. - Solo disponible en SharePoint Online
    • "txtContent":"=ceiling(45.5)" da como resultado 46
  • getDate: devuelve el día del mes de la fecha especificada. - Solo disponible en SharePoint Online
    • "txtContent":"=getDate(Date('12/26/1981'))" da como resultado 26
  • getMonth: devuelve el mes de la fecha especificada según la hora local, como un valor de base cero (donde cero indica el primer mes del año). - Solo disponible en SharePoint Online
    • "txtContent":"=getMonth(Date('12/26/1981'))" da como resultado 11
  • getYear: devuelve el año de la fecha especificada. - Solo disponible en SharePoint Online
    • "txtContent":"=getYear(Date('12/26/1981'))" da como resultado 1981
  • toUpperCase: devuelve el valor convertido en mayúsculas (solo funciona en cadenas): solo está disponible en SharePoint Online.
    • "txtContent":"=toUpperCase('DogFood')" da como resultado "DOGFOOD"

Operadores binarios: abajo encontrará una lista de los operadores que esperan dos operandos:

  • indexOf: toma dos operandos. El primero es el texto (o matriz) en el que quiere buscar, el segundo es el texto que quiere buscar. Devuelve el valor de índice de la primera aparición del término de búsqueda en la cadena (o matriz). Los índices empiezan en 0. Si el término de búsqueda no se encuentra en el texto (o matriz), se devuelve -1. Este operador distingue entre mayúsculas y minúsculas. - Solo disponible en SharePoint Online
    • "txtContent": "=indexOf('DogFood', 'Dog')" da como resultado 0
    • "txtContent": "=indexOf('DogFood', 'F')" da como resultado 3
    • "txtContent": "=indexOf('DogFood', 'Cat')" da como resultado -1
    • "txtContent": "=indexOf('DogFood', 'f')" da como resultado -1
  • join: toma dos operandos. El primero es una matriz (persona de selección múltiple o campo de elección) y el segundo es la cadena de separación. Devuelve una concatenación de cadenas de la matriz separadas por la cadena de separación. - Solo disponible en SharePoint Online
    • "txtContent": "=join(@currentField, ', ')" puede dar como resultado "Manzana, Naranja, Cereza" (en función de los valores seleccionados)
    • "txtContent": "=join(@currentField.title, '|')" podría dar lugar a "Megan Bowen|Alex Wilber" (dependiendo de las personas seleccionadas)
  • pow: devuelve la base a la potencia exponente. - Solo disponible en SharePoint Online
    • "txtContent":"=pow(2,3)" da como resultado 8
  • lastIndexOf: devuelve la posición de la última aparición de un valor especificado en una cadena (o matriz)
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'Dog')" da como resultado 8
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'F')" da como resultado 11
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'Cat')" da como resultado -1
    • "txtContent": "=lastIndexOf('DogFood DogFood', 'f')" da como resultado -1
  • startsWith: determina si una cadena comienza con los caracteres de una cadena especificada.
    • El resultado de "txtContent":"=startsWith('DogFood', 'Dog')" es verdadero
    • El resultado de "txtContent":"=startsWith('DogFood', 'Food')" es falso
  • endsWith: determina si una cadena termina con los caracteres de una cadena especificada.
    • El resultado de "txtContent":"=endsWith('DogFood', 'Dog')" es falso
    • El resultado de "txtContent":"=endsWith('DogFood', 'Food')" es verdadero
  • getUserImage: devuelve una dirección URL que apunta a la imagen de perfil del usuario para un correo electrónico determinado y el tamaño preferido.
    • "src":"=getUserImage('kaylat@contoso.com', 'small')" devuelve una dirección URL que apunta a la imagen de perfil del usuario en pequeña resolución
    • "src":"=getUserImage('kaylat@contoso.com', 's')" devuelve una dirección URL que apunta a la imagen de perfil del usuario en pequeña resolución
    • "src":"=getUserImage('kaylat@contoso.com', 'medium')" devuelve una dirección URL que apunta a la imagen de perfil del usuario en resolución media
    • "src":"=getUserImage('kaylat@contoso.com', 'm')" devuelve una dirección URL que apunta a la imagen de perfil del usuario en resolución media
    • "src":"=getUserImage('kaylat@contoso.com', 'large')" devuelve una dirección URL que apunta a la imagen de perfil del usuario en gran resolución
    • "src":"=getUserImage('kaylat@contoso.com', 'l')" devuelve una dirección URL que apunta a la imagen de perfil del usuario en gran resolución
  • appendTo: devuelve una matriz con la entrada especificada anexada a la matriz especificada.
    • "txtContent": "=appendTo(@currentField, 'Choice 4')" devuelve una matriz con 'Choice 4' agregado a la @currentField matriz
    • "txtContent": "=appendTo(@currentField, 'kaylat@contoso.com')" devuelve una matriz con 'kaylat@contoso.com' agregado a la @currentField matriz
  • removeFrom: devuelve una matriz con la entrada especificada quitada de la matriz especificada, si está presente
    • "txtContent": "=removeFrom(@currentField, 'Choice 4')" devuelve una matriz con 'Choice 4' quitado de la @currentField matriz
    • "txtContent": "=removeFrom(@currentField, 'kaylat@contoso.com')" devuelve una matriz con 'kaylat@contoso.com' quitado de la @currentField matriz
  • split: divide la cadena especificada en una lista ordenada de subcadenas mediante la búsqueda del patrón especificado y devuelve una matriz de estas subcadenas.
    • "txtContent": "=split('Hello World', ' ')"devuelve una matriz con dos cadenas: "Hello" y "World"
  • addDays: devuelve un objeto datetime con días agregados (o deducidos) del valor datetime especificado.
    • "txtContent": "=addDays(Date('11/14/2021'), 3)" devuelve un 11/17/2021, 12:00:00 AM
    • "txtContent": "=addDays(Date('11/14/2021'), -1)" devuelve un 11/13/2021, 12:00:00 AM
  • addMinutes: devuelve un objeto datetime con minutos agregados (o deducidos) del valor datetime especificado.
    • "txtContent": "=addMinutes(Date('11/14/2021'), 3)" devuelve un 11/14/2021, 12:03:00 AM
    • "txtContent": "=addMinutes(Date('11/14/2021'), -1)" devuelve un 11/13/2021, 11:59:00 AM

Operadores ternarios: abajo encontrará los operadores que esperan tres operandos:

  • substring: devuelve la parte de la cadena entre los índices inicial y final. - Solo disponible en SharePoint Online

    • "txtContent":"=substring('DogFood', 3, 4)" da lugar a F
    • "txtContent":"=substring('DogFood', 4, 3)" da lugar a F
    • "txtContent":"=substring('DogFood', 3, 6)" da lugar a Foo
    • "txtContent":"=substring('DogFood', 6, 3)" da lugar a Foo

    El método substring() devuelve la parte de la cadena entre los índices inicial y final o al final de la cadena.

  • replace: busca en una cadena (o matriz) un valor especificado y devuelve una nueva cadena (o matriz) donde se reemplaza el valor especificado. En el caso de las cadenas, solo se reemplazará la primera instancia del valor.

    • "txtContent":"=replace('Hello world', 'world', 'everyone')" da como resultado Hola a todo el mundo
    • "txtContent":"=replace([$MultiChoiceField], 'Choice 1', 'Choice 2')" devuelve una matriz que reemplaza la opción 1 por la opción 2
    • "txtContent":"=replace([$MultiUserField], @me, 'kaylat@contoso.com')" devuelve una matriz que reemplaza por @me 'kaylat@contoso.com'

  • replaceAll: busca en una cadena un valor especificado y devuelve una nueva cadena (o matriz) donde se reemplaza el valor especificado. En el caso de las cadenas, se reemplazarán todas las instancias del valor.

    • "txtContent":"=replaceAll('H-e-l-l-o W-o-r-l-d', '-', '')"da como resultado Hola mundo

  • padStart: rellena la cadena actual con otra cadena hasta que la cadena resultante alcanza la longitud especificada. El relleno se aplica desde el principio de la cadena actual.

    • "txtContent":"=padStart('DogFood', 10, 'A')" da como resultado AAADogFood
    • "txtContent":"=padStart('DogFood', 10, 'AB')" da como resultado ABADogFood
    • "txtContent":"=padStart('DogFood', 5, 'A')" da como resultado DogFood

  • padEnd: rellena la cadena actual con una cadena determinada hasta que la cadena resultante alcanza la longitud especificada. El relleno se aplica desde el final de la cadena actual.

    • "txtContent":"=padEnd('DogFood', 10, 'A')" da como resultado DogFoodAAA
    • "txtContent":"=padEnd('DogFood', 10, 'AB')" da como resultado DogFoodABA
    • "txtContent":"=padEnd('DogFood', 5, 'A')" da como resultado DogFood

  • getThumbnailImage: devuelve una dirección URL que apunta a una imagen para un campo de imagen determinado y el tamaño preferido.

    • "src":"=getThumbnailImage([$ImageField], 400, 200)" da como resultado una dirección URL que apunta a una imagen para un campo de imagen determinado con 400 ancho y 200 de alto

Operador condicional: el operador condicional es:

  • ?: las operaciones condicionales escritos en árbol de sintaxis abstracta utilizan ? como el operador. Esto es para lograr una expresión equivalente a a ? b : c, donde si la expresión a se evalúa como true, el resultado es b, de lo contrario, el resultado es c. En el caso de las expresiones de estilo de Excel, se escriben con una if instrucción . Independientemente, hay tres operandos. El primero es la condición para evaluar. El segundo es el resultado cuando la condición es verdadera. El tercero es el resultado cuando la condición es falsa.
    • "txtContent":"=if(4 < 5, 'yes', 'no')" da como resultado "yes"
    • "txtContent":"=if(4 > 5, 'yes', 'no')" da como resultado "no"

Operadores relacionados con campos de varios valores : los siguientes operadores solo se usan en un contexto con campos de varios valores de tipo Person, Lookup o Choice.

  • length
  • join
  • loopIndex

length, cuando se proporciona un nombre de campo, devuelve el número de miembros de un campo multivalor. Cuando se proporciona un campo de valor único, length devolverá 1 cuando haya un valor en ese campo.

join concatena los valores de un campo multivalor con un separador especificado. El primer operando apuntará a un valor en un campo de varios valores, por ejemplo "@currentField.lookupValue", "[$AssignedTo.title]". El segundo operando deberá ser un literal de cadena que es el separador que combina los valores juntos.

loopIndexCuando se proporciona con el nombre de la variable de iterador, devuelve el índice actual (a partir de 0) del iterador. El nombre del iterador debe proporcionarse como literal de cadena. loopIndex solo funciona dentro del elemento con el respectivo forEach habilitado o sus elementos secundarios.

Para obtener ejemplos, vea Aplicar formato a campos de varios valores.

Operadores relacionados con cadenas: se pueden usar algunos de los operadores detallados anteriormente al trabajar con valores de cadena:

  • +
  • indexOf (para la solución alternativa de longitud de cadena)

+ se puede usar cuando sea necesario concatenar cadenas, por ejemplo:

"txtContent": "=[$column1] + ' ' + [$column2] + 'some other text'"

indexOf Dado que el operador length no funciona para los tipos de valor de cadena (devolverá 1 o 0), indexOf puede servirnos como una buena solución alternativa para obtener la longitud de una cadena, por ejemplo: indexOf([$column1] + '^', '^'). Usaremos '^' o cualquier otro carácter para averiguar el final de la cadena.

Operandos

Especifica los parámetros u operandos de una expresión. Esta es una matriz de objetos de la expresión o valores base.

Valores de cadena especial

Los valores de txtContent, estilos y atributos pueden ser cadenas u objetos de expresión. Se admiten algunos modelos de cadena especial para recuperar los valores de los campos de la lista y el contexto del usuario.

"@currentField"

Evaluará el valor del campo actual.

Algunos tipos de campos se representan como objetos. Para obtener el valor de un objeto, haga referencia a una propiedad específica dentro de ese objeto. Por ejemplo, si el campo activo es un campo de contacto o grupo, especifique @currentField.title para recuperar el nombre del contacto, que se suele mostrar en las vistas de lista. Estos son los tipos de campo que se representan como objetos con una lista de sus propiedades.

Nota:

El valor @currentField.title devuelve de forma predeterminada el nombre de un contacto. Pero, si se ajustó la opción “Mostrar campo” del campo de contacto, podría cambiar el valor de la propiedad title. Por ejemplo, un campo de contacto con la opción “Mostrar campo” configurada como “Departamento” tendrá el departamento de la persona de la propiedad title.

Campos de contactos

El objeto de campo de persona tiene las propiedades siguientes (con valores de ejemplo):

{
  "id": "122",
  "title": "Kalya Tucker",
  "email": "kaylat@contoso.com",
  "sip": "kaylat@contoso.com",
  "picture": "https://contoso.sharepoint.com/kaylat_contoso_com_MThumb.jpg?t=63576928822",
  "department":"Human Resources",
  "jobTitle":"HR Manager"
}

El campo Personas puede tener tarjetas de activación de perfil y formato:

{
  "elmType": "div",
  "txtContent": "[$Editor.title]",
  "defaultHoverField": "[$Editor]"
}

Campos de fecha y hora

El valor de los campos de fecha y hora se puede recuperar de distintas formas, según el formato de fecha que quiera mostrar. Se admiten los métodos siguientes para convertir valores de fecha en formatos específicos:

  • toLocaleString(): Muestra un tipo de fecha completamente expandido con la fecha y hora.
  • toLocaleDateString(): Muestra un tipo de fecha con solo la fecha.
  • toLocaleTimeString(): Muestra un tipo de fecha con solo la hora.

Por ejemplo, el siguiente JSON mostrará el campo actual (suponiendo que sea un campo de fecha) como una cadena de fecha y hora.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": {
    "operator": "toLocaleString()",
    "operands" : ["@currentField"]
  }
}

El siguiente ejemplo es el mismo de arriba, pero en este caso se usa la sintaxis de expresiones de estilo Excel:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "=toLocaleString(@currentField)"
}

Campos de ubicación

El objeto de campo de ubicación tiene las propiedades siguientes (con valores de ejemplo):

{
  "Address": {
    "City": "Knoxville",
    "CountryOrRegion": "United States",
    "State": "TN",
    "Street": "963 Worlds Fair Park Dr"
  },
  "Coordinates": {
    "Latitude": "35.961673736572266",
    "Longitude": "-83.92420959472656"
  },
  "DisplayName": "World's Fair Park",
  "LocationUri": "https://www.bingapis.com/api/v6/localentities/8346bf26-6da4-104c-6ba5-2334b83f6ac8?setLang=en"
}

En el ejemplo siguiente se muestra cómo usar un campo de ubicación en el campo activo.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "block"
  },
  "children": [
    {
      "elmType": "a",
      "txtContent": "@currentField.DisplayName",
      "attributes": {
        "href": "='https://www.bing.com/maps?cp=' + @currentField.Coordinates.Latitude + '~' + @currentField.Coordinates.Longitude + '&lvl=17&sV=2'",
        "target": "_blank",
        "title": "=@currentField.Coordinates.Latitude + ', ' + @currentField.Coordinates.Longitude"
      },
      "style": {
        "display": "block"
      }
    },
    {
      "elmType": "div",
      "txtContent": "@currentField.Address.Street"
    },
    {
      "elmType": "div",
      "txtContent": "=@currentField.Address.City + ', ' + @currentField.Address.State"
    },
    {
      "elmType": "div",
      "txtContent": "@currentField.Address.CountryOrRegion"
    }
  ]
}

Campos de búsqueda

El objeto de campo de búsqueda tiene las propiedades siguientes (con valores de ejemplo):

{
  "lookupId": "100",
  "lookupValue": "North America",
}

En el ejemplo siguiente se muestra cómo usar un campo de búsqueda en el campo activo.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "a",
  "txtContent": "@currentField.lookupValue",
  "attributes": {
    "href": {
      "operator": "+",
      "operands": [
        "https://contoso.sharepoint.com/teams/Discovery/Lists/Regions/DispForm.aspx?ID=",
        "@currentField.lookupId"
      ]
    },
    "target": "_blank"
  }
}

Campos de hipervínculo

El objeto de campo de hipervínculo tiene las propiedades siguientes (con un valor de ejemplo):

{
  "desc": "SharePoint Patterns and Practices",
}

Para hacer referencia al valor de la dirección URL, use @currentField.

En el ejemplo siguiente se muestra cómo usar un campo Hipervínculo en el campo activo.

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

Campos de página

El objeto de campo de imagen tiene la siguiente fileName propiedad:

{
  "fileName": "image.png",
}

Nota:

A partir de julio de 2024, solo la fileName propiedad tiene un valor.

El siguiente ejemplo muestra cómo se puede utilizar un campo de imagen en un campo actual.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
    "src": "=getThumbnailImage(@currentField, 400, 300)",
    "alt": "@currentField.fileName"
  },
  "style": {
    "width": "100%",
    "max-width": "100%"
  }
}

Campos de Estado de aprobación

El objeto de campo de Estado de aprobación tiene la siguiente propiedad (con valor de ejemplo):

{
  "displayValue": "Approved",
  "numeric": 0
}

displayValue es una cadena localizada del estado de aprobación.

@currentField o [$__ModerationStatus] también se asignará internamente al siguiente valor numérico interno:

  • 0: Aprobado
  • 1: Denegado
  • 2: Pendiente
  • 3: Borrador
  • 4: Programado

[$_ModerationStatus] field admite comparaciones con las cadenas y el valor numérico. Las comparaciones numéricas funcionan entre configuraciones regionales e idiomas, que serán la manera recomendada para este campo.

Las siguientes expresiones se evalúan a la salida de la derecha, para cuando el estado es Pending:

// reading field value
"[$_ModerationStatus]" => "Pending"

// obtaining the internal numeric value:
"=Number([$_ModerationStatus])" => 2
"=[$_ModerationStatus.numeric]" => 2

// addition results in string concatenation:
"='status:'+[$_ModerationStatus]" => 'status:Pending'

// numeric comparisons
"=([$_ModerationStatus] == 2)" => true
"=([$_ModerationStatus] != 1)" => true

// other comparators are rarely useful, for cases where you want might want to exclude Draft & Scheduled
"=([$_ModerationStatus] < 3)" => true

// localized string comparison, works only with one locale (en-us here)
"=if([$_ModerationStatus]=='Pending','This Works too!', 'Nope!')" => 'This Works too!'

En el ejemplo siguiente se muestra cómo se puede usar un campo de estado de aprobación en un campo actual:

{
  "elmType": "div",
  "txtContent": "@currentField.displayValue",
  "style": {
    "color": "=if(@currentField == 2, 'red', '')"
  }
}

"[$FieldName]"

En la columna, se aplica formato en el contexto de toda la fila. Puede usar este contexto para hacer referencia a los valores de otros campos en la misma fila especificando el nombre interno del campo entre corchetes y precedido por un signo de dólar: [$InternalName]. Por ejemplo, para obtener el valor de un campo con el nombre interno “VentasMarzo”, use [$MarchSales].

Nota:

La referencia a otros campos solo funcionará si se incluyen en la misma vista.

Si el valor de un campo es un objeto, se puede obtener acceso a las propiedades del mismo. Por ejemplo, para obtener acceso a la propiedad “Title” de un campo de contacto denominado “ClientePotencial”, use “[$Clientepotencial.title]”.

"[!FieldName]"

En el formato de columna y vista, puede hacer referencia a los metadatos de cualquier campo especificando el nombre interno del campo rodeado de corchetes y precedido por un signo de exclamación: [!InternalName].

Actualmente, el nombre para mostrar del campo está disponible en estos metadatos y se puede acceder a él mediante DisplayName la propiedad : [!SalesLead.DisplayName].

"@currentWeb"

Esto evaluará la dirección URL absoluta del sitio. Esto equivale al valor webAbsoluteUrl en el contexto de la página. Este valor solo está disponible en SharePoint Online.

"@me"

Esto evaluará la dirección de correo electrónico del usuario que ha iniciado sesión actualmente.

Este campo se puede usar para mostrar la dirección de correo electrónico del usuario actual, pero es más probable que se use dentro de unas condiciones. A continuación se muestra un ejemplo de cómo establecer el color de un campo de persona en rojo cuando es igual al usuario que ha iniciado sesión y el azul en caso contrario:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField.title",
  "style": {
    "color": {
      "operator": "?",
      "operands": [
        {
            "operator": "==",
            "operands": [
              "@me",
              "@currentField.email"
            ]
        },
          "red",
          "blue"
      ]
    }
  }
}

El siguiente ejemplo es el mismo de arriba, pero en este caso se usa la sintaxis de expresiones de estilo Excel:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField.title",
  "style": {
    "color": "=if(@me == @currentField.email, 'red', 'blue')"
  }
}

"@now"

Esto evaluará la fecha y hora actuales.

"@rowIndex"

Esto evaluará el índice representado de una fila dentro de una vista. Este valor se obtiene en función de la posición de procesamiento y se mantiene coherente a la posición, incluso si se ordenan y filtran las vistas. Los índices empiezan en 0. Este valor solo está disponible en SharePoint Online.

El siguiente ejemplo muestra el uso del valor dentro de un formato de vista para aplicar estilos alternativos a las filas:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
  "additionalRowClass": "=if(@rowIndex % 2 == 0,'ms-bgColor-themeLighter ms-bgColor-themeLight--hover','')"
}

"@window.innerHeight"

Se evaluará como un número igual al alto de la ventana del explorador (en píxeles) cuando se represente la lista.

"@window.innerWidth"

Esto equivale a un número igual al ancho de la ventana del explorador (en píxeles) cuando se procesó la lista.

Miniaturas

En una biblioteca de documentos, hay una serie de tokens que se pueden usar para recuperar la dirección URL de la miniatura de un archivo, entre los que se incluyen:

  • @thumbnail.small, @thumbnail.mediumy @thumbnail.large evalúe la dirección URL de miniatura en tres tamaños predefinidos.
  • @thumbnail.<bounding size> evalúa la dirección URL a la miniatura más grande que no es mayor que el tamaño de límite en ancho y alto. Por ejemplo, @thumbnail.150 se evalúa como la dirección URL de una miniatura de no más de 150 x 150 píxeles.
  • @thumbnail.<bounding width>x<bounding height> evalúa la dirección URL a la miniatura más grande que no es mayor que el ancho de límite y el alto de límite. Por ejemplo, @thumbnail.100x200 se evalúa como la dirección URL de una miniatura de no más de 100 píxeles de ancho y no más de 200 píxeles de alto.

Estos tokens no darán ningún valor en los elementos que no sean archivos, incluidas las carpetas.

Nota:

La relación de aspecto de la miniatura generada es la misma que la apariencia del archivo, el cambio de los tamaños de límite no afectará a la relación de aspecto de la miniatura.

Sugerencia

Las miniaturas solo están disponibles para una lista de formatos de archivo admitidos. Significa que a veces, la dirección URL generada no es accesible debido a la falta de compatibilidad en algunos formatos. Sin embargo, si se establece un token de miniatura válido como el únicosrc atributo de una img etiqueta, nos encargaremos de él y ocultaremos la imagen cuando no esté disponible.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "img",
  "attributes": {
    "src": "@thumbnail.200x150",
    "alt": "='Thumbnail of file ' + [$FileLeafRef]"
  },
  "style": {
    "width": "100%",
    "max-width": "100%"
  }
}

La tarjeta de activación de archivo predeterminada usa FileLeafRef

{
  "elmType": "img",
  "style": {
    "width": "100%",
    "height": "100%",
    "display": "=if([$File_x0020_Type] == '', 'none', '')"
  },
  "attributes": {
    "src": "@thumbnail.300x300"
  },
  "defaultHoverField": "[$FileLeafRef]"
}

displayValue

Los siguientes tipos de columna pueden usar displayValue la propiedad para obtener el valor representado predeterminado, en función de la configuración de columna:

  • Fecha y hora
  • Número
  • Sí/No
  • Divisa
  • Estado de aprobación
{
  "elmType": "div",
  "txtContent": "@currentField.displayValue"
}

Esto también funciona con el nombre del campo:

{
  "elmType": "div",
  "txtContent": "[$FieldName.displayValue]"
}

"@isSelected"

Esto se evaluará true como para los elementos seleccionados en una vista y false en caso contrario.

"@lcid"

Esto se evaluará como el LCID de la referencia cultural actual. Esto se puede usar para dar formato a la fecha, hora y números.

"@UIlcid"

Esto se evaluará como el LCID de la referencia cultural actual de la interfaz de usuario. Esto se puede usar para mostrar cadenas de presentación localizadas.