Ejemplos de CAML en Client Object Model (JavaScript)

Escrito por Juan Pablo Pussacq

El modelo de objetos de cliente de SharePoint ha sido una gran incorporación en SharePoint 2010. Nos permite consultar información de listas, utilizando sólo un poco de código JavaScript. No se requiere desarrollo a nivel de servidor, ni permisos especiales en la granja de SharePoint.

Uno de los usos más comunes, que al menos yo le he dado, es consultar información de listas, para luego desplegarla utilizando diferentes formas de presentación gráfica. Para ello, suelo utilizar consultas en lenguaje CAML. CAML tiene sus particularidades. En este breve artículo voy a presentar algunos ejemplos que me han resultado útiles.

En caso que nunca hayan utilizado Client Objetc Model, quizá sea conveniente que lean una introducción: http://surpoint.blogspot.com/2011/10/introduccion-al-modelo-de-objetos-de.html

Caso 1: Empezando

En el primer ejemplo, vamos a mostrar un caso completo. En los siguientes mostraremos sólo las variaciones. Imaginemos que necesitamos hacer una consulta simple, en donde veremos:

Cómo ordenar elementos.
Cómo indicar qué columnas mostrar.
Cómo indicar que queremos traer sólo una fila.

1function cargar_noticia_destacada() {
2    contexto = new SP.ClientContext.get_current();
3    var lista = contexto.get_site().get_rootWeb().get_lists().getByTitle('Noticias');
4    var query =new SP.CamlQuery();
5    var consulta =
6        '<View>' +
7        // Ordenada por fecha de creación (ID) descendente
8        '<Query><OrderBy><FieldRef Name ="ID" Ascending="FALSE"/></OrderBy></Query>' +
9        // Una sóla noticia
10        '<RowLimit>1</RowLimit>' +
11        '<ViewFields>' + 
12        '<FieldRef Name="ID"/><FieldRef Name="Title"/><FieldRef Name="Resumen"/><FieldRef Name="Imagen_x0020_destacada"/>' +
13        '</ViewFields>' +
14        '</View>';
15    query.set_viewXml(consulta);
16    this.items = lista.getItems(query);
17    contexto.load(items);
18    contexto.executeQueryAsync(Function.createDelegate(this, this.cargaok_noticia_destacada), Function.createDelegate(this, this.cargamal));
19}
20

En la siguiente función vemos cómo procesar los ítems leídos. Esto por supuesto depende de nuestra página, pero lo muestro para que tengan un ejemplo de cómo se haría.

1function cargaok_noticia_destacada(sender, args) {
2    var itemslista = this.items.getEnumerator();
3    while (itemslista.moveNext()) {
4        var elitem = itemslista.get_current();
5        var strHtmlImg  = elitem.get_item('Imagen_x0020_destacada').get_url();   
6        var strHtmlTxt  ='<span class="h1">&gt; ' + elitem.get_item('Title') + '</span><br /><br />' + elitem.get_item('Resumen');
7        var strHtmlBtn2 ='<a target="_self" href="javascript: AbrirVentanaModal(\'' + window.location.href.replace("/default.aspx","") + '/lists/Noticias/DispForm.aspx?ID=' + elitem.get_item('ID') + '&source=' + window.location.href + '\');"/>';   
8        var strHtmlBtn1 ="<a href='" + window.location.href.replace("/default.aspx","") + '/lists/Noticias/' + "'/>";   
9    }
10    // Imagen
11    $("#general_modulo1_img img").attr("src",strHtmlImg);
12    // Título y resumen
13    document.getElementById("general_modulo1_txt").innerHTML = strHtmlTxt  ;
14    // Noticia completa
15    $('#general_modulo1_btn td:nth-child(2) img').each(function() {
16        $(this).wrap(strHtmlBtn2);
17    });
18    // Más noticias
19    $('#general_modulo1_btn td:nth-child(1) img').each(function() {
20        $(this).wrap(strHtmlBtn1 );
21    });
22    $('#general_modulo1_btn td:nth-child(1) img').css("border","none");
23}
24

