Referência de sintaxe de formatação

elmType

Especifica o tipo de elemento a ser criado. Os elementos válidos incluem:

div
span
a
img
svg
path
button
p
filepreview

Qualquer outro valor resultará em um erro.

filepreview

Use o especial elmTypefilepreview com o src atributo definido como @thumbnail.<Size> para exibir miniaturas de arquivos em sua biblioteca de documentos.

Se a miniatura for carregada com êxito, um pequeno ícone de tipo de marca ficará visível na parte inferior esquerda. Se a miniatura não for carregada (ou se o tipo de arquivo não for compatível com miniaturas), um ícone de tipo de arquivo será mostrado.

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

Segurança IMG SRC

Imagens dos seguintes domínios são permitidas:

domínio do locatário, domínios multigeográficos configurados e domínios personalizados (company.sharepoint.com)
cdn.office.net, akamaihd.net, static2.sharepointonline.com CDNs

A maioria das outras fontes de imagem externas são bloqueadas por padrão em formatadores personalizados. Para incluir imagens externas e permitir domínios ou CDNs específicos, o domínio precisa ser adicionado a uma configuração no nível do site. Para obter mais informações, consulte: Permitir ou restringir a capacidade de inserir conteúdo em páginas do SharePoint

txtContent

Uma propriedade opcional que especifica o conteúdo de texto do elemento especificado por elmType. O valor dessa propriedade pode ser uma cadeia de caracteres (incluindo cadeias de caracteres especiais) ou um objeto Expression.

estilo

Uma propriedade opcional que especifica atributos de estilo a serem aplicados ao elemento especificado por elmType. Trata-se de um objeto com pares nome-valor que correspondem a nomes e valores de CSS. Os valores de cada propriedade no objeto de estilo podem ser uma cadeia de caracteres (incluindo cadeias de caracteres especiais) ou um objeto Expression. Os seguintes atributos de estilo são permitidos.

Cuidado

A propriedade de estilo flutuante não é mais compatível com o formatador personalizado. Os usuários são incentivados a usar o Modo de Exibição de Galeria como uma alternativa mais estável.

'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' (Deprecated)
'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

O exemplo a seguir mostra o valor de um objeto de estilo. Neste exemplo, duas propriedades de estilo (padding e background-color) serão aplicadas. O valor padding é um valor de cadeia de caracteres embutido em código. O valor background-color é uma Expression que é avaliada como vermelho (#ff0000) ou verde (#00ff00), dependendo se o valor do campo atual (especificado pelo @currentField) é ou não inferior a 40. Para obter mais informações, consulte a seção de 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"
      ]
    }
  }
}

Aqui está o mesmo exemplo acima usando a sintaxe da expressão de estilo do 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')"
  }
}

attributes

A attributes propriedade opcional especifica mais atributos a serem adicionados ao elemento especificado por elmType. Trata-se de um objeto com pares nome-valor. Nomes de atributos devem ser um dos seguintes:

href
rel
src
class
destino
title
role
iconName
d
aria
interceptação de dados
viewBox
preserveAspectRatio
draggable

Qualquer outro nome de atributo resultará em um erro. Valores de atributos podem ser cadeias de caracteres ou objetos Expression. O exemplo a seguir adiciona dois atributos (target e href) ao elemento especificado por elmType. O atributo target está embutido em código a uma cadeia de caracteres. O atributo href é uma expressão que será avaliada em tempo de execução como http://finance.yahoo.com/quote/ + o valor do campo atual (@currentField).

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

children

A children propriedade opcional especifica elementos filho do elemento especificado por elmType. O valor é especificado como uma matriz de objetos elm. Pode haver um nível arbitrário de aninhamento. Se um elemento tiver a propriedade txtContent, as propriedades filho serão ignoradas.

debugMode

A debugMode propriedade opcional destina-se à depuração. Ela produz mensagens de erro e registra avisos no console.

forEach

A forEach propriedade opcional permite que um elemento se duplique para cada membro de um campo de vários valores específico ou de uma matriz. O valor da "forEach" propriedade deve estar no formato de um ou "iteratorName in @currentField" ou "iteratorName in [$FieldName]" ."iteratorName in Expression-Returning-An-Array"

iteratorName Representa o nome da variável do iterador que é usada para representar o membro atual do campo de valores múltiplos. O nome do iterador pode ser qualquer combinação de caracteres alfanuméricos e um sublinhado (_) que não comece com um dígito.

O campo usado no loop deve estar em um tipo de campo compatível com opções de vários valores habilitadas: Pessoa, Pesquisa e Escolha. Uma expressão retornando uma matriz também pode ser usada.

