JqGrid y la API REST de SharePoint 2013

El motivo de este post es mostrar un ejemplo de como combinar el uso del jqGrid obteniendo datos de una lista de SharePoint a través de la API REST.

Antes que nada, supongo que muchos de ustedes conocen el jqGrid, si no es así, se están perdiendo de un plugin de jquery bastante interesante, muy fácil de usar y con bastantes características como:

• Formatear celdas
• Reordenar columnas
• Menús contextuales para filas
• Barras de menús personalizadas
• Carga de datos desde diferentes fuentes como XML, JSON, etc
• Multiseleccion
• Resizing
• Edición en línea
• Agrupación
• Búsqueda
• Paginación
• Y un largo etcétera.

Lo anterior combinado con la practicidad de la nueva API REST de SharePoint 2013 permite a los desarrolladores crear aplicaciones realmente sorprendentes.

Escenario:
Tengo un sitio de SharePoint con una lista llamada Sales con las columnas y datos que se aprecian en la imagen

Requerimiento:
Es necesario mostrar en una pagina, una vista de la lista utilizando alguna de las características arriba mencionadas, como ordenación, menús contextuales, multiseleccion, etc.

Solución:
Como siempre y para cualquier problema, no hay una solución única, pero yo me inclinaría por usar jqGrid, porque la solución es muy sencilla, fácil de codificar y ni siquiera requiere crear un wsp o una App (cosa que hare en otro post) que se instale y despliegue en la granja.

Solo hare uso de la webpart Script Editor para agregar un poco de HTML y JavaScript a una pagina cualquiera de SharePoint.

A continuación el código completo utilizado:

La explicación:
Primero agregamos algunas referencias a los archivos js y css, tanto del grid como de jquery

Luego agregamos el código para configurar el jqGrid, es decir las columnas, el ordenamiento, etc, etc. y el código para realizar la llamada REST y manejar la respuesta para hacer el Binding de datos JSON con el grid

$(onPageLoad);

//funcion que se ejecuta en el evento onLoad de la pagina
function onPageLoad()
{
 //adjuntamos a el evento onclick del boton 'getSales' la funcion getSales()
 $("#getSales").click(getSales);
   $(document).ready(function () {
   //configuramos el jqGrid
    $("#SalesTable").jqGrid({
    datatype: 'local',
    autowidth: true,
    height: 230,
    colNames: ['ID', 'Order Date', 'Region', 'Representative', 'Item', 'Units', 'Unit Cost', 'Total'],
    colModel: [
     { name: 'ID', index:'ID', width: 80 , sorttype:"int"},
     { name: 'Title', width: 80 , sorttype:"date"},
     { name: 'Region', width: 80 },
     { name: 'Rep', width: 80 },
     { name: 'Item', width: 80 },
     { name: 'Units', width: 80 },
     { name: 'Unit_x0020_Cost', width: 80 },
     { name: 'Total', width: 80 , sorttype:"float"},
    ],
    caption: 'Sales via OData'
  });
   });
}

//funcion que se ejecuta cuando hacemos click en el boton 'Obtener Ventas'
function getSales(){
 //Url REST de la consulta que estamos haciendo, recuperamos los elementos de la lista 'Sales'
 var requestUri = "http://sp2013app/_api/web/lists/getByTitle('Sales')/items/";
 //Se establece el header ACCEPT de manera adecuada
 var requestHeaders={
      "ACCEPT":"application/json;odata=verbose",
 }
 //se realiza la llamada ajax mediante jquery
 $.ajax({
 url: requestUri,    //Url de la consulta a realizar
 type:"GET",      //tipo de la llamada
 contentType:"application/json", //el tipo de contenido que esperamos recuperar, JSON
 headers: requestHeaders,  //headers correctos
 error:onError,      //en caso de error se ejecuta la funcion onError()
 success: onGetSalesSuccess  //en caso de exito, se ejecuta la funcion onGetSalesSuccess()
 }); 
}

//funcion que se ejecuta en caso de que la llamada REST sea exitosa
function onGetSalesSuccess(data){
 if(!data)return;
  //por cada uno de los resultados obtenidos se agrega una fila al jqGrid
  $.each(data.d.results,function(index, value){
   $("#SalesTable").jqGrid('addRowData', value.ID, value);
  });
 $("#SalesTable").jqGrid('SalesTable','#pager2',{edit:false,add:false,del:false});
}

function onError(xhr, status){
 alert(xhr.response.message);
}

Y por ultimo tenemos el código HTML que sirve como contenedor del grid, me refiero al input, la tabla y el div. Solo basta descomentar el código HTML al ser usado

El resultado:

Happy Coding!