En esta entrada vamos a mostrar un ejemplo de cómo inyectar código JavaScript para modificar la forma en la que se renderizan los elementos de una lista de SharePoint Online. Además ese JavaScript va a generarse a partir de un fichero TypeScript.
¿Por qué JSLink?
Con SharePoint 2013 se ha extendido la clase SPField, con la adición de una propiedad llamada JSLink, que permite indicar un fichero JavaScript que va a ejecutarse en el momento de renderizar los elementos de una lista. Usar esta solución es una buena práctica para poder realizar este tipo de modificaciones, ya que permite pintar los elementos de la forma deseada sin utilizar código servidor, sin necesitar de una solución WSP, y totalmente re-utilizable en un entorno tanto Online como Servidor.
El mecanismo de JSLink nos va a permitir modificar las siguientes vistas:
- View
- NewForm
- EditForm
- DisplayForm
La implementación
Para este sencillo ejemplo, necesitamos tener el
script que vamos a crear subido a una biblioteca de SharePoint, en este ejemplo está en "Style Library".
Por otro lado, hemos creado una
custom list muy simple, sólo con el campo título, y hemos editado cada página de cada vista que vamos a modificar (edición, visualización, creación y detalle), para
modificar el webpart que muestra los elementos e insertar la ruta del script en su propiedad JSLink, tal y como muestra la siguiente imagen.
De esta forma, le estamos inyectando el código JS cuando se van a pintar los elementos de la lista. Ahora sólo queda insertar el código, que en este caso aprovechamos para probar
TypeScript. Como se puede ver, se trata de definir un contexto, en el que se carga un
Template donde se define por cada Field Name las vistas que vamos a
sobreescribir de ese Field, en este caso las cuatro. Además, también vamos a añadir una definición de qué queremos insertar en el
Header,
Footer y como elemento
Item de la vista
View. El resultado para las distintas vistas con el código que vamos a escribir sería:
View
NewForm
EditForm
DisplayForm
Y el código TypeScript es el siguiente:
Es un ejemplo muy sencillo, pero este mecanismo ofrece grandes posibilidades de pintar elementos de listas sin necesidad de código, únicamente con JavaScript. Si a esto le añadimos
CSS personalizado, las posibilidades son muy amplias.
Enlaces de interés
Aquí dejo unos enlaces con ejemplos de lo que se puede realizar con JSLink:
http://www.sharepointnutsandbolts.com/2013/01/using-jslink-to-change-ui-of-sharepoint_20.html
https://code.msdn.microsoft.com/office/Client-side-rendering-JS-2ed3538a
http://www.lestersconyers.com/custom-field-rendering-with-jslink/
