Acceso vía REST a listas de Sharepoint 2013

Por un proyecto que estamos siguiendo en mi actual trabajo tenemos que realizar una serie de integraciones con MS Sharepoint 2013. Entre ellas una interfaz "algo" compleja para las búsquedas, que demandó realizar un WebPart particular que se encarga de realizar la búsqueda con una toxi-consulta CAML, y luego se rescata el detalle de cada registro usando el  plugin jQuery SPWebServices.

Debido a un error que prefiero no mencionar para no perjudicar a los inocentes, estuvimnos mirando que maneras alternativas teníamos para rescatar esta misma información, y en esta búsqueda llegamos a la API REST de Sharepoint 2013.
Esta API nos provee de una vía bastante intuitiva para abordar temas como la recuperación de registros, sobretodo si hay conocimiento de la lista a la que pertenece y su correspondiente Id (siempre del registro).

Nosotros hicimos algunas trampas, en la lista de origen teníamos en las etiquetas data de los enlaces de cada registro tanto la lista como el id que he mencionado.

Básicamente los pasos a seguir son:

• Identificar las listas disponibles, de modo de poder identificar el nombre de la lista (su título). Para ello pueden abrir la URL:
  
  http://[servidor sharepoint]/_vti_bin/listdata.svc
• Recuperar el registro utilizando la interfaz REST, abriendo la URL:
  
  http://[servidor sharepoint]/_api/Web/lists/getByTitle('[nombre de la lista]')/Items([id numérico])
• Otra manera de hacer exactamente lo mismo es usando la URL:
  
  http://[servidor sharepoint]/_vti_bin/listdata.svc/[nombre de la lista]([id numérico])

Notar los paréntesis en la llamada.

Con esto se recuperará un XML bastante tóxico y sin embargo bastante legible, sobre el cual pueden realizar las operaciones que determinen convenientes según sus requerimientos.
Si esto lo combinamos con un poco de jQuery, AJAX, y eventualmente algo de JSON (entiendo que haciendo la llamada adecuadamente se puede recuperar el resultado en JSON, pero por tiempo no lo verifiqué) se podrían hacer cosas bastante entretenidas.

Eso lo dejamos o para el pedido del público o para otro artículo más adelante.
Dudas, comentarios, aportes y observaciones son siempre bienvenidas.

Cabe advertirles que mi paso por Sharepoint es netamente circunstancial debido a este proyecto que espero se termine pronto.

Integración Fancybox y Flowplayer (en Sharepoint)

Advertencia: Este artículo no necesariamente está pensado para el lector casual

Por un desarrollo Sharepoint en el que me ha tocado participar por la empresa donde trabajo, se tuvo qeu hacer una integración de Fancybox con Flowplayer, JavaScripts para una galería de fotos en ventanas modales y un reproductor de videos respectivamente, ambos para desarrollos web. Personalmente ni Fancybox ni Flowplayer son santos de mi devoción, hubiera preferido optar por PrettyPhoto y algún otro reproductor de video en HTML5 .

El consultor que se está encargando de los desarrollos Sharepoint (y el responsable indirecto de esta publicación) me señaló que había un script llamado FancyPlayer que hacía la mencionada integración. El problema es que esta integración se hace con versiones algo desactualizadas de ambos script.

Con las versiones más actuales la integración en realidad es bastante directa.
Paso a paso:
1.- Agregar los siguientes estilos solamente para el ajuste:

.flowplayer { margin: 1em auto; height: auto; text-align: center; } .flowplayer video { width: 90%; } .fancybox-nav { top: 35%; height: 30%; width: 40px; } .fancybox-next { right: -1.3em; } .fancybox-prev { left: -1.3em; }

Aquí hay varios estilos que son para el ajuste de los botones de navegación en las galerías. Loss estilos importantes son los referentes al tamaño del contenedor flowplayer.

2.- Hacer que cada bloque de código que lleve la clase flowplayer (normalmente un div con el atributo class="flowplayer") especifique en el atributo style el ancho y alto del video (esos parámetros se pueden obtener usando Sharepoint).

3.- Agregar el siguiente código en el bloque $(document).ready( function(){ /* aqui */}); :

$('.flowplayer').flowplayer({ swf: '/_layouts/15/js/flowplayer.swf' }); $('div.gallery div.photo a').fancybox({ scrolling: 'no', autoSize:true , helpers: { overlay: { locked:false}} });

Aquí lo importante es que los videos se desplegarán del tamaño que especifique el elemento contenedor.
Y sería. El resto es solamente referirse a la documentación de ambos plugins.

Esta integración no es exclusiva para Sharepoint, claramente la pueden extrapolar a desarrollos no-Sharepoint, y claramente pueden mejorarla.

jQuery Mobile borrar item en listview usando swipe

En este momento estoy usando jQuery Mobile para desarrollar algunas interfaces para unas aplicaciones móviles. Gracias a PhoneGap puedo compilarlas para Android y pasan de ser un desarrollo 100% a una desarrollo que sigue siendo web, pero tiene olor a aplicación.

Dentro de la interfaz me enfrenté al problema que lo limitado del espacio en pantalla no me permite incluir demasiados botones, y requería de una manera para eliminar ítemes de una lista en modo inset. Quise copiar un poco la interfaz de webOS (de la difunta Palm)  para esto, una interfaz muy similar a la que provee iOS en el iPhone.

La idea:

• Deslizar el dedo desde izquierda a derecha para eliminar un ítem.
• Deben aparecer botones que permitan borrar el ítem o cancelar la operación de borrado.
• Al seleccionar borrar se debe confirmar la eliminación antes de hacerla efectiva.

El código y el ejemplo:

http://jsfiddle.net/jsanta/7Ur6z/6/

Observaciones:

La variable onswipe marca como activa la acción de eliminación. Si se está eliminando un item, no se podrán eliminar otro.

Una vez que se hacen aparecer los botones para la eliminación es necesario desactivar los eventos tap y click sobre el ítem de la lista, sino va a tomar la acción por defecto y los botones no van a poder capturar el evento de click sobre ellos.

Se ha utilizado la etiqueta "button" en vez de "a" (para enlaces) para evitar que el framework aplique los estilos de lista (en este caso lista tipo inset).

Está probado en Android y en iOS y funciona. Seguramente alguien lo va a poder mejorar.

El código toma bastantes referencias de lo discutido en https://forum.jquery.com/topic/adding-an-iphone-style-swipe-to-delete-button-to-a-listview . Lamentablemente el código original no me funcionó.

Combobox con Autocomplete & jQuery

Parte de las barbaridades que hago a diario requieren ciertas consultas HTTP recurrentes. Para poder atenderlas hice un formulario energizado por jQuery. Funciona, pero muchas veces tenía que referirme a datos estáticos y para no tener que llenarlos a cada rato los puse en un combobox.

El problema es que el combobox empezó a crecer y se empezó a volver tedioso encontrar el dato correcto en la cada vez más larga lista de registros.
La solución fue hacer que el combobox fuera editable y que desplegara los registros que respondían a una búsqueda parcial, tal como el ejemplo de jQuery UI para el componente autocomplete. Sin embargo el ejemplo provisto para los comboxes (select boxes) no me gustó. Demasiado complejo para algo "tan simple".

Mi solución (actualizada):

Dejé todo el código para que lo puedan ver y probar en http://jsfiddle.net/jsanta/CBjVz/3/

En mi opinión este código es mucho más fácil, más entendible y más ajustable que el del ejemplo original.
TO DO (pendiente) convertir esto a un plugin.