Personalizar Vistas de Dados e formulários utilizando o SharePoint Designer

Neste artigo

• Lista de aberturas e vistas de dados

• Adicionar, remover e reorganizar colunas

• Ordenar e agrupar

• Filtro

• Formatação condicional

• Gina

• Ativar a edição inline

• Ativar atualizações assíncronas

• Adicionar opções da barra de ferramentas

• Aplicar estilos de vista

• Mais opções de personalização

Lista de aberturas e vistas de dados

As vistas de lista e as vistas de dados podem ser criadas e abertas de várias formas no SharePoint Designer 2010 (conforme explicado no início deste artigo). Pode, por exemplo, abrir uma vista de lista a partir da lista ou biblioteca na qual está actualmente associado ou pode abrir uma vista de dados a partir da página do site onde se encontra. Ambas as opções estão no menu de navegação. (Associado a uma lista ou biblioteca ou a qualquer número de origens de dados. Utilize um dos métodos abaixo para abrir uma vista de lista ou vista de dados no SharePoint Designer 2010.)

Para abrir uma vista de lista associada a uma lista

1. Abra o seu site no SharePoint Designer 2010.

2. No painel de navegação , clique em listas e bibliotecas.

3. Abra a lista que contém a vista de lista.

4. Clique no separador Opções e utilize as opções de edição da vista para personalizar a vista de lista.
   

   Nota:  Poderá ter de clicar primeiro no interior da vista para apresentar as opções de edição de vista no SharePoint Designer 2010

Para abrir uma vista de dados ou vista de lista a partir de uma página do site

1. Abra o seu site no SharePoint Designer 2010.

2. No painel de navegação , clique em páginas do site.

3. Abra a página que contém a vista de dados ou vista de lista.

4. Clique no separador Opções e utilize as opções de edição da vista para personalizar a lista ou a vista de dados.
   

   Nota:  Poderá ter de clicar primeiro no interior da vista para apresentar as opções de edição da vista no SharePoint Designer 2010.

O resto deste artigo pressupõe que realizou estes passos ou passos semelhantes para abrir a vista para edição.

Início da Página

Adicionar, remover e reorganizar colunas

Uma das primeiras coisas que costuma fazer com uma vista de dados é adicionar e remover colunas. Quando altera as colunas numa vista de dados, está a adicionar, remover ou dispor os campos tal como aparecem na vista de dados. Utilize a caixa de diálogo Editar colunas para adicionar, remover e reordenar colunas, quer apresentem linhas ou colunas. Também pode modificar colunas com os comandos de edição de tabela no separador tabela. O esquema da tabela será discutido mais adiante neste artigo.

Siga os seguintes passos para adicionar, remover e reorganizar colunas numa lista ou vista de dados.

1. Com a sua vista aberta no SharePoint Designer 2010, clique no separador Opções e, em seguida, clique em Adicionar/remover colunas .
   

   Nota:  O comando Editar colunas não está disponível se a vista de dados estiver numa tabela HTML que utilize os atributos RowSpan ou ColSpan com um valor maior do que 1.

2. Abre-se a caixa de diálogo Editar colunas .
   

3. Execute um dos seguintes procedimentos:

   • Para adicionar uma coluna, selecione o campo coluna em campos disponíveis e, em seguida, clique em Adicionar.

   • Para selecionar múltiplos campos de uma só vez, prima continuamente a tecla CTRL enquanto clica nos campos.

   • Para remover uma coluna existente, selecione a coluna em colunas apresentadas e, em seguida, clique em remover.

   • Para selecionar múltiplos campos de uma só vez, prima continuamente a tecla CTRL enquanto clica nos campos

   • Para reorganizar as colunas, selecione a coluna em colunas apresentadas e, em seguida, clique em mover para cima ou mover para baixo

4. Clique em OK para aplicar as suas alterações à vista.

Saiba mais sobre as vistas de dados na secção Consulte também .

Início da Página

Ordenar e agrupar

Quando ordena dados numa vista de dados, modifica a ordem pela qual os dados são apresentados para que seja mais fácil para si e os visitantes do seu site compreenderem os dados. Os exemplos de sequência de ordenação incluem ordenação alfabética e numérica. Pode criar pedidos de ordenação adicionais utilizando a caixa de diálogo ordenação avançada no SharePoint Designer 2010.

Para além de ordenar, pode agrupar dados. Ao agrupar dados, pode apresentar um cabeçalho ou rodapé de um grupo de campos na sequência de ordenação e escolher se o grupo está expandido ou fechado por predefinição. Também pode optar por manter os grupos em conjunto ao fazer uma apresentação de diapositivos na vista e mostrar os nomes das colunas ou os totais de cada grupo.

Para ordenar colunas numa lista ou vista de dados

Com a sua vista aberta no SharePoint Designer 2010, clique no separador Opções e, em seguida, clique em ordenar & em grupo.

Abre-se a caixa de diálogo ordenar e agrupar .

1. Em campos disponíveis, clique no campo que pretende ordenar e, em seguida, clique em Adicionar.

2. Em Propriedadesde ordenação, escolha como pretende ordenar os campos selecionando ascendente (do menor para o maior) ou descendente (do maior para o menor).

   Também pode alterar a ordem de ordenação ascendente ou descendente, bastando fazer duplo clique no campo na lista de sequências de ordenação.

3. Para utilizar uma ordenação mais avançada do que ascendente ou descendente, clique em Editar expressãode ordenação. Esta ação abre a caixa de diálogo ordenação avançada onde pode personalizar a sequência de ordenação utilizando as expressões XPath. Saiba mais em lista avançada e na vista de dados que se personaliza utilizando as expressões XPath.

4. Para ordenar vários campos, selecione mais campos em campos disponíveis e, em seguida, adicione-os à sequência de ordenação.

   Se adicionar múltiplos campos à sequência de ordenação e quiser alterar o campo que está classificado primeiro, selecione o campo na lista ordem de ordenação e clique em mover para cima ou mover para baixo.

   Clique em OK para aplicar as suas alterações à vista.

Para agrupar colunas numa lista ou vista de dados

Com a sua vista aberta no SharePoint Designer 2010, clique no separador Opções e, em seguida, clique em ordenar & em grupo.

1. Abre-se a caixa de diálogo ordenar e agrupar .
   

2. Na lista ordem de ordenação, clique no campo pelo qual pretende agrupar.
   Nota: cada campo na sequência de ordenação pode ter propriedades de grupo individuais aplicadas. Certifique-se de que seleciona o campo pretendido antes de aplicar as propriedades do grupo.

3. Para mostrar um cabeçalho no início de cada grupo, em Propriedades do grupo, selecione a caixa de verificação Mostrar cabeçalho do grupo e, em seguida, efetue um dos seguintes procedimentos:

   1. Para que os grupos na vista sejam apresentados como expandidos por predefinição, clique no grupo expandir por predefinição.

   2. Para que os grupos na vista de dados apareçam como fechados por predefinição, clique em fechar grupo por predefinição

4. As opções restantes só se aplicam a vistas de dados e não a vistas de lista. (Para obter mais informações sobre as diferenças entre listas e vistas de dados, visite a secção consulte também.)

5. Para mostrar um rodapé no final de cada grupo que apresenta o número de registos nesse grupo, selecione a caixa de verificação Mostrar rodapé do grupo .

6. Depois de selecionar a caixa de verificação Mostrar cabeçalho de grupo ou Mostrar rodapé de grupo , o botão de agrupamento avançado fica disponível.

7. Clique em agrupamento avançado. (Esta opção fica ativada ao selecionar a opção Mostrar cabeçalho de grupo ou Mostrar rodapé de grupo ).

8. Execute um dos seguintes procedimentos:

   • Para ocultar os registos individuais na lista, selecione a caixa de verificação sempre ocultar detalhes do grupo .

   • Para mostrar todos os itens num grupo numa página, mesmo que o total exceda o número especificado de itens a apresentar numa lista, selecione a caixa de verificação manter grupos quando estiver a paginação.

   • Para inserir uma linha em cada grupo que apresenta os nomes das colunas, selecione a caixa de verificação Mostrar nomes de colunas por grupo .

   • Para inserir uma linha em cada grupo que apresenta o número total de registos dentro de cada grupo, selecione a caixa de verificação mostrar totais de colunas por grupo .

