Use JSON Formatting to Highlight Overdue Items: Practical Checklist for SharePoint Owners

Como proprietário de um site do SharePoint, você gerencia listas com datas de vencimento e precisa identificar rapidamente itens atrasados. As exibições padrão mostram datas, mas não fornecem dicas visuais para prazos vencidos. A formatação JSON permite aplicar regras de cores condicionais a linhas ou colunas para que itens atrasados se destaquem com fundo vermelho ou texto em negrito. Este artigo explica como usar a formatação JSON para destacar itens atrasados em listas do SharePoint e fornece uma lista de verificação prática para proprietários de sites.

O que a formatação JSON faz para itens atrasados

A formatação JSON é um recurso em listas e bibliotecas do SharePoint que permite alterar a aparência de colunas ou linhas com base em regras escritas em código JSON. Ao segmentar uma coluna de data, você pode comparar cada valor de célula com a data e hora atuais usando o token @now. Se a data de vencimento for anterior a @now, a formatação aplica um preenchimento vermelho, texto vermelho ou um ícone. Isso funciona tanto no SharePoint moderno quanto no Microsoft Lists.

Antes de escrever a formatação JSON, confirme se sua lista tem uma coluna de data chamada algo como “Data de Vencimento” ou “Prazo”. Você também precisa de permissões de edição na lista, que os proprietários do site têm por padrão. A formatação JSON não requer implantação de código personalizado ou soluções do SharePoint Framework. Você cola o JSON diretamente no painel de formatação nas configurações da lista.

Existem duas abordagens. A formatação de coluna altera apenas a célula que contém a data. A formatação de linha altera a linha inteira, o que torna os itens atrasados visíveis mesmo ao rolar horizontalmente. Ambos os métodos usam a mesma estrutura JSON, mas segmentam escopos diferentes.

Passos para aplicar formatação JSON para destaque de atrasados

Siga estes passos para adicionar formatação JSON que destaca itens atrasados em uma lista do SharePoint. O exemplo usa uma coluna chamada “Data de Vencimento” do tipo Data e Hora.

1. Abra a lista e vá para as configurações da coluna
   Navegue até sua lista do SharePoint. Clique no cabeçalho da coluna de data que deseja formatar. Selecione Configurações da coluna e depois Formatar esta coluna.
2. Cole o código JSON para formatação de coluna
   No painel Formatar coluna, selecione Modo avançado. Exclua o código padrão e cole o seguinte JSON:

   {
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType": "div",
"txtContent": "@currentField",
"style": {
"background-color": "=if(@currentField < @now, 'red', 'transparent')",
"color": "=if(@currentField < @now, 'white', 'inherit')",
"font-weight": "=if(@currentField < @now, 'bold', 'normal')"
}
}

   Este código verifica se o valor da data na célula é anterior à data atual. Se sim, a célula recebe fundo vermelho, texto branco e negrito. Caso contrário, a célula mantém a aparência padrão.

3. Clique em Salvar para aplicar a formatação
   Clique no botão Salvar na parte inferior do painel. A exibição da lista é atualizada e as datas atrasadas aparecem com fundo vermelho.
4. Aplique formatação de linha para destaque da linha inteira (opcional)
   Para destacar a linha inteira, volte para a lista. Clique na seta para baixo ao lado do nome da lista e selecione Configurações da lista. Em Exibições, clique no nome da exibição atual. Role até a seção Formatar exibição e cole o seguinte JSON na caixa Formatação de linha:

   {
"$schema": "http://columnformatting.sharepointpnp.com/columnFormattingSchema.json",
"elmType": "div",
"style": {
"background-color": "=if([$DueDate] < @now, 'lightcoral', 'transparent')"
},
"children": [
{
"elmType": "div",
"style": {
"box-sizing": "border-box",
"padding": "0 12px"
},
"txtContent": "=[$Title]"
}
]
}

   Substitua [$DueDate] pelo nome interno da sua coluna de data. Clique em OK para salvar a exibição.

Erros comuns ao usar JSON para destaque de atrasados

Itens atrasados não são destacados após colar o JSON

A causa mais comum é uma incompatibilidade entre o nome da coluna no JSON e o nome interno real da coluna de data. Na formatação de linha, a referência à coluna deve usar o nome interno, não o nome de exibição. Para encontrar o nome interno, vá em Configurações da lista, clique no nome da coluna e observe a URL para o parâmetro Field. Por exemplo, se a URL contiver Field=Due_x0020_Date, use [$Due_x0020_Date] no JSON.

A comparação de data não considera fusos horários

O token @now usa o Tempo Universal Coordenado (UTC). Se os usuários da sua lista estiverem em um fuso horário atrás do UTC, um item com vencimento às 23:00 no horário local pode aparecer atrasado antes da meia-noite porque o UTC já avançou para o dia seguinte. Para evitar isso, adicione uma condição que também verifique a hora ou use uma coluna calculada que armazene a data de vencimento em UTC. Uma solução alternativa mais simples é definir a data de vencimento para o final do dia útil em vez da meia-noite.

A formatação de linha quebra o layout da exibição da lista

Se o JSON para formatação de linha não incluir todas as colunas ou usar valores elmType incorretos, a linha pode ser exibida incorretamente. Sempre teste a formatação de linha em uma lista pequena primeiro. Comece com um JSON simples que apenas altere a cor de fundo e adicione mais colunas gradualmente.

Formatação de coluna vs formatação de linha: quando usar cada uma

Item	Formatação de coluna	Formatação de linha
Escopo	Apenas a célula da data	Linha inteira
Complexidade	Simples, uma condição	Requer referências de coluna
Melhor para	Dica visual rápida em uma única coluna	Tornar itens atrasados visíveis ao rolar
Desempenho	Mais rápido em listas grandes	Ligeiramente mais lento em listas muito grandes

A formatação de coluna é mais fácil de configurar e funciona bem quando sua lista tem poucas colunas. A formatação de linha é melhor quando você deseja que a linha inteira se destaque, especialmente em listas com muitas colunas onde a coluna de data pode sair da tela ao rolar.

Após aplicar a formatação JSON, teste a exibição adicionando alguns itens com datas de vencimento passadas. Se o destaque não aparecer, atualize a página e verifique a sintaxe JSON quanto a vírgulas ou colchetes ausentes. Você também pode usar o botão Visualizar no painel de formatação para ver o resultado antes de salvar.

Para cenários avançados, combine várias condições no JSON. Por exemplo, destaque itens atrasados por mais de sete dias com um vermelho mais escuro e itens com vencimento hoje com amarelo. Use instruções if aninhadas ou o operador && no JSON para criar essas regras.

Proprietários de sites do SharePoint também devem considerar criar uma exibição que filtre itens atrasados automaticamente. Vá para as configurações da exibição e adicione um filtro onde a coluna de data de vencimento seja menor ou igual a [Today]. Isso fornece uma exibição dedicada de itens atrasados sem depender apenas da formatação de cores.