Configurar JSLINK programáticamente

Una de las grandes novedades que ha traído la versión 2013 de SharePoint, es la introducción de JavaScript como un elemento de casi obligado conocimiento para los desarrolladores de SharePoint, de la misma forma que C# o PowerShell. Esta introducción se puede observar en diversos artefactos «out-of-the-box», como son el Content by Search o el JSLink. Estos dos artefactos lo que hacen es mejorar el renderizado en el lado del cliente. Y para poder realizar estas operaciones, hacen uso de JavaScript. En este post, vamos a ver qué es JSLink y cómo lo podemos configurar bien desde el modelo de objetos servidor o con PowerShell.

¿Qué es JSLink?

Es una propiedad que tienen las listas en las que se indican que fichero JavaScript se va a cargar una vez se muestra el formulario en el navegador.  De esta manera, JSLink facilita la forma en la que se puede extender el comportamiento de los formularios en SharePoint. En anteriores versiones, lo que hacíamos es, mediante SharePoint Designer, personalizar estos formularios. Una tarea ardua y pesada para el que lo tuviera que hacer.

JSLink viene a substituir al anterior lenguaje, el que se utilizaba en las versiones anteriores de SharePoint, a XSLT.  JSLink tiene multitud de aspectos o características que lo sitúan por delante de XSLT. Algunos de estos son: aspectos de rendimiento, mayor posibilidad de personalización de los datos, mayor número de personas que conocen JavaScript respecto a XSLT, etc. Por estas razones (y algunas otras), debemos plantearnos dejar a un lado XSLT y apostar por JSLink.

Ahora bien, tenemos que saber cuál es el contexto en el que vamos a utilizar JSLink ya que éste no sustituye el uso de librerías JavaScript de Templates como Mustache, RactiveJS, o nuestra librería preferida. JSLink nos facilita la personalización de formularios, pero para dotar a éstos de mayor funcionalidad, la mejor opción es hacer un desarrollo personalizado de los mismos.

Si queréis saber más sobre cómo utilizar JSLink, os recomendamos leer este artículo de Alberto Díaz en CompartiMOSS o bien este otro artículo de Tobias Zimmergren (MVP de SharePoint).

Configurar JSLINK mediante programación
Toda esta nueva funcionalidad está muy bien, pero lo cierto es que donde realmente ha dado un paso adelante JSLink es en la forma en la que podemos configurarlo desde nuestros despliegues e incluirlo dentro del ciclo de vida de nuestra aplicación de una forma muy sencilla.

Mediante código servidor
En la poca documentación que existe sobre JSLink se indica que debemos de realizarlo de esta forma:

SPWeb web = SPContext.Current.Web;
SPList list = web.Lists.TryGetList("MyTasks");
if (null != list)
{
  SPForm newForm = list.Forms[PAGETYPE.PAGE_NEWFORM];
  if (null != newForm)
  {
    newForm.JSLink = "~/mycustom.js";
  }
}

Con ese código que se nos da, a pesar de que no se produce ningún error, NO funciona y cuando vamos consultar el formulario no tiene configurada esta propiedad. Para solventar este inconveniente, hemos implementado esta solución:

 var list = web.Lists.TryGetList(listName);                

if (list != null)
 {
  var editForm = web.GetFile(list.DefaultEditFormUrl);
  var wpmEdit =
                        editForm.GetLimitedWebPartManager(System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared);
     if (wpmEdit.WebParts.Count == 1)
     {
       var wp = wpmEdit.WebParts[0] as ListFormWebPart;
      wp.JSLink =
                            "~sitecollectionlayouts/vitrall/js/jquery.min.js|~sitecollectionlayouts/jslink/documenteditform.js";
                        wpmEdit.SaveChanges(wp);
                    }

Como podéis observar, lo que hemos realizado para asignar el JSLink es acceder a la página dónde está el formulario, ver si tiene un WebPart y, en caso afirmativo, asignarle la ruta de nuestros ficheros JavaScript a la propiedad JSLink.
Nota: A la hora de modificar este valor, debemos de tener claro que la página del formulario no esté siendo utilizada. De lo contrario, se produciría un error.

 

Mediante PowerShell

$web = Get-SPWeb http://demo
 $webPartPage = "/Lists/Sample%20Tasks/AllItems.aspx"
$file = $web.GetFile($webPartPage)
$file.CheckOut()
 $webPartManager = $web.GetLimitedWebPartManager($webPartPage, [System.Web.UI.WebControls.WebParts.Pers
onalizationScope]::Shared)
 $webpart = $webPartManager.WebParts[0]
 $webpart.JSLink = "~sitecollectionlayouts/jslink/documenteditform.js"
 $webPartManager.SaveChanges($webpart)
 $file.CheckIn("Actualizado JSLINK")

Otras opciones
Existen dos formas más para poder configurar JSLINK. La primera de ellas es modificando los XML de configuración de las listas de la forma que realiza Chris Obrien en este enlace. La segunda es haciendo uso del Modelo de Objetos cliente en JavaScript (este modo es muy similar a los anteriores ejemplos, pero os puede resultar bastante curioso).

Resumen

Como hemos comentado en anteriores entradas, SharePoint va evolucionando y se convierte, cada vez más, en un producto que sigue los estándares Web. Por lo tanto, NO podemos quedarnos sólo con aspectos válidos de anteriores versiones, no porque no lo podamos utilizarlos, sino por la necesidad de adaptarnos a la que puede ser la siguiente versión de SharePoint (o SharePoint Online). Seguir utilizando elementos antíguos/deprecated nos puede solucionar problemas de hoy, pero la verdad es que los aplaza para un futuro más o menos cercano. Por ello, te recomendamos que aprendas cómo funciona JavaScript y, antes de lo que piensas, obtendrás buenos resultados.