Creatividad en la visualización de contenidos en SharePoint con JS Link y Display Templates
Descargar como PPTX, PDF1 recomendación713 vistas
El documento detalla el uso de branding y creatividad en la visualización de contenidos en SharePoint mediante JSLink y Display Templates. Se discuten sus aplicaciones, procedimientos de implementación y beneficios en la creación de una experiencia de usuario homogénea y atractiva. También se mencionan ejemplos prácticos y la evolución de estas técnicas desde SharePoint 2010 hasta versiones más recientes.
![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!!!!");
}
});](https://image.slidesharecdn.com/spsbcn15-displaytemplates-jslink-151002121106-lva1-app6891/85/Creatividad-en-la-visualizacion-de-contenidos-en-SharePoint-con-JS-Link-y-Display-Templates-15-320.jpg)
Creatividad en la visualización de contenidos en SharePoint con JS Link y Display Templates
- 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?
- 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
- 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,…
- 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?
- 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?
- 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
Notas del editor
- #2: Template may not be modified Twitter hashtag: #spsbe for all sessions
- #3: Use this as the first slide in your slide deck
- #14: Display templates in SharePoint Server 2013 are templates used in Web Parts that use search technology (Search Web Parts) to show the results of a query made to the search index. Display templates control which managed properties are shown in the search results, and how they appear in the Web Part. Each display template is made of two files: an HTML version of the display template that you can edit in your HTML editor, and a .js file that SharePoint uses Display templates are HTML and JavaScript rather than XSL Display templates are configured for the Site and Site Collection rather than for a Web part Display templates are applied with rules and logic Display templates are applied to individual result items, not the entire result set Display Templates are used for Results of all kinds, search results, content by search results, and refiners …and the list goes on
- #16: http://techmikael.blogspot.be/2015/04/how-to-run-code-after-all-cswps-have.html
- #19: http://www.learningsharepoint.com/2013/04/13/sharepoint-2013-js-link-tutorial/ 1. JS link is a new SPField Type property that not only lets you Control the Rendering of a Field or Control in a List, but also Rendering of a List Item,Content type,Form,View and a List view web part Instance. 2. Rendering of Fields can be Controlled in NewForm.aspx, DisplayForm.aspx and EditForm.aspx forms. 3. JS Link Override will not work if you are using the Custom List Form (i.e. it is edited in SharePoint Designer). 4. JavaScript Display Template Content Type provides some special Site Columns like Target Control Type, Standalone,Target Scope and Target List Template ID that helps users to specify JS file metadata.
- #21: JSLink files have the ability to quickly and easily change how a list views and forms are rendered. More specifically how the fields in that list should be displayed. I wrote the following code samples to be easy to understand and to achieve learning purposes.