"Personalizando vistas de los elementos (items) en listas de SharePoint"

diciembre 1, 2009
By

Sharepoint nos brinda la posibilidad de definir vistas para sus listas con el fin de presentar los mismos datos de disímiles formas según determinados criterios.

Cuando creamos una nueva vista para una lista (figura 1), vista

SharePoint nos permite escoger el esquema general de la vista, es     decir, cómo estarán distribuidos sus elementos, entre formatos predeterminados tal y como se muestra en la figura 2.

as

Figura 2

De esta forma podemos lograr tener desde vistas tabulares hasta vistas más complejas como de tipo calendario y jerárquicas.

Ahora, una vez definido el formato en el que se presentarán los elementos, podemos seleccionar entre diversas plantillas de estilos, aquella que indicará cómo se visualizarán los mismos como se muestra en la figura 3.

b

Figura 3

Estas plantillas son útiles para desarrollo rápido pero no siempre satisfacen nuestros gustos y necesidades.

¿Cómo lograr un estilo personalizado para nuestros  elementos?

Veamos 2 posibles soluciones a este problema.


Primera Solución

Sería deseable crear una plantilla general que refleje nuestros gustos y sea válida para cualquier elemento de una lista, la cual apareciera en la sección Estilo de vista (View Style), tal y como se encuentran las plantillas  Tabla Básica (Basic Table), Encuadrado (Boxed), Sombreado (Shaded), por mencionar algunas.

Entonces, no esperemos más, manos a la obra.

Cada una de estas plantillas está definida en el fichero VWSTYLES.XML en el directorio:

C:\Program Files\Common Files\Microsoft Shared\web server extensions\12\TEMPLATE\GLOBAL\XML

Agregando una etiqueta hija  <ViewStyle> … </ViewStyle> a la etiqueta raíz  <ViewStyles> del fichero VWSTYLES.XML lograremos que esta plantilla sea añadida a la lista mostrada anteriormente.

Una buena práctica para empezar consiste en copiar una de las plantillas ya existentes y hacerle pequeñas modificaciones para ir jugando con los resultados.

Es importante resaltar que la definición de la misma es en el lenguaje de marca CAML (Collaborative Application Markup Language) basado en XML, al cual nos tiene SharePoint acostumbrado en la definición de sus campos, vistas, listas y sitios.

Desarrollemos como ejemplo una plantilla para visualizar los elementos de una lista de Profesores que contiene una columna Name, de tipo texto, una columna Picture de tipo URL y una columna Details de tipo Note, cuya apariencia sea la mostrada en la figura 4.

d

Figura 4

Para ello añada el siguiente codigo al fichero VWSTYLES.XML

<ViewStyle ID="21" DisplayName="Personalizado" Preview="_layouts/images/prvnewsn.gif" Description="Este
es un estilo de vista personalizado">

  <!--el header de la vista-->
  <ViewHeader>
    <HTML>   <![CDATA[<table> ]]>    </HTML>
  </ViewHeader>

  <!--describe el estilo de cada elemento de la vista-->
  <ViewBody>
    <!-- definiendo una variable para saber por cada campo del elemento cómo lo
