Introducción a la modificación de renderización de contenido en SharePoint 2013 usando Display Templates y JS Link para dar un look & feel más creativo y atractivo para los usuarios

1. Creatividad en la visualización de
contenidos en SharePoint con JS Link
y Display Templates
September 26th, 2015
Barcelona

2. Thanks to our Sponsors

3. http://geeks.ms/blogs/santypr
@saintwukong
http://blogs.encamina.com/en-tu-casa-o-en-la-mia/
MVP Windows Platform Development
UX Developer
Nokia Developer Champion

4. ■ Branding
■ Creación de experiencias
■ Display Templates
■ JSLink
Agenda

5. Branding

6. ■ Implementación de acciones para homogeneizar la
identidad visual de los elementos relacionados con
una “entidad”
■ Diseño de un elemento, producto, herramienta, …
para:
■ generar sensación de unidad
■ crear una reputación
■ fidelizar/captar usuarios o clientes
■ identificar elementos distintos con una entidad global
¿Qué es el Branding?

7. Ejemplo de branding

8. ■ Definir arquitectura de la información
■ Definir Wireframes y Flujo de Navegación
■ Diseño gráfico acorde con la identidad visual
■ Implementación del diseño, cuanto más adaptado a
las nuevas tendencias mejor
Cómo aplicar Branding en SharePoint

9. Evolucionar
o morir

10. En SharePoint 2010 podíamos aplicar Branding y ser
creativos a la hora de mostrar un diseño atractivo del
contenido mediante tres elementos principales.
■ Páginas maestras
■ Diseños de página
■ Plantillas XSLT
¿De dónde venimos?

11. Se introducen nuevos conceptos para el diseño de
interfaces adaptados a las nuevas tendencias para
conseguir un mayor control de la visualización:
■ Display Templates
■ JSLink
SharePoint 2013, Online, 2016,…

12. Display
Templates

13. ■ Plantillas para mostrar cualquier elemento
relacionado con búsquedas (elementos, marco,
refinadores, …)
■ Se componen de dos archivos, la versión editable
en HTML y la versión compilada en JavaScript
■ Permiten gestionar la visualización y el
comportamiento de los elementos
■ Se integran a nivel de Site y Site Collection y no
relacionadas directamente con Web Parts
¿Qué son y para qué se usan?

14. Estructura y asignación

15. Ejecutando código tras el renderizado
AddPostRenderCallback(ctx, function(){
// loop over all queries on the page
var allRendered = true;
for (group in Srch.ScriptApplicationManager.get_current().queryGroups) {
var displays = Srch.ScriptApplicationManager.get_current().queryGroups[group].displays;
if (displays.length > 0 && !displays[0].get_renderedResult() && displays[0].get_visible()) {
//check if results are rendered
allRendered = false;
}
}
if(allRendered) {
console.log("DONE!!!!");
} else {
console.log("WAIT FOR IT!!!!");
}
});

17. JSLink

18. ■ Permite controlar el renderizado de los elementos
(campos, web parts, formularios, …)
■ Se asigna mediante la propiedad “JS Link” gracias a
un nuevo tipo de contenido “JavaScript Display
Template”
■ No funciona, al menos no correctamente, en
formularios customizados
¿Qué es y qué nos permite hacer?

19. ■http://code.msdn.microsoft.com/office/Client-side-
rendering-JS-2ed3538a
■https://msdn.microsoft.com/es-
es/library/office/jj220061.aspx
■http://www.sharepointnutsandbolts.com/2013/01/usi
ng-jslink-to-change-ui-of-sharepoint_20.html
■http://www.learningsharepoint.com/2013/04/13/shar
epoint-2013-js-link-tutorial/
Ejemplos de uso

20. ■ Tiene aplicación sobre SPFields
■ También se puede aplicar al comportamiento de
formularios (Véase formulario tabulado)
¿A qué elementos se aplica?

23. Q & A

24. http://geeks.ms/blogs/santypr
@saintwukong
http://blogs.encamina.com/en-tu-casa-o-en-la-mia/
MVP Windows Platform Development
UX Developer
Nokia Developer Champion