Para permitir que os utilizadores do site ordenem ou agrupem dados através do browser, pode adicionar uma barra de ferramentas à vista conforme descrito mais adiante neste artigo.

Início da Página

Filtro

Pode aplicar um filtro à sua vista para que apenas os dados que satisfaçam um determinado critério apareçam na lista ou na vista de dados. Isto é útil quando tem uma vista que contém centenas ou milhares de registos e pretende facilitar a leitura dos dados. Ao criar um filtro, cria uma ou mais expressões que são aplicadas aos dados. Existem três partes básicas: o nome do campo (o nome do campo no qual pretende filtrar), o operador (a regra que pretende aplicar ao valor) e o valor (os dados que procura)....

Siga os passos seguintes para filtrar uma lista ou vista de dados.

1. Com a sua vista aberta no SharePoint Designer 2010, clique no separador Opções e, em seguida, clique em Filtrar .

2. A caixa de diálogo critérios de filtro é aberta.
   

3. Em nome do campo, clique no campo que contém os valores pretendidos.

4. Clique na caixa comparação e, em seguida, clique no operador pretendido.

5. Clique na caixa valor e, em seguida, selecione ou escreva os critérios pretendidos.

6. Para adicionar outra cláusula ao filtro, clique na caixa e/ou no final da cláusula existente e, em seguida:

   1. Clique em e para criar um filtro em que os dados têm de corresponder aos critérios em ambas as cláusulas.

   2. Clique em ou para criar um filtro onde os dados têm de corresponder aos critérios em apenas uma cláusula.

7. Clique na mensagem clique aqui para adicionar uma nova cláusula.

8. Repita os passos 3-6 para criar uma cláusula adicional para este filtro.

9. Se estiver a trabalhar em vistas de dados e quiser utilizar condições mais avançadas, selecione a caixa adicionar filtragem XSLT e, em seguida, clique em Editar.
   Esta ação abre a caixa de diálogo condição avançada onde pode personalizar a sequência de ordenação utilizando as expressões XPath.

10. Clique em OK.

Para permitir que os visitantes do site ordenem e agrupem dados através do browser, pode adicionar uma barra de ferramentas à vista conforme descrito mais adiante neste artigo. Tenha em atenção que a filtragem no browser afeta apenas a apresentação dos dados; não limita a quantidade de dados que está disponível na vista.

Início da Página

Formatação condicional

Com a formatação condicional, pode aplicar texto formatado, cores de fundo, ícones personalizados e muito mais a uma etiqueta HTML ou valor de dados selecionado quando os dados cumprem um determinado critério. Também pode definir as condições que determinam se pretende mostrar ou ocultar uma etiqueta HTML ou um valor de dados. A formatação condicional é uma forma poderosa de realçar itens numa vista de dados que exija a ação do utilizador. Por exemplo, pode realçar as tarefas que estão a expirar, projetos que estão a ser executados acima do orçamento ou suprimentos da empresa que estão a ficar baixos.

Siga os passos seguintes para aplicar formatação condicional a uma lista ou vista de dados.

Com a sua vista aberta no SharePoint Designer 2010, clique na linha ou coluna onde pretende aplicar a formatação condicional.

1. Clique no separador Opções , clique em Filtrar e escolha uma das seguintes opções:

2. Mostrar conteúdo para apresentar dados na vista que correspondam aos critérios especificados.

3. Ocultar conteúdo para ocultar dados na vista que correspondam aos critérios especificados.

4. Formatar linha para aplicar formatação a uma linha que satisfaça os critérios especificados.

5. Formatar coluna para aplicar formatação a uma coluna que satisfaça os critérios especificados.

