Guia Técnico para Formatação de Colunas no SharePoint

Formatação de Colunas é um recurso do SharePoint que permite aos usuários personalizar a exibição de campos em Bibliotecas de Documentos e Listas. Utilizando cores, ícones, imagens e outros elementos visuais, é possível destacar o conteúdo e melhorar a experiência do usuário. Além disso, links podem ser usados para tornar o conteúdo mais interativo e acionável.

Funcionalidades Principais

1. Cores e Ícones:
   • Destaque: Use cores para chamar a atenção para campos específicos. Por exemplo, você pode usar vermelho para indicar tarefas atrasadas ou verde para mostrar itens concluídos.
   • Ícones: Adicione ícones para representar diferentes status ou tipos de informação. Por exemplo, um ícone de check pode indicar conclusão, enquanto um ícone de aviso pode sinalizar um problema.
2. Imagens:
   • Representação Visual: Insira imagens nas colunas para fornecer uma representação visual do conteúdo. Isso pode ser particularmente útil para catálogos de produtos ou diretórios de funcionários.
3. Links:
   • Conteúdo Acionável: Torne as colunas interativas adicionando links que direcionam os usuários para páginas relevantes ou ações específicas.

Tipos de Colunas e Modelos Prontos

Alguns tipos de colunas, como Data e Escolha, incluem modelos de design prontos que facilitam a formatação. Esses modelos permitem que você aplique rapidamente estilos predefinidos sem a necessidade de codificação avançada.

Formatação Avançada com JSON

Para uma personalização mais avançada, todos os tipos de colunas permitem a formatação usando código JSON. Com JSON, você pode definir regras complexas para a exibição de dados, incluindo condições baseadas em valores de campo, estilos personalizados e muito mais.

Exemplo de Formatação JSON

Aqui está um exemplo básico de formatação JSON para uma coluna que exibe um ícone de check para itens concluídos:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "attributes": {
    "class": "=if(@currentField == 'Concluído', 'sp-field-severity--good', 'sp-field-severity--warning')"
  },
  "children": [
    {
      "elmType": "span",
      "attributes": {
        "iconName": "=if(@currentField == 'Concluído', 'CheckMark', 'Warning')"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Neste exemplo, a coluna exibirá um ícone de check e uma classe de estilo verde para itens marcados como “Concluído”, e um ícone de aviso com uma classe de estilo amarelo para outros itens.

Conclusão

A Formatação de Colunas no SharePoint é uma ferramenta poderosa para melhorar a visualização e a interatividade dos dados em suas listas e bibliotecas de documentos. Com a capacidade de usar cores, ícones, imagens e links, além de opções avançadas de formatação com JSON, você pode criar interfaces de usuário mais atraentes e funcionais.

Se precisar de mais detalhes ou tiver alguma dúvida específica, estou à disposição para ajudar!

https://github.com/CompartiMOSS/Microsoft-365-Developer-Bootcamp-Barcelona/tree/4e8a378485adf5057b6ef4ac43026859193545e0/SharePoint%20Customization%2FColumnFormat.md

https://github.com/MitkoZ/TimeOffSite/tree/d787b0e055404e44177a9027fdf40ceae617ccdb/Column%20Formatters%2FFormat%20Status%20Column.js