Hoy un cliente me ha pedido que quería una foto aleatoria en el portal. Diferente para cada vez que accediera al portal.
La solución ha sido fácil.
Primero he creado una
Biblioteca de Imágenes. En ella una columna de
Sí o
No, con valor por defecto a
Sí. Que nos servirá para que el propio usuario elija entre que fotos quiere que se haga la selección sin tener que eliminarlas de la biblioteca. Sólo tendrá que marcarlas a
No.
Lo siguiente ha consistido en hacer una
Vista de Datos, en la que mostramos todos los elementos y filtramos por los que el campo anterior esta a Sí.
SharePoint Designer generará todo el código por nosotros. Veremos que tenemos todas las fotos en una tabla, una debajo de otra.
Ahora entraremos en código y buscaremos:
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">Table</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/>
Y añadiremos la siguiente lineas tras lo anterior:
<xsl:variable name="totalRows" select="count($Rows)" />
Quedando:
<xsl:template name="dvt_1">
<xsl:variable name="dvt_StyleName">Table</xsl:variable>
<xsl:variable name="Rows" select="/dsQueryResponse/Rows/Row"/> <xsl:variable name="totalRows" select="count($Rows)" />
Lo único que hemos hecho, es recoger en
totalRows, el número de imágenes que están marcadas a
Sí.
Buscaremos la llamada al
Body:
<xsl:call-template name="dvt_1.body">
Y justo antes de él, crearemos nuestro número aleatorio y los guardaremos en una variable:
<xsl:variable name="RandomNumber" select="ddwrt:Random(1, $totalRows)" />
Ya tenemos lo más importante, nuestro número aleatorio, entre 1 y el número de imágenes totales con la columna marcada a
Sí. Y se las pasaremos como parámetro a
dvt_1.body. Quedando el código:
<xsl:variable name="RandomNumber" select="ddwrt:Random(1, $totalRows)" />
<xsl:call-template name="dvt_1.body">
<xsl:with-param name="Rows" select="$Rows"/>
<xsl:with-param name="RandomNumber" select="$RandomNumber"/>
</xsl:call-template>
Dentro de
dvt_1.body recogeremos el valor de
RandomNumbre y se lo pasaremos a la función
dvt_1.rowview que es la que pinta cada uno de los elementos por medio de un
for-each, quedando:
<xsl:template name="dvt_1.body">
<xsl:param name="Rows"/>
<xsl:param name="RandomNumber"/>
<xsl:for-each select="$Rows">
<xsl:call-template name="dvt_1.rowview">
<xsl:with-param name="RandomNumber" select="$RandomNumber"/>
</xsl:call-template>
</xsl:for-each>
</xsl:template>
Y por último, dentro de
dvt_1.rowview, recogeremos el valor de
RandomNumber y por medio de un
if, pintaremos sólo el elemento (
@ID) que coincida con nuestro número aleatorio. Quedando:
<xsl:template name="dvt_1.rowview">
<xsl:param name="RandomNumber"/>
<xsl:if test="@ID = $RandomNumber">
<tr>
<td>
<img border="0" src="{@FileRef}"/>
</td>
</tr>
</xsl:if>
</xsl:template>
La maquetación ya corre por cuenta de cada uno. En mi caso, debía ocupar el 100% de la página y tener un borde negro.
Esta vez no he buscado en San Google, sino que como tenía poco trabajo, lo he creado pensando un poquito. Como se puede ver, no ha sido muy complicado, aunque estoy seguro, que si buscáis, habrá mil maneras de hacerlo.
