SharePoint 2013 - Recuperar imagenes de libreria de imagenes mediante REST

En estos últimos días me he estado jugando un poco con la API REST para crear funcionalidad para SharePoint Online en donde, como todos ustedes ya saben, no se puede desplegar soluciones full trust.

La API REST de SharePoint es tan fácil de usar que combinándola con un poco de JavaScript y utilizando alguno de los frameworks más populares como jQuery, Knockout, JsRender, etc, etc, se pueden lograr cosas bastante funcionales y sobre todo muy visuales.

En esta ocasión voy a compartir un ejemplo de cómo recuperar las Urls de las imágenes que se encuentran en una librería de imágenes para mostrarlas en una WebPart.

Lo primero que debemos hacer y tal vez lo más “difícil” es construir la consulta ODATA que recupere los metadatos que necesitamos para obtener las urls de las imágenes.

En mi ejemplo la librería de imágenes se llama “Car Images” y se encuentra dentro de un subsitio WXYZ (el nombre de sus subsitio), por lo que la url podría quedar como la siguiente:

https://sitioprincipal/subsitio/_api/web/Lists/getbytitle('Car%20Images')/items?$Expand=File&$select=File/ServerRelativeUrl

La parte fundamental es la que esta marcada en negro, con esa consulta podemos recuperar las urls de las imágenes, sin embargo existe el inconveniente de que las urls que recuperamos pertenecen a las imágenes originales y que pueden ser muy grandes (como en mi caso) por lo que lo ideal es recuperar las imágenes pequeñas o thumbnails que se crean automáticamente cuando los archivos de imágenes se cargan en la biblioteca. Para lo anterior se debe modificar un poco la consulta para acceder a la carpeta “_t” que es en donde se encuentran esas imágenes miniatura, y quedaría de la siguiente manera:

https://sitioprincipal/subsitio/_api/web/GetFolderByServerRelativeUrl('Car%20Images/_t')?$Expand=Files&$select=Files/ServerRelativeUrl

Noten el uso de la función GetFolderByServerRelativeUrl para acceder a la carpeta “_t” y enumerar las imágenes miniatura. Una vez que ya tenemos la consulta lo siguiente es escribir un Html muy sencillo en el que se ejecute esta consulta y se pinten las imágenes en el HTML. Algo como lo siguiente podría funcionar:

Y si ponemos este Html dentro de un content editor...funciona!

Nótese que en este caso por simplicidad solo concateno texto para formar el HTML, algo que podría hacerse mucho mas elegante con Knockout por ejemplo, pero eso sera en un siguiente post.

Happy coding!