Desarrollando Apps para SharePoint 2013 con Javascript y programación asíncrona

Para desarrollar Apps para SharePoint 2013 se requiere conocimiento en Javascript, Jquery, HTML, DOM (Document Object Model), CSOM para Javascript y de programación asíncrona.  En este artículo le echaremos un vistazo a la programación asíncrona en Javascript para el modelo de objetos clientes de SharePoint o CSOM.

De forma introductoria diremos que la página Default.aspx hace referencia a las bibliotecas de Jquery y a un archivo js para escribir el código javascript. a continuación el segmento de código:

 

<asp:Content ContentPlaceHolderId="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <!-- Add your CSS styles to the following file -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />
    <!-- Add your JavaScript to the following file -->
    <script type="text/javascript" src="../Scripts/JqueryAddIns.js"></script>
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

Con ello podemos escribir el código en el archivo App.js donde estará la lógica de la página.  Lo primero que debemos de hacer a través de jquery es invocar la carga la página el contexto de CSOM para que este disponible cuando lo invoquemos.

// script file sp.js is loaded and then executes sharePointReady()   
 $(document).ready(function () 
 {     
	 SP.SOD.executeFunc('sp.js', 'SP.ClientContext', sharePointReady);   
 }); 

El método de javascript sharePointReady() invocamos el contexto de CSOM.

function sharePointReady() {     
	context = new SP.ClientContext.get_current();     
	web = context.get_web();  
    });
}  

Ahora vamos a ver como afecta nuestro código con la programación asíncrona.  Por ejemplo el código de servidor utilizando el modelo de objetos de SharePoint para validar si existe una lista sería el siguiente:

Guid miSitioId = SPContext.Current.Site.Id;
Guid miWebId = SPContext.Current.Web.Id;
using(var miSitio = new SPSite(miSitioId))
{
     using(SPWeb miWeb = miSitio.OpenWeb(miWebId))
     {
      try
      {
         SPList miLista = miWeb.Lists[milista]; 
      } catch(Exception ex)
      {
          // Lista no existe haga algo mas
      }
   }
}

Y en Javascript para acceder por medio del CSOM y  de forma asíncrona de la siguiente forma:

function checkLibrary(listTitle) {
//	showMessage('Inside createList for '+listTitle);
	this.web = context.get_web();
	var listExist = web.get_lists().getByTitle(listTitle);
	context.load(listExist);
    context.executeQueryAsync(onSuccessGetLibrary, onFailGetLibrary);
}
// This function is executed if the above call success 
function onSuccessGetLibrary() {
              
}
 // This function is executed if the above call fails
 function onFailGetLibrary(sender, args) 
 {
 	// do something
 }

A través del método OnFailGetLibrary, podemos ejecutar algún código alterno, como por ejemplo crear una lista, para acceder alguna variable u objeto declarado globalmente lo hacemos a través de la sentencia this como esta en el segmento de código de la siguiente forma this.web = context.get_web() para obtener el objeto WebSite de SharePoint a través de CSOM.

En el siguiente segmento de código vamos a ver como nuevamente ejecutamos código asíncrono y por medio de los métodos en caso de éxito o falla podemos ejecutar alguna lógica dentro del código.

 

function getWebProperties() {
    // Get the number of lists in the current web.
    this.web = context.get_web();
	this.context.load(this.web, 'Title');
    this.context.executeQueryAsync(Function.createDelegate(this, this.onWebPropsSuccess), Function.createDelegate(this, this.onWebPropsFail));
}
function onWebPropsSuccess(sender, args) {
    showMessage('web: ' + this.web.get_title());
}
function onWebPropsFail(sender, args) {
    alert('failed to get a web . Error:' + args.get_message());
}

En este caso estamos indicándole a CSOM que deseamos obtener el título del sitio Web si es exitoso podremos obtenerlo sino, desplegar el mensaje de error.

Si desea conocer mayor información sobre los comando básicos de CSOM en javascript consulte la siguiente referencia: http://msdn.microsoft.com/en-us/library/jj163201(v=office.15).aspx

Ahora ni modo javascript4Fun!,

Juan Manuel Herrera Ocheita