Algo que suele ser un requerimiento casi estándar en todos los clientes que contratan servicios para personalizar SharePoint es el de ajustar vistas para no luzcan tan «SharePoint», siempre pensando en el Look And Feel (LAF de ahora en adelante) del sitio. Muchos diseñadores van a mostrar propuestas muy interesantes de las vistas de listas o bibliotecas que son muy atractivas visualmente pero que si has trabajado con SharePoint  y XSLT las verás con mucho sufrimiento, bien, esto ya no es necesariamente cierto para SharePoint 2013 ahora con el Client-Side rendering o «representación del lado del cliente» esto basado en JavaScript que es más familiar y sencillo de utilizar.

Si has editado Web Parts u otros elementos habrás notado que existe una propiedad llamada JSLink y que no es más que la URL del archivo JavaScript con el código para modificar la visualización del elemento (realmente no sólo la visualización, se pueden realizar múltiples acciones pero en este post sólo hablaré de la visualización).

Bien, para empezar miremos una vista de una lista en SharePoint Designer, en este caso «Todos los contactos» de una lista de contactos:

Allí vemos resaltada la propiedad de la que estamos hablando y vemos que apunta a clienttemplates.js y es esto lo que modificaremos para generar nuestra vista personalizada. Empecemos con el código

(function () {
	var ctx = {};
	ctx.Templates = {};

	ctx.Templates.Header = "<table>";
	ctx.Templates.Footer = "</table>";

	ctx.Templates.Item = nuevaVista;
	ctx.BaseViewID = 1;
	ctx.ListTemplateType = 105;

	SPClientTemplates.TemplateManager.RegisterTemplateOverrides(ctx);
})();

El código anterior es bastante auto explicativo y en el mismo creamos un objeto de contexto (ctx) al cual asignaremos un objecto plantilla (Template) que tendrá un encabezado (Header), un pie de página (Footer) y un cuerpo (Item), adicionalmente veremos que tiene una propiedad BaseViewID con valor 1 (indicando que es la vista predeterminada y es el mismo código mostrado en la figura 1) y otra denominada ListTemplateType que tendrá el valor del tipo de plantilla, en nuestro caso 105 por ser contactos (para ver la lista completa de tipos y su código consulta http://msdn.microsoft.com/es-ve/library/microsoft.sharepoint.client.listtemplatetype(v=office.15).aspx ) y finalmente le indicamos a SharePoint que registre en el administrador de plantillas la nuestra.

Teniendo nuestra plantilla registrada procederemos a crear nuestra visualización de cada ítem, como se muestra en el código anterior inicié creando una tabla por lo cuál cada ítem nuevo será un elemento de esa tabla, el código es el siguiente:

function nuevaVista(ctx) {
	var ret = "<tr style="vertical-align:top"><td rowspan="2">" + ctx.CurrentItem.FullName + "</td><td>" + 
				ctx.CurrentItem.Company + "</td></tr><tr><td>" + ctx.CurrentItem.Email + "</td></tr>";
	return ret;
}

Ahora cargaremos nuestro archivo de script en mi caso se llama nuevaVista.js en una biblioteca que sea accesible para todos los usuarios que puedan ver la lista, en general se recomienda que sea en la Galería de MasterPages pero en este caso la colocaré en SiteAssets (Activos del sitio). Ahora modificaremos el enlace de la vista por el nuestro para ello iremos a la vista en SharePoint y hacemos clic en el engranaje, luego en editar página, seleccionamos el web part y hacemos clic en Editar en la sección Miceláneos encontraremos JSLink allí colocaremos la ruta del enlace algo así: ~site/SiteAssets/nuevaVista.js (sin ~site o ~sitecollection no he logrado que se vea el cambio), finalmente guardamos y veremos nuestra nueva vista.

Obteniendo que originalmente veíamos:

Y ahora vemos

Aún queda mucho por discutir de esta nueva funcionalidad de SharePoint pero espero que con este pequeño adelanto puedas aprovechar el potencial de la mejora. Deja tu imaginación despegar.

Hasta la próxima.