SharePoint 2010: Personalizar XsltListView WebPart

En estos días, hemos necesitado personalizar un XsltListView WebPart correspondiente a una lista. La solución la encontramos en un artículo en inglés y quería compartirlo traducido para aquellos a los que les cueste encontrar soluciones en inglés.

Pasos a seguir:

  1. Crear una nueva página de WebParts.
  2. Añadir WebPart de lista correspondiente a la que quieras personalizar.
  3. Salir de la edición.
  4. Editar WebPart para añadir las columnas específicas que desees ver como resultado.
  5. Abrir la página con SharePoint Designer 2010.
  6. Seleccionar el WebPart, con lo que en la Ribbon aparecerá el tab “Design” (Diseño).
  7. Seleccionar ‘Customize Xslt’ > ‘Customize Entire View’.
  8. Cambiar a la vista de código, con lo que se verá un nuevo nodo con el código Xslt añadido al WebPart.
  9. Buscar ‘mode="Item"’. Esta es la plantilla principal que gestiona la renderización de cada fila.
  10. En esta plantilla, buscar <xsl:for-each select="$Fields">. Este bucle se encarga de hacer las llamadas a las plantillas que necesarias para renderizar los campos de cada fila.
  11. Eliminar u Ocultar el bucle y añadir el HTML personalizado antes del mismo.
  12. Recordar verificar los cambios en el navegador.
  13. Al tiempo que nos hemos desecho del bucle Xslt For-each, también podemos eliminar las plantillas correspondientes a los campos, pero como puede resultar engorroso… no pasa nada por dejarlas.
  14. Una vez tengamos la visualización deseada, hay que copiar el código xslt en un nuevo fichero, por ejemplo “mylistview.xslt” y guardarla en un lugar adecuado.
  15. Ahora, podremos crear una nueva página y añadir el Web Part de lista tal y como hicimos en el paso 2.
  16. Editar el WebPart y en la y enlazar el fichero “mylistview.xslt” desde el XSL Link de la sección Miscellaneous.
  17. Guardar cambios y… ¡Listo! ya tenemos nuestro XsltListView WebPart personalizado.

 

Fuente Sandeep K Nahta