No elemento com forEach ou em seus elementos filhos, a variável iterador pode ser referida como se fosse um novo campo. O índice iterador pode ser acessado com o operador loopIndex.

forEach não pode ser aplicado ao elemento raiz e não renderizará nenhum elemento se não houver valor no campo.

Consulte Formatação de campos com valores múltiplos para obter exemplos.

customRowAction

Elementos button podem ser usados para iniciar uma ação específica no item pai. Cada button elemento tem uma propriedade required, customRowAction, que especifica um action que é obtido quando o botão é selecionado. Esta ação deve ser um dos seguintes valores:

defaultClick: botões com esta ação farão a mesma coisa que clicar no item de lista em um modo de exibição não personalizado. O exemplo a seguir demonstra um botão que, quando selecionado, simula uma seleção no item, o que resulta na abertura do item de lista. Adicionar este botão de exemplo a uma biblioteca de documentos simula uma seleção no arquivo ou na pasta, o que resulta na abertura do arquivo ou pasta.
```
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "button",
  "txtContent": "Open this item",
  "customRowAction": {
    "action": "defaultClick"
  }
}
```

compartilhar: selecionar o botão abrirá a caixa de diálogo de compartilhamento. Veja a seguir um exemplo desse tipo de botão:

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

excluir: selecionar o botão abrirá a caixa de diálogo de confirmação de exclusão.
editProps: Selecionar o botão abrirá a página de propriedades do item no modo de edição.
openContextMenu: selecionar o botão abrirá o menu de contexto padrão do item.

setValue: selecionar o elemento atualizará o item com os valores de campo fornecidos.

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

