Thursday, September 08, 2011

SharePoint en el lado del cliente - JQuery

Suelo hablar poco de las tecnologías y menos tratar de filosofar, prefiero remitirlos a los "gurus" y por supuesto a algún buen libro.

Lo real es que SharePoint 2010 cuenta con capacidad directa para soportar cosas bien interesantes, entre las que podemos citar el uso de JQuery, REST, JSON, modelo de objetos del lado del cliente, entre otros aspectos interesantes que nos estan beneficiando directamente a los desarrolladores.

A continuación les dejo un sencillo ejemplo que tiene por objetivo leer información de una lista de tipo calendario y presentar las fechas de cumpleaños y festivos qe ahi se han definido, haciendo uso de un poco de JQuery.

< script type="text/javascript" >
$(document).ready(function()
{
$.getJSON("http://urlsitosharepoint/_vti_bin/ListData.svc/Calendario",function(data) {
var count = 0;
var fechaActual=new Date();
var diaActual = fechaActual.getUTCDate()-1;
var mesActual = fechaActual.getMonth()+1;
var anioActual = fechaActual.getFullYear();
var eventos = "false";
$('#resultarea').text("");

$.each(data.d.results, function(i,result) {

var tmpInicio = eval(result.HoraDeInicio.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));

var dia = tmpInicio.getUTCDate()-1;
var mes = tmpInicio.getMonth()+1;
var anio = tmpInicio.getFullYear();

if(diaActual==dia && mesActual == mes && anioActual==anio)
{

html = "
Hoy " + result.Título +"
";
$('#resultarea').append($(html));
eventos="true";
}

});

if(eventos == "false")
{
$('#resultarea').text("Sin eventos el día de hoy");
}


});

});< /script >< div id="resultarea" >< / div >
< div >< a href="/Lists/Calendario/calendar.aspx">Ver todos < / a >

Lo primero que se debe notar es la llamada a ListData.svc, ahi prácticamente está lo interesante que ofrece SP 2010. Para no decir más revisen aquí.

Luego JQuery llega al rescate, como ha venido haciéndolo desde hace un tiempo acá, y bueno nos provee el mecanismo getJSON para comunicarnos con el servidor así.

El resto amigos creo que es muy conocido por todos, uso de JavaScript común y corriente. Interesante de todo eso la linea var tmpInicio = eval(result.HoraDeInicio.replace(/\/Date\((\d+)\)\//gi, "new Date($1)"));
donde logramos tomar la columna HoraDeInicio de la lista Calendario, y bueno la muy obvia Título con el objeto pertinente del recorrido del ciclo each: result.Título.

Es evidente que esto tiene grandes ventajas, cero deploy en el servidor, cero interacción con los cara dura de IT, rapida manipulación de data sin tanto problema: solo un poco de JQUERY, JavaScript y típico HTML.

Feliz client programming.

No comments: