Una de las características importantes con las que cuenta SharePoint, que puede considerarse como uno de sus pilares, son las WebParts, o conocidas también como Elementos Web.
Estos elementos Web permiten esencialmente desplegar información, la cual típicamente se encuentra almacenada en listas o bibliotecas de SharePoint. Pueden haber otras fuentes de datos, pero no son interés de esta entrada por ahora. Vamos a mostrar cómo usar una WebPart que consume información de una lista o biblioteca, y por medio de XSLT, manipular dicha información para mejorar el aspecto gráfico de la WebPart que por defecto, despliega la información de manera tabular, y con una presentación poco familiar para usuarios finales. Suponiendo que tenemos una biblioteca de activos multimedia en SharePoint Server 2010, vamos agregarla a una página de contenido que llamaremos XSLT.aspx, como un Elemento Web para desplegar los videos que ahí se han dado de alta.
- Lo primero que hacemos es crear la página de contenido como una página de publicación o de elementos web. Luego editarla en modo avanzado en SharePoint Designer 2010.
- A continuación agregamos en la zona correspondiente, a través de las siguientes opciones una vista de datos vacía: Insertar – Vista de Datos – Vista de Datos Vacía.
- En este momento se debe poder visualizar una opción que permite seleccionar la fuente de datos para la vista de datos, la cual en este caso, será la biblioteca de activos multimedia. SharePoint Designer despliega una ventana que permite seleccionar de entre las listas y bibliotecas disponibles. En este caso tenemos una biblioteca llamada Videos.
En la imagen se pueden observar los siguientes elementos:
<WebPartPages:DataFormWebPart><DataFields>
</DataFields>
</WebPartPages:DataFormWebPart>En la ventana de Selector de Orígenes de Datos se puede observar la biblioteca que se quiere usar como fuente, en este caso Videos.
- En este momento se puede seleccionar la biblioteca Videos y hacer clic en el botón Aceptar. En ese instante se debe activar la ventana Detalles del origen de datos, la cual despliega todos los campos disponibles en la biblioteca de Videos. En este caso vamos a desplegar el Título y el Thumbnail (Vista previa de la dirección URL de la imagen) asociados a cada ítem dentro de la biblioteca. Seleccionando los 2 campos al tiempo se puede proceder a arrastrar y soltar dichos campos en la WebPart agregada previamente.
- Hasta este momento contamos ya con una DataFormWebPart conectada a una biblioteca llamada Videos, como fuente de datos. Ahora si se explora el código generado en SharePoint Designer, se aprecia que se tiene el tag <XSL>, lo cual indica que esta WebPart viene ya lista para ser modificada a través de dichos elementos.
Se puede observar que ya se han agregado los campos Título y el Thumbnail como un elemento IMAGE. Si se hace clic sobre los campos se puede apreciar que son totalmente modificables como elementos HTML.
<td class="ms-vb">
<xsl:value-of select="@Title"/>
</td>
<td class="ms-vb">
<img border="0" src="{@AlternateThumbnailUrl}"alt="{@AlternateThumbnailUrl.desc}"/>
</td>Es momento entonces de realizar los cambios necesarios para que los elementos queden mejor organizados. Para esto vamos a requerir de una hoja de estilos personalizada con las siguientes clases:
.comun { font-size: 12px; line-height: 16px; margin: 0 0 13px; }
.comun h3,
.comun h4 { font-family: "Myriad Pro", sans-serif; text-align: left; }
.comun h3 a,
.comun h4 a { color: #00a2ec; font-size: 11px; font-weight: normal; }
.comun h3 { color: #003b71; font-size: 21px; line-height: 23px; padding: 10px 13px 7px; }
.comun h4 { color: #003b71; font-size: 15px;}
.comun h3 small,
.comun h4 small { margin: 0 0 0 6px; }
.comun small { color: #232323; font-size: 11px; font-style: italic; }
.comun a { color: #00a2ec; text-decoration: none; }
.comun a:hover { text-decoration: underline; }
.comun a small { color: #00a2ec; }
.comun p { margin: 0 0 7px; }
.comun ul { color: #0053a1; list-style-type: disc; margin: 0 0 10px 15px; }
.comun li { margin: 0 0 7px; }
.lateral { background: #fff url("lateral.gif") repeat-x left bottom; border: 1px solid #cbe3ab; width: 255px; }
.lateral h4 { background: #cbe3ab; border: 1px solid #e6e6e6; padding: 7px 13px; }.contenido { padding: 10px 13px; }
.fix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html .fix { zoom: 1; } /* IE6 */
*:first-child+html .fix { zoom: 1; } /* IE7 */.ver_mas { border-top: 1px dotted #b3b4b4; margin: 5px 0 0; padding: 7px 0 0; text-align: right; }
#video {}
#video ul { list-style-type: none; margin: 0 0 10px; }
#video li { color: #4f4e4e; }
#video img { border: 1px #2664a9 solid; float: left; margin: 0 7px 0 0; width: 76px; }En la ruta de Activos del sitio se puede crear una carpeta llamada CSS y ahí crear un archivo, por ejemplo, estilos.css, donde se debe copiar el código anterior.
Luego de eso en la página maestra del sitio, de puede hacer referencia a la hoja de estilos así:
<SharePoint:CssRegistration name="/SiteAssets/CSS/estilos.css" After="corev4.css" runat="server"/>
- Teniendo una hoja de estilos lista, es momento de aplicar los estilos a la WebPart que ya habíamos agregado para desplegar los videos. Lo primero que se debe ubicar es la siguiente sección de código:
<xsl:template name="dvt_1.rowview">
<tr>
<xsl:if test="position() mod 2 = 1">
<xsl:attribute name="class">ms-alternating</xsl:attribute>
</xsl:if>
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<td class="ms-vb" width="1%" nowrap="nowrap">
<span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view"></span>
</td>
</xsl:if>
<td class="ms-vb">
<xsl:value-of select="@Title"/>
</td>
<td class="ms-vb">
<img border="0" src="{@AlternateThumbnailUrl}" alt="{@AlternateThumbnailUrl.desc}"/>
</td>
</tr>
</xsl:template>
Este código debe entonces quedar así:
<xsl:template name="dvt_1.rowview">
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<span ddwrt:amkeyfield="ID" ddwrt:amkeyvalue="ddwrt:EscapeDelims(string(@ID))" ddwrt:ammode="view"></span>
</xsl:if><li class="clearfix">
<a href="#">
<img border="0" src="{@AlternateThumbnailUrl}" alt="{@AlternateThumbnailUrl.desc}"/>
</a>
<p><xsl:value-of select="@Title"/></p>
</li>
</xsl:template>
- Seguido entonces se debe ubicar la siguiente sección en el código:
<xsl:otherwise>
<table border="0" width="100%" cellpadding="2" cellspacing="0">
<tr valign="top">
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<th class="ms-vh" width="1%" nowrap="nowrap"></th>
</xsl:if>
<th class="ms-vh" nowrap="nowrap">Título</th>
<th class="ms-vh" nowrap="nowrap">Vista previa de la dirección URL de la imagen</th>
</tr>
<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>
</table>
</xsl:otherwise>
Se debe reemplazar por lo siguiente:
<xsl:otherwise>
<div class="comun lateral" id="video">
<h4>Videos</h4>
<xsl:if test="$dvt_1_automode = '1'" ddwrt:cf_ignore="1">
<th class="ms-vh" width="1%" nowrap="nowrap"></th>
</xsl:if>
<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>
</xsl:otherwise>
- Luego de los cambios anteriores, se debe tener lo siguiente en modo de diseño en SharePoint Designer.
Como se puede observar no se tiene una imagen asociada al video. Pero suponiendo que no se tiene una imagen cargada, se puede hacer lo siguiente para usar la imagen por defecto de los videos que SharePoint ofrece.
- Seleccione en la página en modo de diseño en SharePoint Designer la imagen que debe verse así en código.
<a href="#">
<img border="0" src="{@AlternateThumbnailUrl}" alt="{@AlternateThumbnailUrl.desc}"/>
</a>Se debe cambiar por lo siguiente:
<xsl:if test="@AlternateThumbnailUrl != ''">
<a href="#">
<img border="0" src="{@AlternateThumbnailUrl}" alt="{@AlternateThumbnailUrl.desc}"/>
</a>
</xsl:if>
<xsl:if test="@AlternateThumbnailUrl = ''">
<a href="#">
<img border="0" src="/_layouts/images/VideoPreview.png" alt="Video"/>
</a>
</xsl:if>Se aprecia que cargaría una imagen por defecto en caso de que no se haya cargado un thumbnail asociado al video. En ese caso una imagen perteneciente al conjunto de imágenes de SharePoint 2010, llamada VideoPreview.png. Debe estarse viendo así la WebPart en el diseñador:
- Finalmente se guardan los cambios, y se puede visualizar el preview de la página XSLT.aspx a través del navegador Web, con lo que se tiene lo siguiente:
Por ahora esta entrada ha cumplido su objetivo, la tarea siguiente sería que podamos hacer clic en la imagen del video, pero que tenga asociada la URL al video y este se despliegue, por ejemplo en la misma página o en una nueva página. Para tener una idea pueden remitirse a una entrada donde se habla de algo similar, para tener más ideas.
Feliz WebPart XSLT rediseñada.
No comments:
Post a Comment