Como personalizar o layout das suas listas e formulários no Microsoft 365 sem código

Com as opções de configuração e formatação das listas do Microsoft Lists e do SharePoint, podemos personalizar a forma como são apresentadas as colunas, as vistas e os formulários de inserção e edição de elementos sem necessidade de código personalizado.

Uma lista de SharePoint, Teams ou Microsoft Lists é um conjunto de informações que podem ser partilhadas com pessoas. Estas informações são constituídas por um conjunto de itens com metadados. Cada um destes metadados ou propriedades é armazenado numa coluna.

Quando uma lista é criada, tem, no mínimo, uma vista associada e formulários para criar e modificar os itens que contém. As vistas são formas de apresentar as informações da lista no navegador e são personalizáveis. Por exemplo, é possível filtrar os itens por data de criação ou modificar as colunas que são apresentadas, quer para expandir a informação, quer para a reduzir.

Embora a configuração básica das listas permita a personalização de vistas e formulários, é muito comum desenvolver código personalizado para satisfazer as necessidades dos clientes, tanto em termos de design como de funcionalidade. No entanto, isso nem sempre é necessário. Conhecer todas as possibilidades pode poupar tempo de desenvolvimento e facilitar a manutenção por parte dos utilizadores.

• Algumas personalizações podem ser aplicadas através de opções de configuração de colunas.
• Outras, quando a apresentação depende do valor de outra coluna, são aplicadas através da utilização de fórmulas condicionais.
• Por último, outros formatos são aplicados através da construção de objetos JSON que substituem a visualização predefinida.

É este último ponto que constitui uma novidade do 365, através da qual, seguindo uma estrutura definida, é possível descrever os elementos HTML que são apresentados quando um campo é incluído numa vista de lista ou num formulário e os estilos que são aplicados a esses elementos.

As vistas são formas de apresentar as informações da lista no browser e podem ser personalizadas

É importante notar que a formatação aplicada não altera os dados, apenas a forma como são apresentados.

Exemplo Prático

Para fazer um teste, acedemos ao Microsoft Lists e criamos uma lista com o modelo "Problem Tracking". Adicione estas novas colunas:

1. Comentários, do tipo "Várias linhas de texto". Deve conter notas sobre a tarefa.
2. Solução, do tipo "Várias linhas de texto". Pretendemos que seja obrigatório acrescentar um comentário quando o problema estiver resolvido.
3. Ecrã, do tipo "Seleção".
4. Data de correção, do tipo "Data". O nome interno será "Datacorrecao", criando-o primeiro com este nome e modificando-o depois para "Data de Correção".

​​​​​​Reorganizar, mostrar e ocultar colunas

Para organizar a informação de uma forma que facilite a sua leitura e edição, é por vezes necessário ajustar a ordem das colunas na vista ou no formulário. Os passos para esta reorganização são os seguintes:

Nos formulários

1. Abra o formulário clicando em "Novo".
2. Selecione o menu de edição de colunas.
3. Arraste as colunas pela ordem em que as pretende ver.
4. Marque ou desmarque as colunas que pretende que sejam apresentadas. Tenha em atenção que, se uma coluna for obrigatória, não pode ser desmarcada.

Nas vistas

Nas vistas, estas alterações podem ser efetuadas através do menu de contexto da coluna. Para alterar a ordem, também é possível arrastar as colunas para a posição pretendida.

​​​​​​Mostrar e ocultar colunas com base no conteúdo de outras colunas

No nosso exemplo, quando um problema é resolvido, queremos ter mais informações sobre a solução efetuada. Tornaremos a solução visível apenas quando o estado do problema seja "Concluído". A data de correção também só será apresentada quando o estado seja "Concluído".

Para isso, devemos utilizar as fórmulas condicionais e seguir os seguintes passos:

1. Abra o formulário clicando em "Novo".
2. Selecione o menu de edição de colunas.
3. No menu de contexto da coluna “Solução”, clique em "Editar fórmula condicional".
4. Inclua a fórmula =if([$Status] == 'Completado', 'true', 'false'). Lembre-se de que os nomes das colunas nas fórmulas devem ser os nomes internos, que devem ser precedidos de "$" e colocados entre parênteses retos. No exemplo, o nome interno da coluna "Estado" é "Status".
5. Incluímos a mesma fórmula na coluna da data de correção.

Pode ver exemplos de fórmulas condicionais de acordo com os tipos de campo aqui.

Modificação do formulário

Através da configuração do formulário podemos descrever como será a estrutura do cabeçalho, rodapé e corpo. Neste caso, devemos aplicar a formatação utilizando objetos JSON.

Na nossa lista de exemplo, existem campos relacionados com a descrição do problema, outros que expandem a informação e outros que nos permitem rastreá-la. Neste sentido, seria útil agrupar os campos nestas secções que organizam os campos. Além disso, vamos também modificar o cabeçalho para o personalizar com um novo título e ícone.

Pode encontrar aqui todas as informações necessárias sobre a estrutura dos objetos JSON e exemplos para começar.

