Creatividad en la visualización de
contenidos en SharePoint con JS Link
y Display Templates
September 26th, 2015
Barcelona
Thanks to our Sponsors
http://geeks.ms/blogs/santypr
@saintwukong
http://blogs.encamina.com/en-tu-casa-o-en-la-mia/
MVP Windows Platform Developm...
■ Branding
■ Creación de experiencias
■ Display Templates
■ JSLink
Agenda
Branding
■ Implementación de acciones para homogeneizar la
identidad visual de los elementos relacionados con
una “entidad”
■ Diseñ...
Ejemplo de branding
■ Definir arquitectura de la información
■ Definir Wireframes y Flujo de Navegación
■ Diseño gráfico acorde con la identid...
Evolucionar
o morir
En SharePoint 2010 podíamos aplicar Branding y ser
creativos a la hora de mostrar un diseño atractivo del
contenido median...
Se introducen nuevos conceptos para el diseño de
interfaces adaptados a las nuevas tendencias para
conseguir un mayor cont...
Display
Templates
■ Plantillas para mostrar cualquier elemento
relacionado con búsquedas (elementos, marco,
refinadores, …)
■ Se componen de...
Estructura y asignación
Ejecutando código tras el renderizado
AddPostRenderCallback(ctx, function(){
// loop over all queries on the page
var allR...
JSLink
■ Permite controlar el renderizado de los elementos
(campos, web parts, formularios, …)
■ Se asigna mediante la propiedad ...
■http://code.msdn.microsoft.com/office/Client-side-
rendering-JS-2ed3538a
■https://msdn.microsoft.com/es-
es/library/offic...
■ Tiene aplicación sobre SPFields
■ También se puede aplicar al comportamiento de
formularios (Véase formulario tabulado)
...
Q & A
http://geeks.ms/blogs/santypr
@saintwukong
http://blogs.encamina.com/en-tu-casa-o-en-la-mia/
MVP Windows Platform Developm...
Creatividad en la visualización de contenidos en SharePoint con JS Link y Display Templates
Creatividad en la visualización de contenidos en SharePoint con JS Link y Display Templates
Creatividad en la visualización de contenidos en SharePoint con JS Link y Display Templates
Próxima SlideShare
Cargando en…5
×

Creatividad en la visualización de contenidos en SharePoint con JS Link y Display Templates

427 visualizaciones

Publicado el

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

Publicado en: Tecnología
0 comentarios
1 recomendación
Estadísticas
Notas
  • Sé el primero en comentar

Sin descargas
Visualizaciones
Visualizaciones totales
427
En SlideShare
0
De insertados
0
Número de insertados
6
Acciones
Compartido
0
Descargas
2
Comentarios
0
Recomendaciones
1
Insertados 0
No insertados

No hay notas en la diapositiva.
  • Template may not be modified
    Twitter hashtag: #spsbe for all sessions
  • Use this as the first slide in your slide deck
  • 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
  • http://techmikael.blogspot.be/2015/04/how-to-run-code-after-all-cswps-have.html
  • 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.
  • 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.
  • Creatividad en la visualización de contenidos en SharePoint con JS Link y Display Templates

    1. 1. Creatividad en la visualización de contenidos en SharePoint con JS Link y Display Templates September 26th, 2015 Barcelona
    2. 2. Thanks to our Sponsors
    3. 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. 4. ■ Branding ■ Creación de experiencias ■ Display Templates ■ JSLink Agenda
    5. 5. Branding
    6. 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. 7. Ejemplo de branding
    8. 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. 9. Evolucionar o morir
    10. 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. 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. 12. Display Templates
    13. 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. 14. Estructura y asignación
    15. 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!!!!"); } });
    16. 16. JSLink
    17. 17. ■ 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?
    18. 18. ■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
    19. 19. ■ Tiene aplicación sobre SPFields ■ También se puede aplicar al comportamiento de formularios (Véase formulario tabulado) ¿A qué elementos se aplica?
    20. 20. Q & A
    21. 21. 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

    ×