6. Formatar seleção para aplicar formatação a uma seleção que satisfaça os critérios especificados. (Primeiro tem de selecionar uma parte da vista de dados antes de utilizar esta opção.)

   As opções mostrar e ocultar conteúdo alteram a visibilidade de etiquetas HTML ou valores de dados selecionados. As opções de formatação aplicam um estilo a etiquetas HTML ou valores de dados selecionados.

7. A caixa de diálogo critérios de condição é aberta.
   

8. Em nome do campo, clique no campo que contém os valores pretendidos.

9. Clique na caixa comparação e, em seguida, clique no operador pretendido.

10. Clique na caixa valor e, em seguida, selecione ou escreva os critérios pretendidos.

11. Para utilizar condições mais avançadas na vista, clique em avançadas.
    Esta ação abre a caixa de diálogo condição avançada onde pode personalizar a sequência de ordenação utilizando as expressões XPath.

12. Para adicionar outra cláusula aos critérios de condição, clique na caixa e/ou no final da cláusula existente e, em seguida:

    • Clique em e para criar critérios de condição onde os dados têm de corresponder aos critérios em ambas as cláusulas.

    • Clique ou para criar critérios de condição onde os dados têm de corresponder aos critérios em apenas uma cláusula

13. Por baixo da cláusula existente, clique na mensagem clique aqui para adicionar uma nova cláusula.

14. Repita os passos 4-7 para criar uma cláusula adicional para os critérios de condição.

15. Se estiver a mostrar ou a ocultar dados com a condição, clique em OK para fechar a caixa de diálogo. Para aplicar formatação especial à condição, clique em definir estilo.

16. Abre-se a caixa de diálogo Modificar estilo .
    

17. Selecione as opções de formatação que pretende aplicar à vista de dados.
    Por exemplo, para colocar o texto em negrito com um fundo amarelo, pode selecionar negrito no menu espessura do tipo de letra . Em seguida, clique na categoria de fundo e, no menu cor de fundo , escreva amarelo ou selecione uma variação de amarelo.

18. Clique em OK.

Uma vez que as vistas de lista e de dados apresentam dados em directo, vê a formatação condicional aplicada imediatamente na vista de estrutura.

Início da Página

Gina

Com a paginação, pode alterar o número de registos que são apresentados em cada página de uma vista de lista ou de dados. Pode configurar a vista de forma a apresentar itens em conjuntos de 5, 10 ou qualquer valor determinado. Os visitantes do site, como resultado, irão ver as ligações anterior e seguinte no browser, que utilizam para navegar na vista. Em alternativa, pode especificar um limite para o número máximo de itens a serem apresentados na vista, o que pode ser 5, 10 ou qualquer valor determinado.

Siga os seguintes passos para adicionar um valor de paging a uma lista ou vista de dados.

Com a sua vista aberta no SharePoint Designer 2010, clique no separador Opções e, em seguida, clique em paginação de .

1. Escolha uma das opções de paging:

   1. Apresentar conjuntos de itens: escolha se pretende apresentar itens em conjuntos de 1, 5, 10 ou 30.

      Selecionar esta opção apresenta as ligações de navegação na vista quando o número total de registos excede o número especificado nesta opção.

   2. Limitar a itens: escolha um número máximo de itens a apresentar na vista, 1, 5, 10 ou 30.

2. Selecione mais opções de paging para especificar um valor personalizado para a paginação da vista de dados.

3. Abre-se a caixa de diálogo Propriedades da vista de dados .
   

4. No separador paginação, selecione uma das seguintes opções:

   • Selecione Mostrar itens em conjuntos deste tamanho e, em seguida, especifique um número na caixa fornecida.
     O valor predefinido nesta opção é 10 se existirem mais de 25 registos na vista e 6 se a vista tiver menos de 25 registos.

   • Selecione limitar o número total de itens apresentados a e, em seguida, especifique um número na caixa fornecida.
     O valor predefinido neste campo é definido para 100.

5. Clique em OK.

