Conceitos de formatação avançada

Você pode usar alguns dos recursos a seguir para tornar o modo de exibição e a formatação de colunas mais interativos e ricos em informações.

Cria um botão para iniciar um fluxo

A captura de tela a seguir mostra uma lista com um botão de fluxo de adicionado à coluna Ação:

Você pode usar a formatação de colunas para criar botões que, quando selecionados, executam Fluxos no item de lista correspondente. Para fluxos com reconhecimento de solução, o Painel de Inicialização do Flow será exibido após escolher o botão e você deverá selecionar Executar Flow para iniciar o fluxo. Para fluxos que não têm reconhecimento de solução, o Painel de Inicialização do Flow será exibido depois de selecionar o botão e o Flow será executado.

Para usar a amostra abaixo, você deve substituir a ID do Flow a executar. Esta ID está contida dentro da actionParams propriedade do customRowAction atributo dentro do elemento button.

Para obter a ID de um fluxo com reconhecimento de solução:

1. Selecionar fluxo > Veja seus fluxos na lista do SharePoint onde o fluxo está configurado.
2. Se aplicável, mude para o ambiente no qual o Fluxo está hospedado.
3. Selecione a área Soluções.
4. Selecione a solução na qual o Fluxo foi criado.
5. Filtre os fluxos de Nuvem e selecione o Fluxo que você deseja executar.
6. Selecione Exportar Obter > identificador de fluxo.
7. Copie a ID.

Para obter a ID de um fluxo que não reconhece a solução:

1. Alterne para o ambiente no qual o Flow está hospedado.

2. Selecione o Fluxo que você deseja executar.

3. Selecione Exportar Obter > identificador de fluxo.

4. Copie a ID.

   {
     "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
     "elmType": "button",
     "customRowAction": {
       "action": "executeFlow",
       "actionParams": "{\"id\": \"edf627d9-20f4-45ba-8bc9-4494bf2ff1be\"}"
     },
     "attributes": {
       "class": "ms-fontColor-themePrimary ms-fontColor-themeDarker--hover"
     },
     "style": {
       "border": "none",
       "background-color": "transparent",
       "cursor": "pointer"
     },
     "children": [
       {
         "elmType": "span",
         "attributes": {
           "iconName": "Flow"
         },
         "style": {
           "padding-right": "6px"
         }
       },
       {
         "elmType": "span",
         "txtContent": "Send to Manager"
       }
     ]
   }
   

Além disso, você pode usar as opções headerText e runFlowButtonText dentro da propriedade actionParams para personalizar partes do próprio painel de Fluxo! Para saber mais, confira a seção elementos de botão da Referência de sintaxe detalhada.

Cartões personalizados em detalhes

A imagem a seguir mostra uma lista com detalhes personalizados adicionados a uma Lista:

Ao focalizar - Os metadados na coluna "Status" são disponibilizados na formatação do modo de exibição:

Em foco ‒ Os metadados na coluna "Status" são disponibilizados na formatação da coluna:

Você pode usar a formatação para definir um texto explicativo personalizado que pode ser comissionado com base em ações definidas pelo usuário, como clicar ou focalizar.

Este exemplo usa customCardProps, openOnEvent, directionalHinte isBeakVisible:

{
  "elmType": "div",
  "style": {
    "font-size": "12px"
  },
  "txtContent": "[$Status]",
  "customCardProps": {
    "formatter": {
      "elmType": "div",
      "txtContent": "Define your formatter options inside the customCardProps/formatter property"
    },
    "openOnEvent": "hover",
    "directionalHint": "bottomCenter",
    "isBeakVisible": true,
    "beakStyle" : {
      "backgroundColor": "white"
    }
  }
}

Cartão padrão em foco

Agora, os usuários podem ter um card de perfil ou um card de foco de arquivo também nos formatadores. Algumas das coisas que os usuários podem fazer agora:

• Cartão de perfil ou cartão de detalhes do arquivo em qualquer coluna
• Cartão de perfil ou cartão de detalhes com formatação de exibição

Passe o mouse sobre um nome de arquivo com formatação com o file card padrão:

Passe o mouse sobre uma coluna de pessoa com formatação com o Profile card padrão:

Este exemplo usa defaultHoverField:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "img",
      "style": {
        "width": "32px",
        "height": "32px",
        "overflow": "hidden",
        "border-radius": "50%",
        "margin": "2px"
      },
      "attributes": {
        "src": "=getUserImage([$Editor.email], 's')",
        "title": "[$Editor.title]"
      }
    },
    {
      "elmType": "span",
      "style": {
        "vertical-align": "middle",
        "margin-left": "2px"
      },
      "txtContent": "[$Editor.title]"
    }
  ],
  "defaultHoverField": "[$Editor]"
}

Referência do formatador de coluna

Os usuários podem consultar o JSON do formatador de uma coluna dentro de outro formatador de coluna/modo de exibição e usá-lo junto com outros elementos para construir um modo de exibição de coluna personalizada. Isso pode ser feito usando a propriedade columnFormatterReference.

