Sharepoint

Personalización de formularios con JSLink: SP2013 – SP2016 – SPOnline

Es una herramienta adicional para personalizar los campos que se muestran en un formulario de SharePoint

18/03/2017
Personalización de formularios con JSLink: SP2013 – SP2016 – SPOnline

¿Qué es JSLink?

Es una herramienta adicional para personalizar los campos que se muestran en un formulario de SharePoint y que llegó con la versión on-premise de 2013. En realidad, es un fichero escrito en JavaScript, y por lo tanto se puede desplegar en todas las vistas clásicas de cualquier versión a partir de la 2013, incluyendo SharePoint Online.

Esto ya podía hacerlo, ¿qué ventajas me ofrece frente a una personalización clásica?

Si recordamos los diferentes modelos de desarrollo que teníamos antiguamente, podíamos personalizar los formularios de diferentes formas, las más habituales eran:

  • Desde el propio designer, podíamos crear los formularios de alta/edición/listado y modificar la presentación o añadir lógica con JavaScript puro. El principal problema que nos suponía esto era que si por ejemplo creábamos un campo nuevo en la lista éste no se veía reflejado en este nuevo formulario y teníamos que editarlo nuevamente para añadirlo. Además, implementar un desarrollo de integración continua no era sencillo y replicar la información entre entornos suponía hacer el mismo trabajo varias veces.
  • Con Infopath podíamos también crear formularios personalizados y agregar algo de lógica desde la propia herramienta, sin embargo, no permite un control total y Microsoft sacó su última versión en 2013 anunciando también que no seguiría ofreciendo nuevas versiones para esta tecnología.
  • También podíamos cambiar el diseño de listados y añadir lógica haciendo uso de XSLT a partir del WebParts de consultas de contenido o el WebPart de visor XML. Con esta tecnología podíamos combinar la personalización que nos ofrecía el propio WebPart, como trabajar con un rango de elementos, ordenar por varios campos o filtrar por un campo de la lista con XSLT. Gracias a esto podíamos conseguir una personalización a medida sin necesidad de ejecutar código de servidor, pero no ofrece tanta versatilidad como JavaScript, ya que ahora hay varios modelos para recuperar cualquier información del sitio en el lado cliente.

Poco a poco todas estas tecnologías se han dejado de lado y han ido evoluciones, siendo una de ellas JSLink.

A continuación se detallan los puntos fuertes de JSLink:

  • Permite modificar por completo el HTML de los campos que deseemos en una lista con Javascript.
  • Nos permite elegir sobre qué ámbito deseamos que se ejecute, bien sobre una vista en particular o bien sobre un campo.
  • Tenemos diferentes herramientas para implementarlo, tanto por código como desde la interfaz de usuario.
  • Nos permite implementar una integración continua, siendo posible automatizar los despliegues para cualquier colección de sitios.
  • Podemos aplicar un control de código fuente y ver los cambios entre versiones.

Limitaciones de la tecnología:

  • Permite recuperar la información de los campos que están en la vista. Es decir, no podríamos hacer uso de campos ocultos u otros que no estuvieran presentes, y para trabajar con ellos deberíamos elegir un modelo de desarrollo adicional: ‘JSOM’ o ‘API/REST’ y modificar el registro de una manera asíncrona.
  • Si fuera necesario consultar listas para trabajar con información adicional, tenemos que tener presente que nuestro código se ejecuta una vez por cada campo que hemos elegido. Es decir, si tuviésemos muchos campos asociados con JSLink y un listado extenso, tendríamos que barajar la posibilidad de utilizar un patrón Singleton con las listas maestras que necesitáramos para limitar el número de veces que se abre el contexto de SharePoint.

Código de ejemplo

Suponiendo que queremos cambiar la visualización de una lista, para que en función del campo ‘estado’ aparezca un color u otro, siendo los campos:

  • En espera: Amarillo
  • Aprobado: Verde
  • Rechazado: Rojo