Para além de alterar o número de registos apresentados para a vista numa página Web, pode alterar o número de registos apresentados na vista de estrutura do SharePoint Designer 2010. Pode fazê-lo quando pretender ver como uma vista será renderizada com um determinado número de registos. Para alterar o número de registos na vista de estrutura, clique no separador estrutura e, no grupo pré-visualizar , selecione uma das opções de pré-visualização de vista de dados disponíveis.

Início da Página

Ativar a edição inline

Quando a edição inline está ativada, os visitantes do site podem editar facilmente cada registo no contexto da vista sem ter de sair da página ou abrir uma nova janela. Basta clicar no botão Editar junto à coluna ou linha na vista de dados e cada campo torna-se editável. As caixas de texto, menus e controlos de campo estão disponíveis para cada registo da mesma forma que estão disponíveis em novos e editar formulários de itens. A edição inline combina o melhor de uma vista e um formulário num único local.

Siga os passos seguintes para ativar a edição inline numa vista de lista ou de dados.

Com a sua vista aberta no SharePoint Designer 2010, clique no separador Opções e, em seguida, clique em edição inlinedo .
Para vistas de lista, isto ativa as ligações novas e editadas, que os visitantes do site utilizam para criar e editar registos.

1. Para vistas de dados, selecione uma ou todas as seguintes opções de edição inline:

   1. Mostrar ligações de edição de item: ativa uma ligação de edição em que os utilizadores clicam para editar o registo inline.

   2. Mostrar ligações de Inserir item: permite uma ligação inserir com que os utilizadores clicam para criar novos registos inline.

   3. Mostrar ligações de eliminação de itens: ativa uma ligação de eliminação em que os utilizadores clicam para eliminar registos inline.

2. Guarde as alterações à sua lista ou vista de dados.

Nas vistas de lista, da próxima vez que abrir a vista num browser e pairar o cursor do rato sobre uma linha ou coluna, verá um botão Editar . Para vistas de dados, verá uma ligação Editar ao lado de cada linha ou coluna.

Clique na ligação para começar a editar a linha ou coluna dos registos inline, conforme apresentado abaixo.

Início da Página

Ativar atualizações assíncronas

As atualizações assíncronas são componentes principais da plataforma AJAX do ASP.NET e pode ativá-las para vistas de lista e de dados no seu site. Quando ativa as atualizações assíncronas, a lista ou a vista de dados recupera dados do servidor em tempo real e devolve-os num browser sem que o utilizador tenha de atualizar a página. As vistas de lista e de dados com atualizações assíncronas são ideais para as páginas Web e Dashboards ricos e dinâmicos de dados.

.

Execute os passos seguintes para ativar as atualizações assíncronas para uma vista de lista ou de dados.

Com a sua vista aberta no SharePoint Designer 2010, clique no separador Opções e, em seguida, selecione a caixa atualização assíncrona .

1. Para adicionar um botão atualizar à página, selecione a caixa de botão atualizar .
   Isto permite que os visitantes do site cliquem num de botão atualizar para atualizar manualmente a página.

2. Selecione um intervalo de atualização: 15 segundos, 30 segundos ou 60 segundos.

3. Guarde as alterações à sua lista ou vista de dados.

Início da Página

Adicionar opções da barra de ferramentas

Se a sua vista utilizar uma lista ou biblioteca como origem de dados, pode adicionar uma barra de ferramentas da lista do SharePoint à vista para que os utilizadores possam trabalhar de forma mais eficiente com a lista ou biblioteca subjacente. A barra de ferramentas da lista do SharePoint é a barra de menus na parte superior de uma lista ou biblioteca que fornece várias opções para trabalhar com essa lista ou biblioteca. Existem dois tipos de barras de ferramentas que pode adicionar:

• A barra de ferramentas do SharePoint oferece opções de edição da lista, como adicionar novos itens, criar vistas e colunas e editar as propriedades da lista.

• A barra de ferramentas de agrupamento oferece opções de visualização de lista, como alterar a filtragem, ordenação e agrupamento.

Siga os seguintes passos para adicionar a barra de ferramentas a uma lista ou vista de dados.

Com a sua vista aberta no SharePoint Designer 2010, clique no separador estrutura e, em seguida, clique em Opções .

