ECMAScript Client Object Model SharePoint 2010

Después de un pequeño parón en mi blog, debido a los Sanfermines, y ya para terminar con la serie de artículos relacionados con el modelo de objetos cliente de SharePoint 2010, hoy vamos a ver el último tipo de cliente con el que podemos trabajar y que se trata de ECMAScript.

Para ello abrimos Visual Studio 2010, y creamos un nuevo proyecto de tipo New Project > Sharepoint2010 > VisualWebPart, indicando el sitio sobre el que vamos a implementar nuestra aplicación http://sharepoint2010:200 y el alcance de la misma, que en este caso será a nivel de granja de servidores. Es necesario tener en cuenta que para que podamos ejecutar nuestra aplicación correctamente a este nivel, debemos contar con permisos de administrador.

image image

Esta implementación del cliente se puede realizar de dos formas: añadiendo nuestro código a un archivo y llamándolo desde nuestro control .ascx, o integrando el propio código dentro del control de usuario. En nuestro caso vamos a hacer la implementación más sencilla, y el código se lanzara al acceder a la página en la que insertemos nuestra web part ya que lo que pretendemos es ver el funcionamiento del mismo. Pero esta bien saber que esta misma aplicación se puede implementar de forma más “elegante” si por ejemplo, lanzamos nuestro código Javascript desde un botón.

A continuación es necesario añadir el siguiente código dentro del archivo VisualWebPart1UserControl.ascx:

  1. <SharePoint:ScriptLink ID="ScriptLink" Name="SP.js" runat="server" OnDemand="true" Localizable="false"></SharePoint:ScriptLink>

Esto nos permite trabajar con el modelo de objeto JavaScript que viene definido en el archivo sp.js. Este archivo al igual que el encargado de la lógica de transporte necesaria para procesar peticiones al servidor (spruntime.js) se encuentran dentro de la carpeta LAYOUTS dentro de la ruta de definición de los sitios SharePoint 2010.

Una vez establecida la referencia al archivo de definición del modelo de objeto, añadimos el código de nuestra función que en este caso se encargará de crear un sitio, como vimos en el cliente .NET, con las siguientes características:

  1. <script type="text/javascript">
  2.         var clientContext = null;
  3.         var web = null;
  4.         ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js");
  5.         function Initialize() {
  6.             clientContext = new SP.ClientContext.get_current();
  7.             web = clientContext.get_web();
  8.             var webCreateInfo = new SP.WebCreationInformation();
  9.             webCreateInfo.set_description("Este es mi blog personal");
  10.             webCreateInfo.set_title("Blog personal de Goretti");
  11.             webCreateInfo.set_url("BlogPersonal");
  12.             webCreateInfo.set_useSamePermissionsAsParentSite(true);
  13.             webCreateInfo.set_webTemplate("BLOG#0");
  14.  
  15.             this.oNewWebsite = this.web.get_webs().add(webCreateInfo);
  16.  
  17.             clientContext.load(this.oNewWebsite, 'ServerRelativeUrl', 'Created');
  18.  
  19.             clientContext.executeQueryAsync(Function.createDelegate(this, this.onCreateWebSuccess),
  20.  
  21. Function.createDelegate(this, this.onQueryFailed));
  22.         }
  23.         function onCreateWebSuccess(sender, args) {
  24.             alert("Web site url : " + this.oNewWebsite.get_serverRelativeUrl());
  25.         }
  26.  
  27.         function onQueryFailed(sender, args) {
  28.             alert('request failed ' + args.get_message() + '\n' + args.get_stackTrace());
  29.         }
  30.     </script>​

Como podemos ver, la estructura de implementación del modelo es similar a la que utilizamos en cualquiera de los otros dos clientes.

1. Definimos el contexto de nuestro cliente

2. Definimos que es lo queremos cargar cuando se ejecute la query (clientContext.Load)

3. Ejecutamos la query (clientContext.executeQueryAsunc), que se encarga de mirar que es lo que esta definido en el método de carga  y en función de ello establecer la comunicación entre cliente y servidor para obtener los objetos con los que queremos trabajar

*Además, en este cliente en particular, hay que tener en cuenta que es necesario lanzar el método ExecuteOrDelayUntilScriptLoaded(Initialize, "sp.js"). Este se encarga de que el código JavaScript se ejecute después de que finalice la carga del código sp.js. Si no es así nuestra función no se ejecutará correctamente

Por último una vez compilada nuestra aplicación (F5), añadimos la web part implementada en el sitio donde queremos que esta se ejecute.

image 

De forma que en el momento que accedamos a la página que contenga dicha web part se ejecute nuestro código. Si el sitio con los parámetros que nosotros indicamos ya esta creado, nos salta la siguiente alerta, tal y como lo hemos definido:

image

Sin embargo, si no esta creado, dicho sitio se creará y nos aparecerá la siguiente alerta indicándonoslo, de esta forma ya podremos acceder a nuestro blog:

image image

Esta es sólo una de las muchas funciones que se pueden implementar desde un cliente JavaScript. Aquí os dejo otras funciones relacionadas como: borrar un sitio, borrar una lista, actualizar elemento de una lista…and ¡¡so on!!, para que probeis

Como ya hemos comentado antes esta aplicación se podría implementar de manera más “elegante”, pero esa parte la dejamos para más adelante. Así, con este artículo termino la serie de posts relacionados con el Modelo de Objeto Cliente en SP2010, y vuelvo al mundo ASP.NET MVC, que últimamente lo tengo un poco abandonado. ¡¡Será el verano!!

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *