SharePoint 2010 y el modelo de objetos del lado del cliente con JavaScript

En el momento que SharePoint 2010 vio la luz varias cosas impactaron a la comunidad de desarrolladores como por ejemplo: soluciones sandbox, modelo de objetos administrado del lado del cliente, soporte directo Silverlight y AJAX, pero quizá de lo más interesante, fue la parte del modelo de objetos del cliente haciendo uso de JQuery y JavaScript. Poder consumir servicios REST y mezclar lógica y funcionalidad del lado del cliente sin tener que tocar nada en el servidor, es quizá uno de los temas que nos ha permitido venir construyendo funcionalidades de interés para nuestros clientes, sin intervención directa en la granja de servidores.
A continuación vamos a ver la utilidad de este modelo de objetos y cómo podemos sacar provecho en el momento de cumplir los requerimientos de nuestros clientes.
Consumiendo JQuery de terceros: Supongamos que nuestro cliente nos ha solicitado un componente dentro de su Intranet que despliegue anuncios almacenados en una lista de Anuncios de SharePoint, de una manera más llamativa de lo que la lista hace por defecto. De inmediato podemos pensar en hacer algún desarrollo .NET, en Flash, Silverlight, o cualquier cosa a la que ya estamos acostumbrados y que en cierto modo puede ser fácil en el momento de realizar la animación del contenido. Pero para nuestra fortuna, SharePoint 2010 ofrece soporte para servicios REST, los cuales se pueden consumir desde JavaScript sin mayor complicación, y combinar esto con alguna librería JQuery que haga la tarea de la animación por nosotros. En nuestro caso dicha librería es la que se encuentra en la siguiente dirección: liScroll
Antes de continuar explicando cómo usar JQuery en SharePoint, vale la pena rescatar algunos puntos importantes:
  • Hemos mencionado que podría desarrollarse algo con .NET, por ejemplo una WebPart, pero esto conllevaría a tener que pensar en despliegues del lado del servidor, o si es SandBox en tener en cuenta que el administrador tenga activada dicha característica en la granja, y evidentemente el desarrollo conllevaría un poco más de tiempo.
  • En el caso de usar Flash, debemos olvidarnos por completo de que nuestra Intranet sea visible correctamente en dispositivos con sistema IOs. Además de pensar el enlace de la información de la lista de SharePoint con Flash, lo cual ya es una tarea que conlleva mayor tiempo, puede hacerse con un resultado XML de la lista de Anuncios, pero no es algo tan simple de hacer.
  • En el caso de Silverlight, habría mayor ventaja sobre Flash en términos de desarrollo, pero nuevamente sigue siendo algo del lado del servidor que conlleva programación .NET, y que al igual que Flash, obliga a nuestros usuarios a instalar el PlugIn cliente para que estos componentes funcionen correctamente.
Por tales motivos, JQuery se ha convertido en una opción magnifica, sobre todo por el tema cross browser.
  • Teniendo la librería JQuery descargada en nuestra máquina debemos subirla a alguna ubicación estándar dentro del sitio de SharePoint, la cual puede ser la biblioteca SiteAssets, donde típicamente acostumbramos a crear las carpetas estándar CSS, JS e Images. En el caso de la librería JQuery del sitio liScroll procedemos a colocarla en la carpeta JS. Esto podemos hacerlo directamente desde el sitio de SharePoint o haciendo uso de SharePoint Designer 2010.
  • Al igual que hemos cargado la librería JQuery que nos ofrecen en la página, también tenemos que descargar y subir la librería base de JQuery que se encuentra en JQuery.com
Deberíamos tener algo similar a lo siguiente:
jquery
En nuestro caso hemos renombrado las librerías para mayor facilidad, lo cual no tiene ningún inconveniente.
  • Si observaron con detenimiento el proveedor de la librería li-scroller también pide descargar un archivo CSS, el cual deberíamos ubicar dentro de la carpeta CSS de la ubicación SiteAssets.
Hasta este punto tenemos ordenados ya los archivos necesarios para poder utilizar el SCROLLER dentro de SharePoint, pero aun faltan algunos pasos para su correcto funcionamiento.
  • Se preguntarán cómo vinculamos los archivos que ya tenemos dentro del sitio de SharePoint. En el caso de los dos archivos .JS y el archivo .CSS, la mejor práctica es referenciarlos en la página maestra del sitio de SharePoint, específicamente en el archivo V4.master. La mejor manera de hacer esto es editar en modo avanzado el archivo en SharePoint Designer 2010. Estos vínculos preferiblemente deben agregarse antes de la etiqueta de cierre </HEAD>
 <link rel="stylesheet" href="/siteassets/css/scroller.css" type="text/css" />  
 <script src="/siteassets/JS/jquery.js" type="text/javascript"></script>  
 <script src="/siteassets/JS/scroller.js" type="text/javascript"></script>  
JSLinks
  • Luego de haber referenciado los archivos en la página maestra podemos proceder a configurar en una página del Sitio la WebPart que desplegará la información que se debe obtener desde la lista de Anuncios SharePoint.
  • Asumiremos que tenemos una lista de tipo Anuncios en nuestro sitio de SharePoint llamada simplemente Anuncios. Y que ya tenemos una página de WebParts agregada en el sitio, por ejemplo Prueba.aspx, en la cual debemos agregar una WebPart de Editor de Contenido.
ContentEditorWP
  • Es momento de editar la WebPart y en la ventana HTML proceder a escribir el siguiente código JS que se encargará de conectarse al servicio REST, leer información de la lista de Anuncios y finalmente invocar a la librería JQuery que se encarga de generar la animación del texto.
 <script type="text/javascript">  
 $(document).ready(function() {        
      $.getJSON("/_vti_bin/ListData.svc/Anuncios",function(data){  
           var $ss = $('ul#ticker01');  
           $ss.empty();       
           $.each(data.d.results, function(i,result){  
                $ss.append("<li><a href='/lists/Anuncios/dispform.aspx?ID="+ result.Identificador+"' onclick='GoToLink(this);return false;' >" + result.Título + "</a></li>");   
           });  
      });  
      $(function(){  
           $("ul#ticker01").liScroll();  
      });  
 });    
 </script>  
 <ul id="ticker01"></ul>  

  • Del código anterior se puede apreciar cómo a través de REST se invoca la lista de anuncios a través de $.getJSON("/_vti_bin/ListData.svc/Anuncios",function(data)
  • Seguidamente se itera a través de los resultados obtenidos de la lista de Anuncios y se arma las etiquetas <LI> invocando la función APPEND de JQuery utilizando el objeto $ss que representa la etiqueta <UL> definida también en el código que sirve de contenedor para la información obtenida.
  • Finalmente la librería JQuery que hemos descargado lee los contenidos LI de la etiqueta UL a través del siguiente código
     $(function(){  
          $("ul#ticker01").liScroll();  
     });  
    
El resultado final será la información de la lista Anuncios desplegada en la WebPart de Editor de Contenido y con movimiento de los textos gracias a la librería JQuery:

ContentEditorWPScroller

No hay comentarios:

Publicar un comentario en la entrada