SharePoint 2010: Como usar el modelo de objetos ECMAScript en la Content Editot WebPart!

Como sabéis, SharePoint 2010 incorpora a nivel de desarrollo un modelo de objetos en cliente formado por tres variantes o sabores (ECMAScript, Silverlight y .NET) que facilita el trabajo con elementos de SharePoint de forma remota (siempre desde el nivel de Colección de sitios hacia abajo) sin tener que recurrir a los servicios web de la plataforma. Para más información sobre el modelo de objetos en cliente de SharePoint 2010, os remito a dos posts previos en torno a esta temática:

En el caso del modelo de objetos ECMAScript, se trata de acceder a elementos de sitios de SharePoint mediante código JavaScript. En este sentido, Una pregunta que me han hecho respecto a este modelo de objetos es si se puede usar sin tener que recurrir a Visual Studio. La respuesta es que si y las posibilidades son dos:

  • A través de la interfaz de usuario usando la Content Editor WebPart en la que se puede añadir contenido enriquecido o bien código HTML y por supuesto JavaScript.
  • A través de SharePoint Designer 2010.

En el caso de la Content Editor WebPart, los pasos para usar ECMA Script son:

  • Acceder a la barra de herramientas de la WebPart y pulsar sobre la opción HTML.
  • De esta forma, se abre una ventana modal en la que podemos pegar nuestro código HTML y nuestro código JavaScript.
image image
  • Para que funcione el modelo de objetos ECMAScript en la Content Editor WebPart, lo que tenemos que hacer es lo siguiente:
    • Dentro del bloque delimitado por <script> añadimos una llamada a ExecuteOrDelayUntilScriptLoaded() que se encarga por una parte de llamar a la función JavaScript que estamos añadiendo en la Content Editor WebPart y por otro lado carga el modelo de objetos ECMAScript definido en el archivo sp.js existente en el servidor.
    • A continuación, defino una serie de variables globales que voy a usar en el código.
    • El siguiente paso es definir la función JavaScript concreta en la que:
      • Creamos una instancia del ClientContext para poder enviar peticiones al servidor mediante el modelo de objetos ECMAScript.
      • Definimos las operaciones a realizar mediante la llamada a los métodos correspondientes: get_web() y get_currentUser() en este caso.
      • Cargamos estas operaciones llamando al método Load() del contexto.
      • Ejecutamos las operaciones mediante la llamada a executeQueryAsync() que indica que las comunicaciones (como pasa con la variante Silverlight) son asíncronas para ECMASript. Fijaros que en la llamada de este método tenemos que especificar los correspondientes delegados para gestionar que las operaciones se han realizado de forma correcta o no.
      • En los delegados, simplemente añadimos la lógica correspondiente. En el caso de que haya éxito, mostramos en un alert el nombre y cuenta del usuario validado.
   1: <script type="text/javascript">

   2: ExecuteOrDelayUntilScriptLoaded(ConsultarUsuario, "sp.js");

   3: var context = null;

   4: var web = null;

   5: var UsuarioActual = null;

   6:     function ConsultarUsuario() {

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

   8:         web = context.get_web();

   9:         UsuarioActual = web.get_currentUser();

  10:         UsuarioActual.retrieve();

  11:         context.load(web);

  12:         context.executeQueryAsync(Function.createDelegate(this, this.onSuccessMethod), Function.createDelegate(this, this.onFailureMethod));

  13:     }

  14:     function onSuccessMethod(sender, args) {

  15:         alert('Nombre de Usuario: ' + UsuarioActual.get_title() + 'n Login de Usuario: ' + UsuarioActual.get_loginName());

  16:     }

  17:     function onFaiureMethod(sender, args) {

  18:         alert('Petición fallida ' + args.get_message() + 'n' + args.get_stackTrace());

  19:     }</script><input onclick="ConsultarUsuario()" type="button" value="Consultar Usuario"/>

  • Finalmente, comprobamos que nuestro código funciona sin problemas.

image

Y hasta aquí llega este post sobre como usar el modelo de objetos ECMAScript en la interfaz de usuario de SharePoint.

Referencia: http://praveenbattula.blogspot.com/2010/02/sharepoint-2010-client-object-model.html

Publicado por

Juan Carlos González

Juan Carlos es Ingeniero de Telecomunicaciones por la Universidad de Valladolid y Diplomado en Ciencias Empresariales por la Universidad Oberta de Catalunya (UOC). Cuenta con más de 12 años de experiencia en tecnologías y plataformas de Microsoft diversas (SQL Server, Visual Studio, .NET Framework, etc.), aunque su trabajo diario gira en torno a SharePoint & Office 365. Juan Carlos es MVP de Office Servers & Services desde 2015 (anteriormente fue reconocido por Microsoft como MVP de Office 365 y MVP de SharePoint Server desde 2008 hasta 2015), coordinador del grupo de usuarios .NET de Cantabria (Nuberos.Net, www.nuberos.es), co-fundador y coordinador del Grupo de Usuarios de SharePoint de España (SUGES, www.suges.es), así como co-director de la revista gratuita en castellano sobre SharePoint CompartiMOSS (www.compartimoss.com). Hasta la fecha, ha publicado 8 libros sobre SharePoint & Office 365 y varios artículos en castellano y en inglés sobre ambas plataformas.

Un comentario en “SharePoint 2010: Como usar el modelo de objetos ECMAScript en la Content Editot WebPart!”

Deja un comentario

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