executeFlow: selecionar o botão iniciará o Flow especificado, especificado pelo ID dentro do actionParams atributo. Para um exemplo disso, confira Criar um botão para iniciar um Fluxo. O exemplo a seguir demonstra esse tipo de botão:
```
{
  "$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\"}"
  }
}
```
O atributo actionParams pode ter as seguintes opções ao usar a ação executeFlow:
- id: ID do Fluxo a ser iniciado (obrigatório)
- headerText: coloca o texto na parte superior do painel de fluxo (opcional)
- runFlowButtonText: coloca o texto do botão principal no painel de fluxo (opcional)
incorporar: clicar no botão abrirá uma frase de destaque com conteúdo incorporado. O conteúdo será determinado pela URL fornecida no src atributo em actionInput. Você também pode controlar o height e width do texto explicativo usando o actionInput.
Observação
- O src pode ser a parte da URL de um código de inserção gerado por um aplicativo (geralmente o src de um iframe) ou qualquer URL válida que retorne conteúdo HTML incorporável, como um formulário de exibição de item de lista do SharePoint (DispForm.aspx?ID=<ItemID>).
- Essa ação está disponível na versão mais recente das Listas da Microsoft e da Biblioteca de Documentos.
Para obter mais informações sobre como permitir ou restringir domínios, consulte Permitir ou restringir a capacidade de inserir conteúdo em listas do SharePoint usando formatadores 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 👩‍🍳"
}
```
O atributo actionInput pode ter as seguintes opções ao usar a ação embed:
- src: A URL do conteúdo que você deseja incorporar. (obrigatório)
- height: a altura do texto explicativo dentro do qual o conteúdo inserido será renderizado. O valor padrão é 300. (opcional)
- largura: a largura do texto explicativo dentro do qual o conteúdo inserido será renderizado. O valor padrão é 300. (opcional)

customCardProps

Adicione um card personalizado ao elemento, que aparece em foco ou click evento. As seguintes personalizações estão disponíveis:

"formatter": objeto JSON que define a formatação para cartões personalizados.
"openOnEvent": evento no qual o customCard deve ser aberto.
- Valores válidos: click, hover
"directionalHint": especifique a direção relativa ao alvo no qual o card personalizado será posicionado. Este é o local preferencial, mas não é garantido dependendo do espaço.
- Valores válidos: bottomAutoEdge, bottomCenter, bottomLeftEdge, bottomRightEdgeleftBottomEdgeleftCenterleftTopEdgerightBottomEdgerightCenterrightTopEdgetopAutoEdgetopCentertopLeftEdgetopRightEdge
"isBeakVisible": especifique se o beak deve ser mostrado ou não.
"beakStyle": Especifica o objeto de estilo para o bico do card personalizado.

defaultHoverField

Adiciona o card de perfil para os campos de pessoas ou cartão sensível ao mouse de arquivo para arquivos na biblioteca de documentos.

"defaultHoverField": "[$Editor]" adiciona um cartão de perfil para o campo do editor
"defaultHoverField": "[$FileLeafRef]" adiciona um cartão de foco de arquivo em documentLibrary

columnFormatterReference

Ele será substituído pelo formatador JSON da coluna referenciada. Não há suporte para referência de vários níveis.

Não há suporte para referências para modelos de formatador de coluna de múltipla escolha e formatadores de coluna não baseados em modelos.

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

inlineEditField

Adiciona o editor de campo na coluna referenciada.

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

filePreviewProps

É filePreviewProps uma propriedade opcional que permite substituir os estilos padrão do ícone do tipo de arquivo e do ícone do tipo de marca em filepreview.elmType.

O fileTypeIconClass e brandTypeIconClass pode ser usado para fornecer nomes de classe CSS para o ícone do tipo de arquivo e os elementos do ícone do tipo de marca, respectivamente.

O fileTypeIconStyle e brandTypeIconStyle pode ser usado para fornecer estilos para o ícone de tipo de arquivo e o ícone de tipo de marca, respectivamente. Esses estilos terão precedência sobre os mesmos estilos provenientes das classes CSS fornecidas pelas duas propriedades acima.

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

Expressões

Os valores para txtContentpropriedades de estilo e propriedades de atributo podem ser expressos como expressões para que sejam avaliados em tempo de execução com base no contexto do campo (ou linha) atual. Objetos Expression podem ser aninhados para conter outros objetos Expression.

As expressões podem ser escritas usando expressões no estilo do Excel no SharePoint Online e na Edição de Assinatura do SharePoint Server a partir da atualização do recurso 22H2 ou usando expressões de Árvore de Sintaxe Abstrata no SharePoint Online, na Edição de Assinatura do SharePoint Server e SharePoint Server 2019.

Todos os campos podem ViewFields ser referenciados em expressões, mesmo que estejam marcados com Explicit.

Expressões estilo Excel

Todas as expressões estilo Excel começam com um sinal (=). Esse estilo de expressão só está disponível no SharePoint Online e na Edição de Assinatura do SharePoint Server a partir da atualização do recurso 22H2. Esse estilo de expressão não está disponível no SharePoint Server 2019 ou na Edição de Assinatura do SharePoint Server antes da atualização do recurso 22H2.

Essa expressão condicional simples é avaliada como none se @me não for igual a [$Author.email]e é avaliada como '' caso contrário:

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

Instruções if/else mais complexas podem ser escritas da seguinte forma:

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

Operadores não condicionais que usam um ou dois operandos podem ser escritos da seguinte forma:

=[$foo] * -7

=sin(@currentField)

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

Expressões de Árvore de Sintaxe Abstrata

O exemplo a seguir contém um objeto Expression que executa a expressão:

(@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

Operadores especificam o tipo de operação a ser realizada. Os valores de operador válidos incluem:

+
-
/
*
<
>
%
==
!=
<=
>=
||
&&
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 binários - Os operadores binários aritméticos padrão que esperam que dois operandos incluam são:

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

Operadores unários - Os operadores unários padrão que esperam apenas um operando são:

toString(): retorna uma cadeia de caracteres que representa o objeto
- "txtContent": "=toString(45)" resulta em "45"
Number(): retorna o valor numérico, se o operando não for um número, NaN é retornado
- "txtContent": "=Number('365')" resulta em "365"
- "txtContent": "=Number('Wowee')" resulta em NaN
- "txtContent": "=Number(Date('12/26/1981'))" resultados em 378190800000 milissegundos desde 1º de janeiro de 1970
Date(): retorna um objeto datetime do parâmetro (converte cadeias de caracteres ou números em datas, sensível à localidade)
- "txtContent": "=Date('12/26/1981')" resulta em 26/12/1981, 12:00:00
cos: retorna o cosseno do ângulo especificado que deve ser especificado em radianos
- "txtContent": "=cos(5)" resulta em 0.28366218546322625
sin: retorna o seno de um número
- "txtContent": "=sin(90)" resulta em 0.8939966636005579
toDateString(): retorna uma data em um formato curto e amigável
- "txtContent": "=toDateString(@now)" O resultado não varia com base na localidade do usuário e será semelhante a "Qua, 03 de ago de 2022"
toLocaleString(): retorna uma representação de uma data que diferencia idioma
- "txtContent":"=toLocaleString(@now)"Os resultados variam de acordo com a localidade do usuário, mas en-us se parece com "2/5/2019, 13:22:24"
toLocaleDateString(): retorna uma representação sensível ao idioma apenas da parte de data de uma data
- "txtContent":"=toLocaleDateString(@now)" Os resultados variam de acordo com a localidade do usuário, mas en-us se parece com "05/02/2019"
toLocaleTimeString(): retorna uma representação sensível ao idioma apenas da parte da hora de uma data
- "txtContent":"=toLocaleTimeString(@now)" Os resultados variam de acordo com a localidade do usuário, mas en-us se parece com "1:22:24 PM"
toLowerCase: retorna o valor convertido em letras minúsculas (só funciona em cadeias de caracteres) - Disponível apenas no SharePoint Online
- "txtContent":"=toLowerCase('DogFood')" resulta em "dogfood"
abs: retorna o valor absoluto para um determinado número - Disponível apenas no SharePoint Online
- "txtContent":"=abs(-45)" resulta em 45
length: retorna o número de itens em uma matriz (pessoa com seleção múltipla ou campo de escolha), para todos os outros tipos de valor, retorna 1 quando verdadeiro e 0 quando falso. NÃO fornece o comprimento de um valor de sequência (confira a solução alternativa indexOf explicada posteriormente para essa operação). - Disponível somente no SharePoint Online
- "txtContent":"=length(@currentField)" pode resultar em 2 se houver dois valores selecionados
- "txtContent":"=length('Some Text')" resulta em 1
- "txtContent":"=length('')" resulta em 0
- "txtContent":"=length(45)" resulta em 1
- "txtContent":"=length(0)" resulta em 0
floor: retorna o maior número inteiro menor ou igual a um determinado número. - Disponível somente no SharePoint Online
- "txtContent":"=floor(45.5)" resulta em 45
ceiling: arredonda o número fornecido para cima para o próximo maior número inteiro ou inteiro. - Disponível somente no SharePoint Online
- "txtContent":"=ceiling(45.5)" resulta em 46
getDate: retorna o dia do mês da data determinada. - Disponível somente no SharePoint Online
- "txtContent":"=getDate(Date('12/26/1981'))" resulta em "26"
getMonth: retorna o mês na data especificada de acordo com a hora local, como um valor baseado em zero (em que zero indica o primeiro mês do ano). - Disponível somente no SharePoint Online
- "txtContent":"=getMonth(Date('12/26/1981'))" resulta em 11
getYear: retorna o ano da data determinada. - Disponível somente no SharePoint Online
- "txtContent":"=getYear(Date('12/26/1981'))" resulta em 1981
toUpperCase: retorna o valor convertido em letras maiúsculas (só funciona em cadeias de caracteres) - Disponível apenas no SharePoint Online
- "txtContent":"=toUpperCase('DogFood')" resulta em "DOGFOOD"

Operadores binários – Os seguintes são os operadores que esperam dois operandos:

indexOf: leva dois operandos. O primeiro é o texto (ou matriz) em que você deseja pesquisar, o segundo é o texto que você deseja pesquisar. Retorna o valor de índice da primeira ocorrência do termo de pesquisa dentro da cadeia de caracteres (ou matriz). Índices começam com 0. Se o termo de pesquisa não for encontrado no texto (ou matriz), -1 será retornado. Esse operador diferencia maiúsculas de minúsculas. - Disponível somente no SharePoint Online
- "txtContent": "=indexOf('DogFood', 'Dog')" resulta em 0
- "txtContent": "=indexOf('DogFood', 'F')" resulta em 3
- "txtContent": "=indexOf('DogFood', 'Cat')" resulta em -1
- "txtContent": "=indexOf('DogFood', 'f')" resulta em -1
join: leva dois operandos. A primeira é uma matriz (pessoa com seleção múltipla ou campo de opção) e a segunda é a cadeia de caracteres de separação. Retorna uma concatenação de cadeia de caracteres dos valores da matriz separados pela cadeia de caracteres de separação. - Disponível somente no SharePoint Online
- "txtContent": "=join(@currentField, ', ')" pode resultar em "Maçã, Laranja, Cereja" (dependendo dos valores selecionados)
- "txtContent": "=join(@currentField.title, '|')" pode resultar em "Megan Bowen|Alex Wilber" (dependendo das pessoas selecionadas)
pow: retorna a base para a potência do expoente. - Disponível somente no SharePoint Online
- "txtContent":"=pow(2,3)" resulta em 8
lastIndexOf: retorna a posição da última ocorrência de um valor especificado em uma cadeia de caracteres (ou matriz)
- "txtContent": "=lastIndexOf('DogFood DogFood', 'Dog')" resulta em 8
- "txtContent": "=lastIndexOf('DogFood DogFood', 'F')" resulta em 11
- "txtContent": "=lastIndexOf('DogFood DogFood', 'Cat')" resulta em -1
- "txtContent": "=lastIndexOf('DogFood DogFood', 'f')" resulta em -1
startsWith: determina se uma cadeia de caracteres começa com os caracteres de uma cadeia de caracteres especificada
- "txtContent":"=startsWith('DogFood', 'Dog')" resulta em verdadeiro
- "txtContent":"=startsWith('DogFood', 'Food')" resulta em falso
endsWith: determina se uma cadeia de caracteres termina com os caracteres de uma cadeia de caracteres especificada
- "txtContent":"=endsWith('DogFood', 'Dog')" resulta em falso
- "txtContent":"=endsWith('DogFood', 'Food')" resulta em verdadeiro
getUserImage: retorna uma URL apontando para a imagem de perfil do usuário para um determinado email e tamanho preferido
- "src":"=getUserImage('kaylat@contoso.com', 'small')" retorna uma URL que aponta para a imagem de perfil do usuário em resolução pequena
- "src":"=getUserImage('kaylat@contoso.com', 's')" retorna uma URL que aponta para a imagem de perfil do usuário em resolução pequena
- "src":"=getUserImage('kaylat@contoso.com', 'medium')" retorna uma URL que aponta para a imagem de perfil do usuário em resolução média
- "src":"=getUserImage('kaylat@contoso.com', 'm')" retorna uma URL que aponta para a imagem de perfil do usuário em resolução média
- "src":"=getUserImage('kaylat@contoso.com', 'large')" retorna uma URL apontando para a imagem de perfil do usuário em resolução grande
- "src":"=getUserImage('kaylat@contoso.com', 'l')" retorna uma URL apontando para a imagem de perfil do usuário em resolução grande
appendTo: retorna uma matriz com a entrada fornecida acrescentada à matriz especificada
- "txtContent": "=appendTo(@currentField, 'Choice 4')" retorna uma matriz com 'Opção 4' adicionada à @currentField matriz
- "txtContent": "=appendTo(@currentField, 'kaylat@contoso.com')" Retorna uma matriz com 'kaylat@contoso.com' adicionado à @currentField matriz
removeFrom: retorna uma matriz com a entrada fornecida removida da matriz fornecida, se presente
- "txtContent": "=removeFrom(@currentField, 'Choice 4')" retorna uma matriz com 'Opção 4' removida da @currentField matriz
- "txtContent": "=removeFrom(@currentField, 'kaylat@contoso.com')" Retorna uma matriz com 'kaylat@contoso.com' removido da @currentField matriz
split: divide a cadeia de caracteres fornecida em uma lista ordenada de subcadeias de caracteres procurando o padrão fornecido e retorna uma matriz dessas subcadeias
- "txtContent": "=split('Olá, Mundo', ' ')" retorna uma matriz com duas cadeias de caracteres - 'Hello' e 'World'
addDays: retorna um objeto datetime com dias adicionados (ou deduzidos) do valor datetime fornecido
- "txtContent": "=addDays(Date('11/14/2021'), 3)" retorna 17/11/2021, 00:00:00
- "txtContent": "=addDays(Date('11/14/2021'), -1)" retorna 13/11/2021, 00:00:00
addMinutes: retorna um objeto datetime com minutos adicionados (ou deduzidos) do valor datetime fornecido
- "txtContent": "=addMinutes(Date('11/14/2021'), 3)" retorna 14/11/2021, 00:03:00
- "txtContent": "=addMinutes(Date('11/14/2021'), -1)" retorna 13/11/2021, 11:59:00

Operadores ternários – Os seguintes são os operadores que esperam três operandos:

substring: retorna a parte da cadeia de caracteres entre os índices inicial e final. - Disponível somente no SharePoint Online
- "txtContent":"=substring('DogFood', 3, 4)" resulta em F
- "txtContent":"=substring('DogFood', 4, 3)" resulta em F
- "txtContent":"=substring('DogFood', 3, 6)" resulta em Foo
- "txtContent":"=substring('DogFood', 6, 3)" resulta em Foo
O método substring() retorna a parte da string entre os índices inicial e final ou para o final da string.
replace: pesquisa uma cadeia de caracteres (ou matriz) por um valor especificado e retorna uma nova cadeia de caracteres (ou matriz) onde o valor especificado é substituído. Com relação às cadeias de caracteres, somente a primeira instância do valor será substituída.
- "txtContent":"=replace('Hello world', 'world', 'everyone')" resulta em Olá a todos
- "txtContent":"=replace([$MultiChoiceField], 'Choice 1', 'Choice 2')" retorna uma matriz substituindo a Opção 1 pela Opção 2
- "txtContent":"=replace([$MultiUserField], @me, 'kaylat@contoso.com')" retorna uma matriz substituindo por @me 'kaylat@contoso.com'
replaceAll: procura uma cadeia de caracteres para um valor especificado e retorna uma nova cadeia de caracteres (ou matriz) onde o valor especificado é substituído. Para cadeias de caracteres, todas as instâncias do valor serão substituídas.
- "txtContent":"=replaceAll('H-e-l-l-o W-o-r-l-d', '-', '')"resultados em Olá, Mundo
padStart: preenche a cadeia de caracteres atual com outra cadeia de caracteres até que a cadeia de caracteres resultante atinja o comprimento determinado. O preenchimento é aplicado desde o início da cadeia de caracteres atual.
- "txtContent":"=padStart('DogFood', 10, 'A')" resulta em AAADogFood
- "txtContent":"=padStart('DogFood', 10, 'AB')" resulta em ABADogFood
- "txtContent":"=padStart('DogFood', 5, 'A')" resulta em DogFood
padEnd: preenche a cadeia de caracteres atual com uma cadeia de caracteres especificada até que a cadeia de caracteres resultante atinja o comprimento especificado. O preenchimento é aplicado do fim da cadeia de caracteres atual.
- "txtContent":"=padEnd('DogFood', 10, 'A')" resulta em DogFoodAAA
- "txtContent":"=padEnd('DogFood', 10, 'AB')" resulta em DogFoodABA
- "txtContent":"=padEnd('DogFood', 5, 'A')" resulta em DogFood
getThumbnailImage: retorna uma URL apontando para uma imagem para um determinado campo de imagem e tamanho preferido.
- "src":"=getThumbnailImage([$ImageField], 400, 200)" resulta em uma URL apontando para uma imagem para um determinado campo de imagem com 400 de largura e 200 de altura

Operador condicional – O operador condicional é:

?: Operações condicionais escritas na sintaxe Abstract Tree usam ? como operador. Isso é para obter uma expressão equivalente a a ? b : c, onde se a expressão a for avaliada como verdadeira, o resultado será b, caso contrário, o resultado será c. Para expressões no estilo do Excel, você as escreve com uma if instrução. Independentemente disso, há três operandos. O primeiro é a condição que deve ser avaliada. O segundo é o resultado quando a condição for verdadeira. O terceiro é o resultado quando a condição for falsa.
- "txtContent":"=if(4 < 5, 'yes', 'no')" resulta em "sim"
- "txtContent":"=if(4 > 5, 'yes', 'no')" resulta em "não"

Operadores relacionados a campos de valores múltiplos - Os operadores a seguir são usados apenas em um contexto com campos de valores múltiplos do tipo Pessoa, Pesquisa ou Escolha.

length
join
loopIndex

length, quando fornecida com um nome de campo, retorna o número de membros em um campo de vários valores. Quando um campo de valor único for fornecido, length retornará 1 quando houver um valor nesse campo.

join concatena valores em um campo de vários valores com um separador especificado. O primeiro operando deve apontar para um valor em um campo com vários valores, por exemplo"@currentField.lookupValue", . "[$AssignedTo.title]" O segundo operando deve ser uma cadeia de caracteres literal que é o separador que reúne os valores.

loopIndex, quando fornecido com o nome da variável do iterador, retorna o índice atual (começando em 0) do iterador. O nome do iterador deve ser fornecido como um literal de cadeia de caracteres. loopIndex só funcionaria dentro do elemento com os respectivos forEach habilitados ou seus elementos filhos.

Para obter exemplos, consulte Formatação de campos com valores múltiplos.

Operadores relacionados à cadeia de caracteres - Alguns dos operadores detalhados anteriormente podem ser usados ao trabalhar com valores de cadeia de caracteres:

+
indexOf (para solução alternativa de comprimento de cadeia de caracteres)

+ podem ser usadas quando há necessidade de concatenar cadeias de caracteres, por exemplo:

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

indexOf Como o operador length não funciona para tipos de valor de string (ele retornará 1 ou 0), indexOf pode nos servir como uma boa solução alternativa para obter o comprimento de uma string, por exemplo: indexOf([$column1] + '^', '^'). Usaremos '^' ou qualquer outro caractere a ser usado para descobrir o final da cadeia de caracteres.

Operandos

Especifica os parâmetros ou operandos para uma expressão. Trata-se de uma matriz de objetos Expression ou valores base.

Valores de cadeias de caracteres especiais

Os valores para txtContent, estilos e atributos podem ser cadeias de caracteres ou objetos Expression. Existe suporte para alguns padrões de cadeias de caracteres especiais para recuperar valores dos campos na lista e no contexto do usuário.

"@currentField"

Avaliará o valor do campo atual.

Alguns tipos de campos são representados como objetos. Para gerar um valor de um objeto, consulte uma propriedade específica dentro desse objeto. Por exemplo, se o campo atual for um campo de pessoa/grupo, especifique @currentField.title para recuperar o nome da pessoa, que normalmente é mostrado em exibições de lista. A seguir, os tipos de campo representados como objetos com uma lista de suas propriedades.

Observação

O @currentField.title retorna o nome de uma pessoa por padrão. No entanto, se Show Field do campo de pessoa tiver sido ajustado, ele poderá alterar o valor da propriedade title. Por exemplo, um campo de pessoa com Show Field configurado como Department terá o departamento da pessoa para a propriedade title.

Campos de pessoas

O objeto do campo de pessoas tem as seguintes propriedades ( com valores de exemplo):

{
  "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"
}

O campo Pessoas pode ter cartões de foco de perfil juntamente com formatação:

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

Campos de Data/hora

O valor de campos de Data/Hora pode ser recuperado de várias maneiras diferentes, dependendo do formato de data que você deseja exibir. Existe suporte aos seguintes métodos para converter valores de data em formatos específicos:

toLocaleString() - exibe um tipo de data totalmente expandido com data e hora.
toLocaleDateString() - exibe um tipo de data apenas com a data.
toLocaleTimeString() - exibe um tipo de data apenas com a hora.

Por exemplo, o seguinte JSON exibirá o campo atual (supondo que ele seja um campo de data) como uma cadeia de caracteres de data e hora.

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

Aqui está o mesmo exemplo acima usando a sintaxe da expressão de estilo do Excel:

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

Campos do localização

O objeto do campo de localização tem as seguintes propriedades (com valores de exemplo):

{
  "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"
}

O exemplo a seguir mostra como um campo de localização pode ser usado em um campo atual.

{
  "$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 Pesquisa

O objeto do campo de pesquisa tem as seguintes propriedades (com valores de exemplo):

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

O exemplo a seguir mostra como um campo de pesquisa pode ser usado em um campo atual.

{
  "$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 hiperlink

O objeto do campo de hiperlink tem a seguinte propriedade (com valor de exemplo):

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

Para fazer referência ao valor de URL, use @currentField.

O exemplo a seguir mostra como um campo de hiperlink pode ser usado em um campo atual.

{
  "$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 imagem

O objeto de campo de imagem tem a seguinte fileName propriedade:

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

Observação

A partir de julho de 2024, apenas a fileName propriedade tem um valor.

O exemplo a seguir mostra como é possível utilizar um campo de imagem em um campo atual.

{
  "$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 Status de Aprovação

O objeto do campo de Status de Aprovação tem a seguinte propriedade (com valor de exemplo):

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

displayValueé uma cadeia de caracteres localizada do status de aprovação.

@currentField ou [$__ModerationStatus] também será mapeado internamente para o seguinte valor numérico interno:

0: Aprovado
1: negado
2: Pendente
3: Rascunho
4: Agendado

[$_ModerationStatus] campo suporta comparações com cadeias de caracteres e com o valor numérico. As comparações numéricas funcionam entre localidades e idiomas, o que será a forma recomendada para esse campo.

As expressões a seguir são avaliadas para a saída à direita, para quando o status é 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!'

O exemplo a seguir mostra como um campo de status de aprovação pode ser usado em um campo atual:

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

"[$FieldName]"

A coluna é formatada no contexto de linha inteira. Você pode usar nesse contexto para fazer referência a valores de outros campos na mesma linha, especificando o nome interno do campo entre colchetes e precedido por um cifrão: [$InternalName]. Por exemplo, para obter o valor de um campo com o nome interno "MarchSales", use [$MarchSales].

Observação

A referência a outros campos funcionará apenas se eles forem incluídos no mesmo modo de exibição.

Se o valor de um campo for um objeto, as propriedades desse objeto poderão ser acessadas. Por exemplo, para acessar a propriedade "Title" de um campo de pessoa chamado "SalesLead", use "[$SalesLead.title]".

"[!FieldName]"

Na formatação de coluna e exibição, você pode consultar os metadados de qualquer campo especificando o nome interno do campo entre colchetes e precedido por um ponto de exclamação: [!InternalName].

Atualmente, o nome de exibição do campo está disponível neste metadata, e pode ser acessado usando DisplayName a propriedade: [!SalesLead.DisplayName].

"@currentWeb"

Isso avaliará a URL absoluta do site. Isso equivale ao valor webAbsoluteUrl no contexto da página. Esse valor só está disponível no SharePoint Online.

"@me"

Isso avaliará o endereço de email do usuário conectado no momento.

Este campo pode ser usado para exibir o endereço de email do usuário atual, mas é mais provável que ele seja usado dentro de condições. A seguir, um exemplo de como definir a cor de um campo de pessoa para vermelho quando for igual ao usuário conectado no momento e, caso contrário, azul:

{
  "$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"
      ]
    }
  }
}

Aqui está o mesmo exemplo acima usando a sintaxe da expressão de estilo do 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"

Isso avaliará a data e a hora atuais.

@rowIndex

Isso avaliará o índice renderizado de uma linha em uma exibição. Esse valor é baseado na posição de processamento e permanecerá consistente com base na posição mesmo que os modos de exibição sejam classificados e filtrados. Índices começam com 0. Esse valor só está disponível no SharePoint Online.

Aqui está um exemplo de como usar o valor em um formato de exibição para aplicar estilos alternados às linhas:

{
  "$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"

Isso será avaliado para um número igual à altura da janela do navegador (em pixels) quando a lista for renderizada.

"@window.innerWidth"

Isso será avaliado como um número igual à largura da janela do navegador (em pixels) quando a lista foi processada.

Miniaturas

Em uma biblioteca de documentos, há uma série de tokens que podem ser usados para recuperar a URL para a miniatura de um arquivo, incluindo:

@thumbnail.small, @thumbnail.mediume avalie @thumbnail.large a URL da miniatura em três tamanhos predefinidos.
@thumbnail.<bounding size> avalia a URL para a maior miniatura que não é maior do que o tamanho delimitador em largura e altura. Por exemplo, @thumbnail.150 avalia a URL de uma miniatura com no máximo 150×150 pixels.
@thumbnail.<bounding width>x<bounding height> avalia a URL para a maior miniatura que não é maior do que a largura delimitadora e a altura delimitadora. Por exemplo, @thumbnail.100x200 avalia a URL de uma miniatura com no máximo 100 pixels de largura e 200 pixels de altura.

Esses tokens não geram valor em itens que não sejam arquivos, inclusive pastas.

Observação

A taxa de proporção da miniatura gerada é a mesma aparência do arquivo, a alteração dos tamanhos delimitadores não afetará a proporção da miniatura.

Dica

As miniaturas estão disponíveis apenas para uma lista de formatos de arquivo compatíveis. Isso significa que, às vezes, a URL gerada não fica acessível devido à falta de suporte em determinados formatos. No entanto, se um token de miniatura válido for definido como o únicosrc atributo de uma img marca, cuidaremos disso e ocultaremos a imagem quando ela não estiver disponível.

{
  "$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%"
  }
}

Cartão de detalhes de arquivo padrão usando FileLeafRef

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

displayValue

Os seguintes tipos de coluna podem usar displayValue a propriedade para obter o valor renderizado padrão, com base na configuração da coluna:

Data/Hora
Número
Sim/Não
Moeda
Status de Aprovação

{
  "elmType": "div",
  "txtContent": "@currentField.displayValue"
}

Isso também funciona com o nome do campo:

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

"@isSelected"

Isso avaliará para true os itens selecionados em uma exibição e false de outra forma.

"@lcid"

Isso será avaliado de acordo com o LCID da cultura atual. Isso pode ser usado para formatar a data, a hora e os números.

"@UIlcid"

Isso avaliará o LCID da cultura de interface do usuário atual. Isso pode ser usado para mostrar cadeias de caracteres de exibição localizadas.

Last updated on 2026-08-24

Referência de sintaxe de formatação

elmType

filepreview

Segurança IMG SRC

txtContent

estilo

attributes

children

debugMode

forEach

customRowAction

customCardProps

defaultHoverField

columnFormatterReference

inlineEditField

filePreviewProps

Expressões

Expressões estilo Excel

Expressões de Árvore de Sintaxe Abstrata

Operadores

Operandos

Valores de cadeias de caracteres especiais

"@currentField"

"[$FieldName]"

"[!FieldName]"

"@currentWeb"

"@me"

"@now"

@rowIndex

"@window.innerHeight"

"@window.innerWidth"

Miniaturas

displayValue

"@isSelected"

"@lcid"

"@UIlcid"

Recursos adicionais