Diseñando webparts con XSLT – Parte I (Mi Primer WebPart)

En este post les explicaré como diseñar sus propios webparts mediante SharePoint Designer. Estos diseños los he trabajado inclusive desde Office 365 por lo que en la nube tienen toda la flexibilidad para hacer este tipo de trabajos.

Lo que buscaremos es lograr la apariencia del webpart de Eventos que se muestra al lado derecho en la página de contenido que se muestra en la siguiente imagen:

Mi recomendación es siempre trabajar el diseño HTML a parte y desde aplicarlo sobre SharePoint.

Como verán trabaje un HTML con una hoja de estilos y el acabado es el siguiente:

Desde SharePoint designer abriremos nuestro HTML para analizarlo.

Debemos identificar en primer lugar la sección que hace referencia a la cabecera del webpart. Deberá ser un DIV.

De la misma manera debemos identificar el DIV asociado a el contenido del WebPart.

También debemos identificar las clases en el CSS utilizadas para formatear al WebPart.

Ahora para aplicarlo no es muy complicado. Abrimos una página de SharePoint desde SharePoint Designer, previamente debemos haber creado nuestra lista de eventos y registrar un par de eventos de ejemplo para efectos de las pruebas.

El css lo podemos copiar en la carpeta Style Library y referenciarla desde nuestro masterpage.

Debemos insertar en un WebPart Zone nuestro DataFormWebPart y obtendremos un XSLT.

En el XSLT ubicar la plantilla dvt_1 pues esta define la cabecera del WebPart, en realidad es la sección en donde aparecen los campos de la lista pero la formatearemos para que se muestre la cabecera de eventos.

Debajo de la sección de comparación $dvt_IsEmpty despues de <xsl:otherwise> debemos copiar la estructura del HTML de nuestra cabecera incluyendo el DIV principal que engloba a todo el WebPart, deberemos mantener algunas secciones del XSLT y debería quedar algo como esto (Entre las secciones <xsl:otherwise> y </xsl:otherwise>:

<div id=”wpart”>
  <div id=”wpart_tit” style=”width:310px”>
      <xsl:if test=”$dvt_1_automode = ‘1’” ddwrt:cf_ignore=”1″>
       <th class=”ms-vh” width=”1%” nowrap=”nowrap”></th>
      </xsl:if>

      <a href=”http://miportal.sharepoint.com/TeamSite/Lists/Eventos” style=”color:white”>Eventos</a> <img src=”http://miportal.sharepoint.com/TeamSite/SiteAssets/imagenes/ico_eventos.png” alt=”imagen” width=”40″ height=”40″ class=”iconos” />
  </div>
     <xsl:call-template name=”dvt_1.body”>
      <xsl:with-param name=”Rows” select=”$Rows”/>
      <xsl:with-param name=”FirstRow” select=”1″ />
      <xsl:with-param name=”LastRow” select=”$LastRow – $FirstRow + 1″ />
      </xsl:call-template>
</div>

Las secciones marcadas en negro son las que debemos mantener.

A continuación debemos ubicar la plantilla dvt_1.rowview y borrar todo el contenido que aparece por defecto.

Debemos copiar el HTML que define el cuerpo del WebPart algo así:

<div id=”wpart_cont” style=”padding:10px 10px 10px 10px;vertical-align:middle;width:310px”>
   <span class=”fecha_eventos”><xsl:value-of select=”@EventDate”/></span>
   <br />
   <span class=”nombre_evento”><a href=”{ concat(‘http://miportal.sharepoint.com/TeamSite/Lists/Eventos/DispForm.aspx?ID=’,@ID)}” class=”nombre_evento”><xsl:value-of select=”@Title”/></a></span>
   <br />
   <span class=”lugar_evento”><xsl:value-of select=”@Location”/></span><br/>
   <img src=”http://miportal.sharepoint.com/TeamSite/SiteAssets/imagenes/linea_h.jpg” alt=”imagen” class=”linea_h” />
  </div>

Las secciones en negro son aquellas donde mediante XSLT debemos referenciar a los campos de nuestra lista de eventos en reemplazo de los textos estáticos colocados en nuestro HTML inicial.

Guardamos los cambios y listo! tenemos nuestro primer WebPart diseñado con HTML, CSS y XSTL.

Deja un comentario

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