SharePoint 2010 y ECMAScript

Una de las novedades que incoporó la versión 2010 de SharePoint a nivel de desarrollo es el modelo de objetos de cliente. Hasta ahora, si queríamos interactuar con elementos de nuestro servidor de manera remota la única opción que teníamos era acceder a los servicios web que éste proporcionaba. Ahora, además de esta opción tenemos otras cuatro alternativas:

• Modelo de objetos de cliente .NET
• Modelo de objetos de cliente Silverlight
• Modelo de objetos de cliente ECMAScript
• Servicios REST

Cada una de estas alternativas nos proporciona unas ventajas concretas en función de lo que necesitemos desarrollar. En este artículo os quiero hablar, con un ejemplo concreto, de una de estas cuatro alternativas: ECMAScript. Antes de entrar en materia, algunas consideraciones. Lo que vais a ver a continuación es, mayormente, código javascript y, en algunas ocasiones, puede provocar reacciones contrarias a la hora de utilizarlo. Como todo, tiene sus ventajas y sus inconvenientes, pero el hecho que Microsoft haya incluído esta posibilidad en esta versión de SharePoint hace que, cuando menos, tenga que ser considerada como una de las opciones que tenemos a la hora de desarrollar. Si os planteáis utilizar este método para un desarrollo, pensad primero en las características de vuestro escenario y valorad si os conviene utilizarlo. Para mí, el uso de ECMAScript ofrece una serie de ventajas respecto al desarrollo convencional. La principal de esas ventajas es el despliegue de las funcionalidades. Lo único que necesitamos es escribir código HTML que podría incluso incluirse en un elemento web editor de contenidos. Si pensamos, sobretodo, en escenarios donde el despligue de elementos en el servidor es complejo esta posibilidad se hace especialmente interesante.

Vayamos con el ejemplo: imaginad que queremos mostrar los elementos de una lista en una página de SharePoint y, a su vez, permitir que los usuarios añadan nuevos elementos a dicha lista y que no se produzcan refrescos innecesarios de la página. Para realizar este ejemplo necesitaremos crear un sitio con una lista que llamaremos Actividades. Además, en alguna página del sitio como, por ejemplo, la página de inicio, incluiremos un elemento web consulta de contenido, editaremos su contenido y escribiremos, por ejemplo, el siguiente código HTML.

   1: <input type="text" class="new-activity-textbox" />

   2: <input type="button" class="new-activity-button" value="enviar" />

   3:  

   4: <ul class="activities">

   5:  

   6: </ul>

Ahora tenemos que incluir la interactividad necesaria para que, cuando el usuario pulse el botón del ejemplo, se cree un nuevo elemento en la lista Actividades con el texto introducido por el usuario. Para hacer esto se os pueden ocurrir muchas maneras y, en este caso, yo he optado por utilizar JQuery (tened en cuenta que deberéis incluir la referencia al js de JQuery en vuestra página maestra o en vuestra página de aplicación). Editamos el código anterior e incluimos esto al inicio.

   1: <script language="ecmascript" type="text/ecmascript">
   1:  
   2:     $(document).ready(function {
   3:         $('input.new-activity-textbox').click(function {
   4:             var text = $(this).prev().value;
   5:             CreateElement(text);
   6:         });
   7:     });
   8:  
   9:     function CreateElement(text) {
  10:     }
</script>

Hasta aquí sólo hemos visto HTML y JQuery, nada de SharePoint. Evidentemente nos falta una parte del código que es aquella que tiene que permitir crear un elemento en una lista. Editamos el código anterior y, cambiamos la función CreateElement por lo siguiente:

   1: function CreateElement(text) {

   2:     context = new SP.ClientContext.get_current();

   3:     web = context.get_web();

   4:     var list = web.get_lists().getByTitle("Activity");

   5:     var itemCreateInfo = new SP.ListItemCreationInformation(); 

   6:     listItem = list.addItem(itemCreateInfo); 

   7:     listItem.set_item('Title', text); 

   8:     listItem.update(); 

   9:  

  10:     context.load(listItem); 

  11:     context.load(list); 

  12:  

  13:     context.executeQueryAsync(CreateElementSuccess, QueryFailure); 

  14: }

Si estáis familiarizados con el desarrollo sobre SharePoint, veréis que hay bastantes similitudes entre el modelo de objetos de cliente y el modelo de objetos de servidor. Básicamente se obtiene el contexto, de ahí se extrae la referencia al sitio, se consulta una lista y, finalmente, se añade un nuevo elemento a dicha lista. Las diferencias vienen al final, ya que usando el modelo de objetos de cliente la llamada se hace de manera asíncrona. Para nuestra fortuna, podemos indicar qué método delegado será invocado en el momento en que la llamada devuelva algún resultado. En nuestro caso, llegado el momento tendríamos que volver a consultar los elementos de la lista y modificar el código HTML de la página sin hacer ningún refresco. Eso lo conseguimos con el siguiente código:

   1: function CreateElementSuccess(sender, args) {

   2:     var list = web.get_lists().getByTitle('Activity');

   3:  

   4:     var query = '<View>'+

   5:                     '<Query>'+

   6:                         '<OrderBy>'+

   7:                             '<FieldRef Name="Created" Ascending="False"/>'+

   8:                         '</OrderBy>'+

   9:                     '</Query>'+

  10:                  '</View>';

  11:              

  12:     var camlQuery = new SP.CamlQuery();

  13:     camlQuery.set_viewXml(query);

  14:  

  15:     activitiesCollection = list.getItems(camlQuery);

  16:     context.load(activitiesCollection , 'Include(Title)');

  17:     context.executeQueryAsync(GetActivitiesSuccess, QueryFailure);

  18: }

  19:  

  20: function GetActivitiesSuccess(sender, args) {

  21:     var listItemEnumerator = activitiesCollection.getEnumerator();

  22:  

  23:     $('ul.activities').children().remove();

  24:  

  25:     while (listItemEnumerator.moveNext()) {

  26:         var oListItem = listItemEnumerator.get_current();

  27:         $('ul.group-activity-container').append("<li>" + oListItem.get_item('Title') + "</li>");

  28:     }

  29: }

  30:  

  31: function FailureCallback(sender, args) {

  32:     alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());  

  33: }

En resumen, esto ha sido sólo un ejemplo de qué tipo de cosas podemos hacer con ECMAScript. Si tenéis interés en que amplie algún punto concreto no dudéis en añadir un comentario a este artículo.