A medida que vamos acumulando una gran cantidad de entradas en nuestro blog de SharePoint, vemos que la forma predeterminada en que estas se muestran no es muy práctica para navegar por ellas. Por que digo esto, porque nos aparecen todos los artículos enteros de forma que, tenemos que ir desplazándonos verticalmente por nuestra página para localizar uno en concreto.
Una forma de hacer que nuestro blog sea más “visual” e intuitivo es limitar el contenido de nuestras entradas para que se muestre sólo un determinado número de palabras. Esta técnica no sólo se puede utilizar en blogs, sino que también sirve para cualquier tipo de lista cuyo “Cuerpo” sean múltiples líneas de texto, como pueden ser listas de artículos, noticias, posts…
El primer paso a dar, consiste en convertir nuestro Web Part a vista de datos XLST, de esta forma podremos trabajar con el código de forma más sencilla. Para ello seleccionamos el elemento web al que queremos aplicar esta vista, y hacemos clic con el botón derecho donde nos aparecerá la opción “Convertir a vista de datos XSLT”
Dentro de la etiqueta <DataSources> que se nos crea, modificamos la definición de nuestros parámetros, para que podamos identificarlos de manera más sencilla. Para ello sustituimos los valores iniciales de DefaultValue y Name
- DefaultValue="{FE289146-94E7-4004-814E-7EF446C52100}" Name="ListID
por:
- DefaultValue="Entradas de blog" Name="ListName
A continuación localizamos la definición de la plantilla <xsl:template name =”dvt_1”>, y justo encima de ella definimos una plantilla, mediante el código que vemos a continuación, que se encargará de eliminar las etiquetas HTML que se añaden, cada vez que creamos un elemento nuevo en nuestra lista.
- <xsl:template name="removeHtmlTags">
- <xsl:param name="html"/>
- <xsl:choose>
- <xsl:when test="contains($html, ‘<’)">
- <xsl:value-of select="substring-before($html, ‘<’)"/>
- <!– Recurse through HTML –>
- <xsl:call-template name="removeHtmlTags">
- <xsl:with-param name="html" select="substring-after($html, ‘>’)"/>
- </xsl:call-template>
- </xsl:when>
- <xsl:otherwise>
- <xsl:value-of select="$html"/>
- </xsl:otherwise>
- </xsl:choose>
- </xsl:template>
Para usar esta plantilla, vamos al elemento <div> donde se muestra el “Cuerpo” (Body) de nuestras entradas, y que podremos identificar mediante la clase “ms-PostBody”, y sustituimos el siguiente código:
- <div class="ms-PostBody">
- <div dir="{ddwrt:GetVar(‘Direction’)}">
- <xsl:value-of disable-output-escaping="yes" select="@Body" />
- </div>
- </div>
por :
- <div class="ms-PostBody">
- <div dir="{ddwrt:GetVar(‘Direction’)}">
- <xsl:variable name="pureText">
- <xsl:call-template name="removeHtmlTags">
- <xsl:with-param name="html" select="@Body" />
- </xsl:call-template>
- </xsl:variable>
- <span><xsl:value-of select="substring($pureText, 0, 250)" /></span>…<br/>
- </div>
- </div>
Como se puede ver, lo que hacemos es crear un variable pureText que se encargará de almacenar el texto limpio de etiquetas tras llamar a la plantilla removeHtmlTags, y a la que se le aplicará una consulta mediante el método substring que nos devolverá el “Body” de nuestras entradas, desde el carácter 0 al 250, en nuestro caso.
Y para terminar, decir, que he utilizado esta “técnica” porque me parece una de las formas más sencillas que se pueden encontrar para hacer este tipo de personalizaciones.