representaremos si por columna o por fila -->
    <SetVar Name="ColsOrBody" Scope="Request" Value="Cols" />

    <!-- definiendo fila para las columnas -->
    <HTML><![CDATA[<TR class="]]></HTML>
    <Switch>
      <Expr>
        <GetVar Name="AlternateStyle"/>
      </Expr>
      <Case Value="1">ms-alternating</Case>
      <Default></Default>
    </Switch>
    <HTML><![CDATA[">]]></HTML>

    <SetVar Name="HasBody" Scope="Request" Value="0" />
    <SetVar Name="First" Scope="Request" Value="0" />

    <!-- definiendo plantilla para cada campo del elemento -->
    <Fields>
      <!-- se utiliza cuando queremos preguntar por alguna propiedad del elemento,
 en este caso Type, según el tipo será su representación -->
      <FieldSwitch>
        <Expr>
          <Property Select="Type" />
        </Expr>
        <Case Value="Note">
          <SetVar Name="ColsOrBody" Scope="Request" Value="Body" />
        </Case>
      </FieldSwitch>
      <!-- definiendo plantilla para cada campo segun la variable
 ColsOrBody -->
      <Switch>
        <Expr>
          <GetVar Name="ColsOrBody" />
        </Expr>
        <Case Value="Cols">
          <HTML><![CDATA[<TD Class="]]></HTML>
          <FieldSwitch>
            <Expr>
              <Property Select="ClassInfo"/>
            </Expr>
            <Case Value="Menu">
              <HTML><![CDATA[ms-vb-title"  style="padding-left:8px;padding-right:10px;
                          padding-bottom:5px;padding-top:10px]]>  </HTML>
            </Case>
            <Case Value="Icon">
              <HTML><![CDATA[ms-vb-icon"   height="100%]]></HTML>
            </Case>
            <Default>
              <FieldSwitch>
                <Expr>
                  <Property Select="Type"/>
                  <PresenceEnabled/>
                </Expr>
                <Case Value="UserTRUE">ms-vb-user</Case>
                <Case Value="UserMultiTRUE">ms-vb-user</Case>
                <Case Value="URL">
                  <HTML><![CDATA[ms-vb2]]></HTML>
                </Case>
                <Default>ms-vb2</Default>
              </FieldSwitch>
            </Default>
          </FieldSwitch>
          <Switch>
            <Expr>
              <GetVar Name="First" />
            </Expr>
            <Case Value="0">
              <HTML><![CDATA[" rowspan="2"> ]]></HTML>
            </Case>
            <Default>
              <HTML><![CDATA[">]]></HTML>
            </Default>
          </Switch>
          <Field/>
          <HTML><![CDATA[</TD>]]></HTML>
        </Case>
        <Default>
          <Switch>
            <Expr>
              <LookupColumn/>
            </Expr>
            <Case Value=""></Case>
            <Default>
              <SetVar Name="HasBody" Scope="Request" Value="1" />
              <HTML><![CDATA[</TR>]]></HTML>
              <HTML><![CDATA[<TR class="]]></HTML>
              <Switch>
                <Expr>
                  <GetVar Name="AlternateStyle"/>
                </Expr>
                <Case Value="1">ms-alternating</Case>
                <Default></Default>
              </Switch>
              <HTML><![CDATA[">]]></HTML>
              <HTML><![CDATA[<TD class = "ms-vb-tall" style="padding-left:10px;
                       padding-right:10px; padding-top:5px" ]]></HTML>
              <FieldSwitch>
                <Expr>
                  <Property Select="Type" />
                </Expr>
                <Case Value="Note"></Case>
                <Default>
                  <Property Select="DisplayName" HTMLEncode="TRUE"/>
                  <HTML><![CDATA[: ]]></HTML>
                </Default>
              </FieldSwitch>
              <Field/>
              <HTML><![CDATA[</TD>]]></HTML>
            </Default>
          </Switch>
        </Default>
      </Switch>
      <SetVar Name="First" Scope="Request" Value="1" />
    </Fields>
    <HTML><![CDATA[</TR>]]></HTML>
  </ViewBody>

  <!--el footer-->
  <ViewFooter>
    <HTML><![CDATA[</TABLE>]]></HTML>
  </ViewFooter>

  <!--Cuando no hay elementos en la vista-->
  <ViewEmpty>
    <HTML><![CDATA[<div>La lista está vacía</div>]]></HTML>
  </ViewEmpty>
  <Script>
    g_RequiredFields[21] = new Array;
  </Script>
</ViewStyle>

 
  

Ahora ya puede crear su vista Profesor para la lista anteriormente mencionada y seleccionar entre los Estilos de Vista el que acabamos de hacer: Personalizado.

No olvide antes reiniciar Internet Information Services, para ello ejecute desde la línea de comandos iisreset.

Segunda Solución

A diferencia de la primera solución donde obtuvimos una plantilla de estilo general que puede ser aplicada a cualquier vista, esta segunda solución define la visualización del elemento de una lista desde código en el momento de ser instanciada, es decir, cuando estemos desarrollando la feature que crea el tipo de contenido, su definición de lista e instancia. Note que de esta forma garantizamos la presentación por defecto de nuestros elementos desde el momento de su definición, lo que puede ser deseable muchas veces.

Un objeto SPList list, tiene la propiedad DefaultView de tipo SPView que nos devuelve la vista por defecto de la lista, este objeto a su vez tiene una propiedad ViewBody que es de tipo string, el cual representa el código CAML correspondiente a la etiqueta <ViewBody>, de forma análoga tiene las propiedades ViewEmpty, ViewHeader, y las mencionadas anteriormente.

Entonces una solución sencilla es crear un FeatureReceiver relacionado con la feature encargada de instanciar la lista que estamos definiendo y en su método FeatureActivated modificar el valor de la propiedad ViewBody de la vista por defecto, por ejemplo:

 	   public override void FeatureActivated(SPFeatureReceiverProperties properties)
        {
            SPWeb web = properties.Feature.Parent as SPWeb ;
  	    web.Lists["MyList"].DefaultView.ViewEmpty = "<HTML><![CDATA[<tr><td><div>
                               No hay elementos </div></td></tr>]]></HTML>";
            web.Lists["MyList"].DefaultView.ViewBody = "<HTML><![CDATA[<tr><td><div>
                               Este es un elemento </div></td></tr>]]></HTML>";
            web.Lists["MyList"].DefaultView.Update();
        }

Esta solución no le permite al usuario cuando cree otra lista basándose en nuestra definición de lista disfrutar del estilo que hemos logrado, sería genial tener una especie de EventReceiver que nos informe de la creación de una lista en SharePoint; personalmente aún no lo he descubierto, si saben cómo hacer algo similar agradecería que me comentaran.

Bien, esto es todo, espero les sea útil a aquellos que en algún momento hayan sentido la necesidad de lograr sus propias representaciones de los elementos en las listas de SharePoint.

Tags: ,

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *

*

Acerca del autor...

Liannet Lucia Reyes Hernandez