A imagem a seguir mostra uma lista com um layout de Galeria que faz referência ao formatador da coluna Categoria:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/tile-formatting.schema.json",
  "height": 127,
  "width": 254,
  "hideSelection": false,
  "formatter": {
    "elmType": "div",
    "attributes": {
      "class": "sp-card-container"
    },
    "children": [
      {
        "elmType": "button",
        "attributes": {
          "class": "sp-card-defaultClickButton"
        },
        "customRowAction": {
          "action": "defaultClick"
        }
      },
      {
        "elmType": "div",
        "attributes": {
          "class": "ms-bgColor-white sp-css-borderColor-neutralLight sp-card-borderHighlight sp-card-subContainer"
        },
        "children": [
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-displayColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "[!Title.DisplayName]"
              },
              {
                "elmType": "p",
                "attributes": {
                  "title": "[$Title]",
                  "class": "ms-fontColor-neutralPrimary sp-card-content sp-card-highlightedContent"
                },
                "txtContent": "=if ([$Title] == '', '–', [$Title])"
              }
            ]
          },
          {
            "elmType": "div",
            "attributes": {
              "class": "sp-card-lastTextColumnContainer"
            },
            "children": [
              {
                "elmType": "p",
                "attributes": {
                  "class": "ms-fontColor-neutralSecondaryAlt sp-card-label"
                },
                "txtContent": "[!Category.DisplayName]"
              },
              {
                "elmType": "div",
                "attributes": {
                  "class": "sp-card-content"
                },
                "style": {
                  "height": "32px",
                  "font-size":"12px"
                },
                "children": [
                  {
                    "columnFormatterReference": "[$Category]"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Edição em linha

Com a edição embutida, os formatadores têm a capacidade de carregar editores de campo para editar dados de campo em um item. Os usuários precisam ter permissões de edição no item de lista, e o tipo de campo deve pertencer a um conjunto de tipos compatíveis para que esse recurso funcione.

Uma propriedade inlineEditField JSON especial é usada com value como o nome [$FieldName] interno do campo no elemento de destino no JSON.

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

Isso permite que os usuários editem itens no local, dentro da exibição, sem navegar para a edição baseada em grade ou para um formulário de edição de item.

Tipos de Campo Suportados

Lista de tipos de campo com suporte para edição embutida:

• Texto de linha única
• Texto de várias linhas (sem RTF)
• Número
• DateTime
• Escolha e MultiplaEscolha
• Usuário e Multiusuário
• Pesquisa

Bordas e Personalizações de Foco

A edição embutida adiciona uma borda flutuante nos elementos para indicar que esses elementos têm uma ação associada. A borda padrão é neutralSecondary, e ao clicar, o editor aparece com uma themePrimary borda. Essas cores de borda podem ser substituídas por meio da configuração de estilo no mesmo elemento inlineEditField usando alguns atributos especiais - --inline-editor-border-width, --inline-editor-border-style, --inline-editor-border-radiuse --inline-editor-border-color.

{
  "elmType": "div",
  "inlineEditField": "[$FieldName]",
  "txtContent": "[$FieldName]",
  "style": {
    "--inline-editor-border-color": "transparent transparent red transparent",
    "border-color": "gray",
    "border-width": "1px",
    "border-style": "solid"
  }
}

Definir vários valores de campo de um Item usando customRowAction

Com as propriedades new setValue and customRowAction , os formatadores podem renderizar botões de ação que modificam o item internamente sem abrir editores ou formulários. setValue também permite definir vários valores de campo do item ao mesmo tempo.

O JSON abaixo definirá o valor de FieldInternalName_1, FieldInternalName_2e FieldInternalName_3com os valores fornecidos:

{
  "elmType": "div",
  "txtContent": "[$FieldName]",
  "customRowAction":{
    "action": "setValue",
    "actionInput": {
      "FieldInternalName_1": "FieldValue_1",
      "FieldInternalName_2": "FieldValue_2",
      "FieldInternalName_3": "=if([$Status] == 'Completed', 'yes', 'no')"
    }
  }
}

Tipos de Campo Suportados

• Texto de linha única
• Texto de várias linhas (sem RTF)
• Número
• DateTime
• Escolha e MultiplaEscolha
• Usuário e Multiusuário

Valores de Campo de Valor actionInput:

• Valores de texto:

  • uma cadeia de caracteres válida como "Choice 1"

  • Valor de outras colunas: [$ColumnName]

  • uma expressão como:

    "if([$column]> 10, "Choice A", "Choice B")"
    

    ou

    {operator: "+", operands" : ["Choice", "A"]}
    

• Número:

  • um número válido
  • Valor de outras colunas: [$ColumnName]
  • uma expressão

• Valores de data:

  • uma cadeia de caracteres de dados
  • @now token
  • Expressões que retornam uma data usando funções de data internas
  • addDays e addMinutes, duas novas funções para dar suporte a expressões como sete dias a partir de hoje
  • uma cadeia de caracteres "" limpa o valor do campo

• Várias Opções e Várias Pessoas:

  • Os campos com vários valores são especiais, pois precisam de um valor de matriz para salvar vários valores.
  • appendTo, removeFrome replace, três funções que podem operar em campos com vários valores.
    • appendTo([$MultiChoiceField], 'MyValue')
    • removeFrom([$MultiUserField], @me): remove todas as ocorrências que correspondem ao segundo parâmetro
    • replace([$MultiChoiceField], 'Choice 1', 'Choice 3'): substitui todas as ocorrências do segundo parâmetro pelo terceiro.

• Valores de campo pessoal:

  • nome de usuário ou email

  • Uma cadeia de caracteres "" limpa o valor do campo

  • uma expressão na qual retorna esses valores

    Observação

    Uma consulta é executada com o valor da cadeia de caracteres fornecido na coluna pessoas, e a primeira pessoa nos resultados retornados é usada.