Y la lista inicial:
jslink example

Y el resultado final con JSLink:
jslink example

Primero deberemos crear un fichero JavaScript con el IDE que prefiramos, en nuestro caso:

  • A partir de la función RegistrarJSLinkViewTemplate indicamos
    • Qué campos queremos que ejecuten el código JavaScript
    • En qué vista se deben ejecutar. En nuestro caso, ‘View’ porque es en el listado
  • A partir de la función cambiarColor(ctx), especificamos la lógica que debe tener nuestro componente. En este caso, en función del estado deberá cargar una imagen u otra:

jslink example

La variable ctx contiene el contexto de SharePoint, y por lo tanto se puede utilizar para recuperar mucha información de la lista, del registro -cualquier campo visible-, del sitio…

Podemos inspeccionar esta variable con más detenimiento desde una consola de depuración de nuestro navegador:

jslink example

Cómo asociar un fichero JSLink desde la interfaz de usuario

Para asociar un fichero JSLink, tendremos que ir a la vista de la lista en la que deseemos añadirlo y editar la página.

Para ello tendremos que acceder a ‘Editar página’:

jslink example

Y posteriormente editar el WebPart de la lista. El campo para referenciar el fichero JSLink es el último. Podemos utilizar también los tokkens que nos ofrece el producto SharePoint, como, por ejemplo, ‘~sitecollection’ para que la ruta a nuestro sitio sea resuelta automáticamente por SharePoint. De esta forma no sería necesario cambiar la ruta si trabajamos con varias colecciones de sitio:

jslink example

Cómo asociar un fichero JSLink con programación a través del modelo de desarrollo CSOM y PnP

Como sabemos, tenemos diferentes modelos de desarrollo para modificar nuestro SharePoint. En este caso nos centraremos en CSOM, este framework salió a partir de la versión 2010 de SharePoint on-premise, es muy útil porque permite realizar peticiones con código de servidor a SharePoint sin necesidad de tener una versión de SharePoint instalada, además también se puede utilizar con cualquier plantilla que ofrece Visual Studio.

Podemos acceder tanto a entornos on-premise como Online y tiene una capa por encima -o librería- que se actualiza con todos los cambios de la plataforma y modelos de desarrollo nuevos: PnP.

PnP aporta un gran número de extensiones y clases que facilitan el desarrollo con SharePoint, encapsulado las funcionalidades más comunes que se pueden realizar contra un entorno de SharePoint.

Podemos descargar la referencia a través del gestor de paquetes nugget, para ello deberemos descargar la versión en función del entorno al que queramos acceder:

jslink example

Para este caso, nos vamos a centrar en dos extensiones que proporciona la librería de PnP para el despliegue automático de JSLink. Como podemos ver conseguimos asociarlo tanto a una página (alta, edición, listado) como a un campo:

jslink example

Un código de ejemplo podría ser el siguiente:

jslink example

Como podemos ver, es bastante sencillo, solo hay que seguir los siguientes pasos:

  • Indicamos a qué colección de sitios de qué entorno nos queremos conectar.
  • Nos autenticamos.
  • Recuperamos la lista en la que deseamos asociar el JSLink.
  • Utilizamos una función de PnP para asociar el JSLink -se pueden utilizar los tokkens como en la interfaz de usuario.
  • Mandamos la petición al servidor.

Destacamos

¿BREP ó no BREP, esa es la cuestión?

¿BREP ó no BREP, esa es la cuestión?

Como todos los años, a algunos de vosotros os vuelve a la cabeza la siguiente pregunta ¿BREP ó no BREP, esa es la cuestión?
Zimaltec colabora en el programa AREX Digital

Zimaltec colabora en el programa AREX Digital

Es un programa que ayuda a implementar acciones digitales específicas y adaptadas a los recursos y objetivos de promoción exterior en nuestra región, mediante análisis, diagnóstico y/o diseño de la estrategia de marketing online para acceder al mercado internacional objetivo.