Cabeçalho

Desta vez, no menu apresentado no formulário "Novo", selecionaremos a opção "Configurar design" e, em primeiro lugar, configuraremos o cabeçalho.

Copiamos o JSON da secção de cabeçalho da página de Microsoft. Observe na imagem a seguir como, com uma estrutura predefinida, é construído o HTML que conterá o cabeçalho. Neste caso, um ícone e um texto com estilos personalizados.

• Para o ícone, podemos incluir qualquer um dos fornecidos pelo FluentUI (https://developer.microsoft.com/en-us/fluentui#/styles/web/icons). No nosso caso, como se trata de uma lista de tracking de problemas, vamos utilizar "WorkItemBug".
• O texto conterá a palavra "Problema" e o título do item. Repare que à medida que o título muda, o cabeçalho também muda. Qualquer coluna do item precedida por "$" e entre parênteses retos pode ser utilizada.

Esta é a diferença entre o cabeçalho predefinido e com a nossa modificação:

​​​​​​Corpo

Na configuração do layout do formulário, selecione o valor "Texto" no menu pendente. Lembre-se de que, desta vez, o nosso objetivo é facilitar o preenchimento do formulário, agrupando as informações nas seguintes categorias:

• Dados básicos do problema.
• Dados de monitorização.
• Outras informações.

Copiamos o JSON da secção "Configurar um corpo personalizado com uma ou mais secções" da página da Microsoft e modificamo-lo para se adequar ao nosso exemplo:

• Cada secção pode ter um título.
• Em "fields" temos de incluir os “display names” de todas as colunas que serão incluídas na secção.
• Incluímos uma secção vazia que conterá outros campos visíveis que não foram incluídos nas outras secções.

Este é o aspeto do nosso formulário modificado, que também tem um design responsive.

Lembre-se de que as colunas "Solução" e "Data de correção" serão apresentadas quando o estado for "Concluído".

Se repetirmos os passos da organização da coluna, verá que estão agora também incluídas as secções:

Muitos outros exemplos de formatos de listas estão disponíveis na página do PnP: https://pnp.github.io/List-Formatting/formsamples/

Validações

Por último, validaremos se os dados introduzidos cumprem os seguintes requisitos:

• A data da notificação não pode ser superior ao dia X.
• A data de correção é igual ou superior à data de notificação.

Podemos incluir validações dos valores de uma coluna ou de várias colunas do formulário através da utilização de fórmulas condicionais, que podem ser aplicadas tanto à validação de uma coluna como a todo o formulário.

É importante notar que apenas a validação ao nível da lista pode ser incluída, pelo que a mensagem de erro deve ser clara e incluir os detalhes de todos os dados validados.

No nosso formulário

1. Na vista, selecione "Editar" na coluna "Data da notificação".
2. Em " Validação da coluna", incluiremos a fórmula "=DateReported<TODAY()". A mensagem de erro será "A data da notificação não pode ser superior ao dia atual".
3. Na configuração da lista> Configuração da validação, incluímos a fórmula "=[Data de correção]>=[Data de notificação]" e a mensagem "A data de correção deve ser igual ou superior à data de notificação. A data de notificação não pode ser superior ao dia atual".

Uma vez configurado, ao criar um novo item com datas incorretas, serão apresentadas mensagens de validação:

Modificação de uma vista

Tal como acontece com os formulários, podemos formatar uma vista de lista através da configuração. Se nem todos os casos forem abrangidos, temos a opção de modificar o JSON associado.

Podemos aplicar a formatação a:

• Colunas.
• Vistas. Neste caso, existem dois tipos de layout:
  • Layout de Lista: os itens são apresentados como numa tabela.
  • Layout de Galeria: os itens são apresentados em caixas.

No nosso exemplo, vamos fazer estas modificações a partir da opção "Formatar vista atual":

1. Modificar a coluna "Estado" de acordo com o seu valor com cores e ícones.

• Aceda à modificação da formatação da vista atual.
• Clique em "Aplicar formatação às colunas".
• Selecione a coluna "Estado", em "Cores de fundo", e edite os estilos:

2. Marcar a vermelho todo o item se a prioridade for "Crítica" e se estiver pendente de solução há mais de 5 dias:

• Aceda à modificação do formato da vista atual.
• Clique em "Gerir regras" em "Formatação condicional".
• Crie a seguinte regra:​​​

Com as opções que temos, não podemos definir a regra de que a data da notificação deve ser inferior a Hoje menos um número de dias, pelo que, neste caso, temos de modificar o JSON associado ao formato.

• Clique em "Modo avançado" e modifique o JSON para subtrair 5 dias à data de notificação.

A vista terá agora a seguinte apresentação:

​​​​​​​Conhecer as possibilidades de configuração das listas permite-lhe tirar o máximo partido delas para facilitar o acesso à informação e torná-la mais atrativa. Em muitos casos, é possível evitar a utilização de código e tornar a manutenção mais fácil para os utilizadores.