SharePoint 4 Developers

Guia de referência adicional em desenvolvimento .NET / SharePoint

Configurando Formatação Condicional Programaticamente

23. fevereiro 2011 Marcel Medina Dicas e Truques, Notas Rápidas (0)
Aprenda a como aplicar a formatação condicional em List Views manualmente e programaticamente usando o SharePoint Designer 2010 e Visual Studio 2010 respectivamente.

Oi pessoal,

Hoje quero falar um pouco sobre formatação condicional, que permite aplicarmos estilos HTML em views dependendo de critérios especificados. Isso não é algo novo no SharePoint, pois desde o MOSS 2007 isso já existia.

Nesse post vou demonstrar como aplicar formatação condicional de forma manual e programática. Fiquem ligados!

Formatação condicional no SharePoint Designer 2010

Tomemos como exemplo a lista de Grades (Notas) abaixo. Basicamente a idéia é implementar uma seleção de cores na coluna Grade para diferenciar as notas. Com base nessas notas as cores irão variar.

1_6804
Figura 1 – Lista de Grades (Notas)

Ao utilizar o SharePoint Designer 2010, essa customização fica fácil. Vá até a Lista de Grades no SharePoint Designer 2010 e abra a view chamada “All Items”, conforme Figura 2:

2_6804
Figura 2 – All Items view

O interessante é que a view pode ser visualizada de 2 maneiras (Design e Code), o que facilita nosso trabalho. Siga os passos conforme demonstrado na Figura 3 e a formatação condicional será aplicada na coluna Grade.

3_6804
Figura 3 – Formatação Condicional no SharePoint 2010

Logo após o passo 3 acima, um popup solicitará que você especifique um critério para sua condição, em outras palavras uma regra, que definirá quando aplicar as cores corretas na Lista de Grades (Notas).

44
Figura 4 – Condition Criteria

De acordo com a regr acima, defina a cor de fundo (background colour) para Verde.

OBS: Cores diferentes serão aplicadas a diferentes regras criadas.

54
Figura 5 – Background colour

Depois de configurar a regra, a formatação condicional pode ser visualizada pelas cores disponíveis, conforme Figura 6:

6_6804
Figura 6 – Cores da Formatação Condicional

A barra da formatação condicional é bastante clara, exibe todas as regras criadas. Isso permite que você configure os estilos a qualquer momento. Bastante útil!

No final obteremos a Lista de Grades desse jeito, conforme Figura 7:

7_6804
Figura 7 – Formatação Condicional aplicada à Lista de Grades (Notas)

Formatação condicional no Visual Studio 2010

Até o momento vimos como definir formatação condicional manualmente. Agora veremos como definí-la programaticamente!

Primeiro de tudo identifique a seção Xsl (da Figura 6), copie todo o conteúdo dessa seção em um arquivo xsl, conforme o código abaixo:

Code Snippet
  1. <xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:asp="http://schemas.microsoft.com/ASPNET/20" xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal" xmlns:o="urn:schemas-microsoft-com:office:office">
  2.   <xsl:include href="/_layouts/xsl/main.xsl"/>
  3.   <xsl:include href="/_layouts/xsl/internal.xsl"/>
  4.   <xsl:param name="AllRows" select="/dsQueryResponse/Rows/Row[$EntityName = '' or (position() &gt;= $FirstRow and position() &lt;= $LastRow)]"/>
  5.   <xsl:param name="dvt_apos">&apos;</xsl:param>
  6.   <xsl:template name="FieldRef_printTableCell_EcbAllowed.Grade" match="FieldRef[@Name='Grade']" mode="printTableCellEcbAllowed" ddwrt:dvt_mode="body" ddwrt:ghost="" xmlns:ddwrt2="urn:frontpage:internal">
  7.     <xsl:param name="thisNode" select="."/>
  8.     <xsl:param name="class" />
  9.     <td>
  10.       <xsl:attribute name="style">
  11.         <xsl:if test="normalize-space($thisNode/@Grade) = 'A'" ddwrt:cf_explicit="1" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">background-color: #009900;</xsl:if>
  12.         <xsl:if test="normalize-space($thisNode/@Grade) = 'B'" ddwrt:cf_explicit="1" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">background-color: #66FF33;</xsl:if>
  13.         <xsl:if test="normalize-space($thisNode/@Grade) = 'C'" ddwrt:cf_explicit="1" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">background-color: #FFFF00;</xsl:if>
  14.         <xsl:if test="normalize-space($thisNode/@Grade) = 'D'" ddwrt:cf_explicit="1" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">background-color: #FF9900;</xsl:if>
  15.         <xsl:if test="normalize-space($thisNode/@Grade) = 'E'" ddwrt:cf_explicit="1" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">background-color: #FF0000;</xsl:if>
  16.       </xsl:attribute>
  17.  
  18.       <xsl:if test="@ClassInfo='Menu' or @ListItemMenu='TRUE'">
  19.         <xsl:attribute name="height">100%</xsl:attribute>
  20.         <xsl:attribute name="onmouseover">OnChildItem(this)</xsl:attribute>
  21.       </xsl:if>
  22.       <xsl:attribute name="class">
  23.         <xsl:call-template name="getTDClassValue">
  24.           <xsl:with-param name="class" select="$class" />
  25.           <xsl:with-param name="Type" select="@Type"/>
  26.           <xsl:with-param name="ClassInfo" select="@ClassInfo"/>
  27.         </xsl:call-template>
  28.       </xsl:attribute>
  29.       <xsl:apply-templates select="." mode="PrintFieldWithECB">
  30.         <xsl:with-param name="thisNode" select="$thisNode"/>
  31.       </xsl:apply-templates>
  32.     </td>
  33.   </xsl:template>
  34. </xsl:stylesheet>