1. Para adicionar uma barra de ferramentas completa com opções de edição da lista, clique em barra de ferramentas do SharePoint.

2. Para adicionar uma barra de ferramentas com opções de visualização de lista, clique em barra de ferramentas de agrupamento.

   Nota:  A barra de ferramentas aplica-se a filtragem na apresentação da vista e não no nível de consulta. Como tal, deve confiar nesta questão, uma vez que é a principal forma de filtrar a vista. Para isso, deve utilizar a filtragem descrita anteriormente neste artigo.

3. Para remover a barra de ferramentas, clique em nenhuma.

4. Guarde as alterações à sua lista ou vista de dados.

Quando abrir a vista no browser, verá a barra de ferramentas na parte superior da página. Se ativar a barra de ferramentas do SharePoint e a barra de ferramentas de agrupamento, verá estas opções na parte superior da vista.

Início da Página

Aplicar estilos de vista

Ao criar uma lista ou vista de dados, por predefinição, os dados são normalmente apresentados num esquema de tabela básica. Pode alterar o esquema da vista de forma rápida e fácil ao aplicar um estilo de vista diferente. Por exemplo, pode alterar o esquema da tabela básica da sua vista para um que apresente a vista com limites, colunas ou listas com marcas.

Antes de aplicar um estilo de vista a uma lista ou vista de dados, é importante que tenha em atenção que todas as personalizações anteriores e as ligações de peças Web serão removidas.

Siga os passos seguintes para aplicar um estilo de vista a uma lista ou vista de dados.

Com a sua vista aberta no SharePoint Designer 2010, clique no separador estrutura e, em seguida, clique num dos estilos de vista com base na descrição de pré-visualização e texto de pairar.

1. Para ver mais estilos, clique em mais no canto inferior direito do grupo estilos de vista .

2. Uma mensagem de aviso apresenta informações de que qualquer formatação personalizada e ligações de peças Web serão removidas se alterar o estilo de vista. Clique em Sim para continuar.

   Nota:  Se escolher um estilo que apresente menos campos do que a vista original, esses campos são removidos da vista.

3. Guarde as alterações à sua lista ou vista de dados.

Início da Página

Mais opções de personalização

Para além das personalizações acima, pode personalizar uma lista ou vista de dados das seguintes formas:

• Criar uma coluna de fórmula     que apresenta o resultado de um cálculo de outras colunas na vista. Isto é semelhante à forma como utiliza fórmulas num programa de folhas de cálculo. Por exemplo, pode multiplicar o preço unitário de um produto pelo número de unidades em estoque para apresentar o valor total de itens numa coluna separada.

• Apresentar dados de várias origens     numa vista única. Esta é uma forma poderosa de combinar origens de dados num único local. Por exemplo, pode mostrar categorias de produtos a partir de uma lista e informações de produtos de outra lista na mesma vista.

• Adicionar parâmetros     a uma lista ou vista de dados. Por exemplo, pode querer transmitir um parâmetro de outro menu para a vista de dados e filtrar os dados por esse valor de parâmetro.

• Adicionar controlos de servidor     à lista ou vista de dados. Pode associar controlos do SharePoint, controlos do ASP.NET e muito mais para uma origem de dados e adicioná-los a uma vista para criar interfaces de dados sofisticadas e interativas para os seus utilizadores.

• Altere o tipo de letra e a formatação    da vista de lista ou de dados. Pode alterar o tamanho do tipo de letra, a cor do tipo de letra, a família de tipo de letra e os campos e cabeçalhos de coluna. Pode fazê-lo manualmente utilizando as ferramentas WYSIWYG no SharePoint Designer 2010 ou aplicar estilos CSS a estes elementos na página.

• Personalizar o esquema de tabela     da lista ou da vista de dados. Pode adicionar e remover células de tabela, alterar a largura ou a altura de uma linha ou coluna, mostrar ou ocultar os limites ou sombreado e muito mais com as opções de edição de tabela no SharePoint Designer 2010.

Início da Página