Conceitos de formatação avançada

Pode utilizar algumas das seguintes funcionalidades para tornar a sua vista e formatação de colunas mais avançada e interativa.

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 suporte para soluções, o Painel de Iniciação do Flow será apresentado depois de selecionar o botão e tem de selecionar Executar Fluxo para iniciar o fluxo. Para fluxos que não têm suporte para soluções, o Painel de Iniciação do Flow será apresentado depois de selecionar o botão e o Fluxo 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. Selecione Fluxo > Veja os 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 o ID de um fluxo que não tem suporte para soluções:

1. Mude para o ambiente no qual o Flow está alojado.

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:

Pode utilizar a formatação para definir uma nota de aviso personalizada que possa ser encomendada com base definida pelo utilizador, ações como clicar ou pairar o rato.

Este exemplo utiliza 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 utilizadores também podem ter um card de perfil ou um ficheiro a pairar card sobre os formadores. Algumas das coisas que os utilizadores podem agora fazer:

• 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

Paire o cursor sobre um nome de ficheiro com formatação com o ficheiro predefinido card:

Paire o cursor sobre uma coluna de pessoa com formatação com a card de Perfil predefinida:

Este exemplo utiliza 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 utilizadores precisam de ter permissões de edição no item de lista e o tipo de campo deve pertencer a um conjunto de tipos suportados para que esta funcionalidade funcione.

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

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

Isto permite que os utilizadores editem itens no local, na vista, sem navegarem para a edição baseada na grelha ou para um formulário de edição de itens.

Tipos de Campo Suportados

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

• Texto de linha única
• Texto com várias linhas (sem RTF)
• Número
• DateTime
• Escolha e MultiplaEscolha
• Utilizador e Multiutilizador
• Pesquisa

Bordas e Personalizações de Foco

A edição inline adiciona um limite sensível ao rato nos elementos para indicar que estes elementos têm uma ação associada. O limite predefinido é neutralSecondarye, ao clicar, o editor é apresentado com um themePrimary limite. Estas cores de limite podem ser substituídas através do estilo de definição no mesmo elemento com inlineEditField a utilização de 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 e customRowAction novassetValue, os formadores podem compor 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 com várias linhas (sem RTF)
• Número
• DateTime
• Escolha e MultiplaEscolha
• Utilizador e Multiutilizador

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 devolvem uma data com funções de data incorporadas
  • addDays e addMinutes, duas novas funções para suportar 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 de valores múltiplos são especiais, uma vez que precisam de um valor de matriz para guardar múltiplos valores.
  • appendTo, removeFrome replace, três funções que podem operar em campos de valores múltiplos.
    • 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 de cadeia fornecido na coluna pessoas e é utilizada a primeira pessoa nos resultados devolvidos.