Y finalmente nuestra rutina de error:

1function cargamal(sender, args) { 
2    alert('ERROR: ' + args.get_message() + '\n' + args.get_stackTrace()); 
3}
4

Caso 2: Agregando una condición

En este segundo ejemplo, vamos a ver cómo agregar una condición de igual sobre un campo de tipo texto:

1'<Query><Where><Eq><FieldRef Name="Mostrar_x0020_en_x0020_p_x00e1_g"/><Value Type="Text">Si</Value></Eq></Where><OrderBy><FieldRef Name ="ID" Ascending="FALSE"/></OrderBy></Query>'
2

Caso 3: Filtro por fecha actual

Supongamos ahora que queremos filtrar un campo fecha, comparándolo con la fecha del sistema. Veremos que necesitamos indicar el tipo de campo, e indicarle que no compare usando la hora:

1'<Query><Where><Eq><FieldRef Name="Fecha"/><Value Type="DateTime" IncludeTimeValue="FALSE"><Today /></Value></Eq></Where></Query>'
2

Caso 4: Filtrando entre fechas

Nuevamente compararemos con la fecha de sistema, pero esta vez, una comparación entre dos fechas:

1'<Query><Where><And><Leq><FieldRef Name="Desde"/><Value Type="DateTime" IncludeTimeValue="FALSE"><Today/></Value></Leq><Geq><FieldRef Name="Hasta"/><Value Type="DateTime" IncludeTimeValue="FALSE"><Today/></Value></Geq></And></Where><OrderBy><FieldRef Name ="ID" Ascending="FALSE"/></OrderBy></Query>'
2

Caso 5: Filtro por campo calculado

En el siguiente ejemplo, mostraremos cómo filtrar cuando nuestra columna es un campo calculado:

1'<Query><Where><Eq><FieldRef Name="Apellido_x0020_y_x0020_nombre" /><Value Type="Computed">'` `+ persona_seleccionada +``'</Value></Eq></Where></Query>'
2

Caso 6: Filtro por campo de búsqueda

En este otro caso, vemos como filtrar en campos de búsqueda:

1'<Query><Where><Eq><FieldRef Name="Usuario" LookupId="TRUE"/><Value Type="Lookup">'` `+ usuario_conectado +``'</Value></Eq></Where></Query>'
2

Caso 7: Fecha ingresada por pantalla

Finalmente veremos un caso en donde necesitamos comparar contra una fecha ingresada por pantalla. El truco aquí es el formato de la fecha, el cual debemos formatear así:

1var desde = ISODateString(Pdesde);
2var hasta = ISODateString(Phasta);
3

La función utilizada es:

1function ISODateString(d) {
2    function pad(n){return n<10 ? '0' +n : n}
3        return d.getUTCFullYear() + '-'
4            + pad(d.getUTCMonth()+1) + '-'
5            + pad(d.getUTCDate()) + 'T'
6            + pad(d.getUTCHours()) + ':'
7            + pad(d.getUTCMinutes()) + ':'
8            + pad(d.getUTCSeconds()) + 'Z'
9}
10

Por último, el CAML para comparar las fechas ingresadas con las registradas en la lista:

1'<Query><Where><And><Leq><FieldRef Name="Fecha"/><Value Type="DateTime" IncludeTimeValue="TRUE">'` `+ hasta +``'</Value></Leq><Geq><FieldRef Name="Fecha"/><Value Type="DateTime" IncludeTimeValue="FALSE">'` `+ desde +``'</Value></Geq></And></Where></Query>'
2

Conclusión

La utilización de Client Object Model de JavaScript nos brinda una forma muy sencilla de consultar información y mostrarla en una página de diferentes formas. En este breve artículo hemos mostrado algunas variantes del lenguaje de consulta CAML para entender cómo se aplican diferentes condiciones. Espero que les haya resultado útil. Hasta la próxima!

Juan Pablo Pussacq Laborde SharePoint MVP Blog: http://surpoint.blogspot.com/ Facebook: http://facebook.com/surpointblog/ Twitter: http://twitter.com/jpussacq/