Una de las grandes novedades que ha tra\u00eddo la versi\u00f3n 2013 de SharePoint, es la introducci\u00f3n de JavaScript como un elemento de casi obligado conocimiento para los desarrolladores de SharePoint, de la misma forma que C# o PowerShell. Esta introducci\u00f3n se puede observar en diversos artefactos \u00about-of-the-box\u00bb, 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\u00e9 es JSLink y c\u00f3mo lo podemos configurar bien desde el modelo de objetos servidor o con PowerShell.<\/p>\n
<\/p>\n
\u00bfQu\u00e9 es JSLink?<\/strong><\/p>\n 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. \u00a0De 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\u00edamos\u00a0es, mediante SharePoint Designer, personalizar estos formularios. Una tarea ardua y pesada para el que lo tuviera que hacer.<\/p>\n JSLink viene a substituir al anterior lenguaje, el que se utilizaba en las versiones anteriores de SharePoint, a XSLT. \u00a0JSLink tiene multitud de aspectos o caracter\u00edsticas que lo sit\u00faan por delante de XSLT. Algunos de estos son: aspectos de rendimiento, mayor posibilidad de personalizaci\u00f3n de los datos, mayor n\u00famero 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.<\/p>\n Ahora bien, tenemos que saber cu\u00e1l es el contexto en el que vamos a utilizar JSLink ya que \u00e9ste no sustituye el uso de\u00a0librer\u00edas JavaScript de Templates como\u00a0Mustache, RactiveJS, o nuestra librer\u00eda preferida. JSLink nos facilita la personalizaci\u00f3n de formularios, pero para dotar a \u00e9stos de mayor funcionalidad, la mejor opci\u00f3n es hacer un desarrollo personalizado de los mismos.<\/p>\n Si quer\u00e9is saber m\u00e1s sobre c\u00f3mo utilizar JSLink, os recomendamos\u00a0leer este art\u00edculo<\/a> de Alberto D\u00edaz<\/a> en CompartiMOSS<\/a>\u00a0o bien este otro\u00a0art\u00edculo de Tobias\u00a0Zimmergren<\/a> (MVP de SharePoint).<\/p>\n Configurar JSLINK mediante programaci\u00f3n<\/strong> Mediante c\u00f3digo servidor<\/strong> Con ese c\u00f3digo que se nos da, a pesar de que no se produce ning\u00fan error, NO funciona y cuando vamos\u00a0consultar el formulario no tiene configurada esta propiedad. Para solventar este inconveniente, hemos implementado esta soluci\u00f3n:<\/p>\n Como pod\u00e9is\u00a0observar, lo que hemos realizado para asignar el JSLink es acceder a la p\u00e1gina d\u00f3nde est\u00e1 el formulario, ver\u00a0si tiene un WebPart y, en caso afirmativo, asignarle\u00a0la ruta de nuestros ficheros JavaScript a la propiedad JSLink. <\/p>\n Mediante PowerShell<\/strong><\/p>\n Otras opciones<\/strong> Como hemos comentado en anteriores entradas, SharePoint va evolucionando y se convierte, cada vez m\u00e1s, en un producto que sigue los est\u00e1ndares Web. Por lo tanto, NO podemos quedarnos s\u00f3lo\u00a0con\u00a0aspectos v\u00e1lidos de anteriores versiones, no porque no lo podamos utilizarlos, sino por la necesidad de adaptarnos a la que puede ser\u00a0la siguiente versi\u00f3n de SharePoint (o SharePoint Online). Seguir utilizando elementos ant\u00edguos\/deprecated nos puede solucionar problemas de hoy, pero la verdad es que los aplaza para un futuro m\u00e1s o menos cercano. Por ello, te recomendamos que aprendas c\u00f3mo funciona JavaScript y, antes de lo que piensas, obtendr\u00e1s buenos resultados.<\/p>\n<\/span>","protected":false},"excerpt":{"rendered":" Una de las grandes novedades que ha tra\u00eddo la versi\u00f3n 2013 de SharePoint, es la introducci\u00f3n de JavaScript como un elemento de casi obligado conocimiento para los desarrolladores de SharePoint, de la misma forma que C# o PowerShell. Esta introducci\u00f3n … Continue reading
\nToda esta nueva funcionalidad est\u00e1 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\u00f3n de una forma muy sencilla.<\/p>\n
\nEn la poca documentaci\u00f3n que existe sobre JSLink se indica que debemos de realizarlo de esta forma:<\/p>\n\r\nSPWeb web = SPContext.Current.Web;\r\nSPList list = web.Lists.TryGetList("MyTasks");\r\nif (null != list)\r\n{\r\n SPForm newForm = list.Forms[PAGETYPE.PAGE_NEWFORM];\r\n if (null != newForm)\r\n {\r\n newForm.JSLink = "~\/mycustom.js";\r\n }\r\n}\r\n<\/pre>\n\r\n var list = web.Lists.TryGetList(listName); \r\n\r\nif (list != null)\r\n {\r\n var editForm = web.GetFile(list.DefaultEditFormUrl);\r\n var wpmEdit =\r\n editForm.GetLimitedWebPartManager(System.Web.UI.WebControls.WebParts.PersonalizationScope.Shared);\r\n if (wpmEdit.WebParts.Count == 1)\r\n {\r\n var wp = wpmEdit.WebParts[0] as ListFormWebPart;\r\n wp.JSLink =\r\n "~sitecollectionlayouts\/vitrall\/js\/jquery.min.js|~sitecollectionlayouts\/jslink\/documenteditform.js";\r\n wpmEdit.SaveChanges(wp);\r\n }\r\n\r\n<\/pre>\n
\nNota:<\/strong> A la hora de modificar este valor, debemos de tener claro que la p\u00e1gina del formulario no est\u00e9 siendo utilizada. De lo contrario, se producir\u00eda un error.<\/p>\n\r\n$web = Get-SPWeb http:\/\/demo\r\n $webPartPage = "\/Lists\/Sample%20Tasks\/AllItems.aspx"\r\n$file = $web.GetFile($webPartPage)\r\n$file.CheckOut()\r\n $webPartManager = $web.GetLimitedWebPartManager($webPartPage, [System.Web.UI.WebControls.WebParts.Pers\r\nonalizationScope]::Shared)\r\n $webpart = $webPartManager.WebParts[0]\r\n $webpart.JSLink = "~sitecollectionlayouts\/jslink\/documenteditform.js"\r\n $webPartManager.SaveChanges($webpart)\r\n $file.CheckIn("Actualizado JSLINK")\r\n<\/pre>\n
\nExisten dos formas m\u00e1s para poder configurar JSLINK. La primera de ellas es modificando los XML de configuraci\u00f3n de las listas de la forma que realiza Chris Obrien en este enlace<\/a>. 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).<\/p>\nResumen<\/h2>\n