OBS: O SharePoint Designer 2010 cria uma subsection chamada xsl:attribute para armazenar a formatação condicional que você criou (Linhas 10 a 16).

Nesse exemplo criei uma feature para o deploy da Lista de Grades. Observe a estrutura da solução para você ter uma idéia do que ela é constituída:

94
Figura 8 – Solução da Formatação Condicional

OBS: Os arquivos xsl no SharePoint 2010 precisam ser disponibilizados no diretório Layouts\Xsl.

Para fazer o deploy da Lista de Grades, codifiquei o método FeatureActivated (disponível no Event Receiver da feature):

Code Snippet
  1. public override void FeatureActivated(SPFeatureReceiverProperties properties)
  2. {
  3.     SPWeb web = (SPWeb)properties.Feature.Parent;
  4.  
  5.     string grades = "Grades";
  6.  
  7.     if (web.Lists.TryGetList(grades) == null)
  8.     {
  9.         // Creating list
  10.         Guid listGuid = web.Lists.Add(grades, "", SPListTemplateType.GenericList);
  11.         SPList list = web.Lists[listGuid];
  12.         list.OnQuickLaunch = true;
  13.  
  14.         // Configuring fields
  15.         SPField title = list.Fields["Title"];
  16.         title.Title = "Name";
  17.         title.Update(true);
  18.  
  19.         list.Fields.Add("Grade", SPFieldType.Text, true);
  20.  
  21.         // Updating view
  22.         SPView mainView = list.Views[0];
  23.         mainView.ViewFields.DeleteAll();
  24.         mainView.ViewFields.Add("Attachments");
  25.         mainView.ViewFields.Add("LinkTitle");
  26.         mainView.ViewFields.Add("Grade");
  27.         mainView.XslLink = "ConditionalFormattingXsl/grades.xsl";
  28.         mainView.Update();
  29.  
  30.         // Saving changes
  31.         list.Update();
  32.     }
  33. }

OBS: Preste atenção na linha 27. Ela que faz o serviço! Sensacional.

Uma vez que a solução foi disponibilizada, ative-a e você obterá a Lista de Grades criada com a Formatação Condicional aplicada automaticamente.

8_6804
Figura 9 – Feature criada

Faça o download da solução aqui.

Para facilitar as coisas, sempre utilize o SharePoint Designer para criar formatação condicional em suas views. Então copie a seção Xsl e cole em um arquivo xsl. Evite dores de cabeça.

Espero que isso tenha te ajudado.

Referências:
http://stefan-stanev-sharepoint-blog.blogspot.com/2010/08/xsltlistviewwebpart-several-xslt-tips.html
http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spview.xsllink.aspx
http://office.microsoft.com/en-us/sharepoint-designer-help/apply-conditional-formatting-to-a-data-view-HA010099624.aspx

[]’s,

Marcel Medina

Clique aqui para ler o mesmo conteúdo em Inglês.

blog comments powered by Disqus