Usando XSLT para customizar Visões de Listas Sharepoint
Autor: Bruno Rafael Muratore | Publicado: 2012-06-27T17:03:00-03:00

Neste post irei mostrar como utilizar um arquivo XSL para customizar o layout de exibição de uma lista padrão do Sharepoint. Desta forma, podemos exibir que campos quisermos de uma lista, dentro da estrutura html+css que desejarmos, sem ter que criar uma WebPart para isso.

Para download deste post no formato Docx ( melhor visualização e com PRINTS ), clique aqui.
Para download do XSL usado neste exemplo, clique aqui.

O Resultado final desta customização será:












Usando XSLT para customizar Visões de Listas Sharepoint









Introdução








Este documento tem como objetivo orientar na customização do
layout da webpart nativa do sharepoint para exibição de listas.

Neste exemplo faremos a customização de uma lista de “Fórum”
que tem como intuito ser um chat entre duas ou mais pessoas.

 








Sumário

Introdução. 1

Lista. 1

Visão. 1

WebPart. 2

XSL









Lista







A lista que usaremos para isso será a lista Fórum, que terá
apenas 2 campos: Nome(texto simples) &nbsp;e mensagem(rich
text). Também usaremos o campos criado,
que já é padrão em todas as listas do sharepoint.










Visão







Precisamos de uma visão para exibirmos na webpart. Podemos
criar uma visão customizada, ou usar a exibição padrão, que é a Todos os Itens.
Neste exemplo usarei a todos os itens.



A exibição padrão só exibe os campos nome e mensagem. Como
também queremos exibir a data da mensagem, vamos editar a exibição para mostrar
o campo criado. Vamos aproveitar
também para ordenar a exibição por ordem decrescente do campo criado, para que as mensagens mais
novas apareçam em cima.








WebPart







Agora vamos inserir a webpart na página. Dentro de Inserir
WebPart, entrar na categoria Listas e
Bibliotecas e escolher a Lista desejada, no nosso caso, fórum.




 
 
  
  
  
  
  
  
  
  
  
  
  
  
 
 
 

 


Após inserida a webpart, ela irá mostrar a visão Todos os
Itens, sem personalização nenhuma. Caso quiséssemos mostrar outra exibição,
basta editar a webpart e escolher a exibição desejada.

Já podemos aproveitar e colocar o link do nosso XSL na tela
de edição da WebPart. Dentro do grupo Diversas,
no Link XSL colocar o caminho do
XSL, exemplo: /Xsl/forum.xls


 


Agora só precisamos criar este XSL.

XSL






Para criar o xsl, basta criar um arquivo normal pelo
Sharepoint Designer e renomeá-lo para XSL. O ideal é criar todos os XSL’s do
site dentro de uma mesma pasta, como neste exemplo, a pasta XSL dentro da raiz ( All Files ).



Nosso XSl deve ter o seguinte cabeçalho:



&lt;?xml version="1.0"
encoding="utf-8"?&gt;

&lt;xsl:stylesheet&nbsp;&nbsp; version="1.0"&nbsp;&nbsp; exclude-result-prefixes="x d xsl msxsl
cmswrt"&nbsp;
xmlns:x="http://www.w3.org/2001/XMLSchema"&nbsp;&nbsp; xmlns:d="http://schemas.microsoft.com/sharepoint/dsp"&nbsp;
xmlns:cmswrt="http://schemas.microsoft.com/WebParts/v3/Publishing/runtime"&nbsp;
xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
xmlns:msxsl="urn:schemas-microsoft-com:xslt"
xmlns:ddwrt2="urn:frontpage:internal"&gt;

&nbsp; &lt;xsl:param
name="ItemsHaveStreams"&gt;&nbsp;&nbsp;&nbsp;
&lt;xsl:value-of select="'False'" /&gt;

&nbsp;
&lt;/xsl:param&gt;

&nbsp; &lt;xsl:variable
name="OnClickTargetAttribute"
select="string('javascript:this.target=&amp;quot;_blank&amp;quot;')"
/&gt;

&nbsp; &lt;xsl:variable
name="ImageWidth" /&gt;

&nbsp;
&lt;xsl:variable name="ImageHeight" /&gt;

&lt;xsl:template match="/"
xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime"
ddwrt:ghost="" &gt;&nbsp; 



Pronto. Agora dentro desta última tag xsl:template é onde podemos colocar nosso código customizado.
Podemos colocar qualquer tag html aqui dentro, além de tags próprias do xlst,
como if ou for. Os elementos html criados aqui também podem usar classes e
id’s que estejam no css de nosso site.

Vamos começar pelo cabeçalho:



&lt;div
class="tituloForum"&gt;Fórum&lt;/div&gt;



Agora que já temos nosso cabeçalho só com o título da lista,
podemos exibir as mensagens. Para isso devemos colocar um for, para ler todos os registros da lista, e devemos informar ao
xsl qual campos queremos que sejam exibidos, usando a tag value-of. Exibiremos somente os campos Title, Mensagem e Created. 



&lt;xsl:for-each
select="/dsQueryResponse/Rows/Row"&gt;

&lt;div class="post"&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 


&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;p
class="titulo"&gt;&nbsp; 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;xsl:value-of
select="@Title" /&gt; ( &lt;xsl:value-of select='@Created' /&gt; ) 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;/p&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &lt;xsl:value-of
disable-output-escaping="yes" select="@Mensagem" /&gt;

&lt;/div&gt;

&lt;/xsl:for-each&gt;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 



Como podemos ver, dentro de nossa estrutura html, colocamos
as tags value-of nos lugares onde
queriamos que fossem exibidos os campos da lista. Note que no campo Mensagem,
adicionamos o atributo disable-output-escaping,
pois é um campo do tipo Rich Text, e esse atributo faz com que a formatação
seja exibida corretamente.

Podemos agora adicionar um rodapé, com um link para criar
uma nova mensagem. Para montar o link, usei um Javascript que redireciona para
a página de novo item do fórum, dentro de uma pop-up, que pode ser declarado
dentro do próprio XSL.



&lt;script
type="text/javascript"&gt;

function linkForum(){&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 

&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; NewItem2(event,
'http://demo2010a:2222/Lists/Frum/NewForm.aspx?RootFolder=&amp;amp;IsDlg=1&amp;amp;cid='
+ obtemContratoId());

}

&lt;/script&gt;

&lt;div
class="rodapeForum"&gt;

&lt;a
class="ms-addnew" id="idHomePageNewItem"
href="#"&nbsp;
target="_self"&gt;

&lt;xsl:attribute
name="onclick"&gt;Javascript:linkForum()&lt;/xsl:attribute&gt;

Adicionar nova mensagem 

&lt;/a&gt;

&lt;/div&gt;



E agora que já temos todo o layout pronto, basta fecharmos
as tags template e stylesheet.



&nbsp;
&lt;/xsl:template&gt; 

&lt;/xsl:stylesheet&gt;