[SharePoint 2013] Consumo de la API Rest desde APPs SharePoint-Hosted (I)

Una de las grandes novedades para los desarrolladores es la mejora en las funciones de la API Rest. Lo primero de todos tendríamos que definir que es la famosa API Rest. La API Rest nos permite interactuar SharePoint usando cualquier tecnología que soporte REST. Y REST se construye a través de una petición HTTP usando el protocolo OData y emite la respuesta en un formato Atom o JSON.
Tras esta parrafada lo que significa hablando claro es que el contenido que hay en SharePoint se puede consumir desde cualquier tipo de Tecnología no tiene porque ser MS y lo mejor de todo que por fin se adapta a los estándares web lo que facilita que el número de desarrolladores que SharePoint se puede incrementar en los próximos meses, años…
Esta API Rest ya estaba presente en la versión de 2010 pero bastante limitada solo la podías utilizar en listas y bibliotecas, ahora se ha añadido la opción de interactuar con sitios y servicios (búsqueda, perfil de usuario y publicación). Y ademas nos dan mayores opciones es decir podemos realizar filtros de elementos, ordenar, obtener los n primero registros, es decir nos pone las cosas mucho más sencillas.

En los siguientes ejemplo voy a crear una APP de demostración donde voy a rellenar un combo leyendo la información de una lista, veremos lo sencillo que es 🙂
Para empezar nos metemos dentro del Visual Studio 2012 y seleccionamos crearnos una APP de Sharepoint 2013, en este primer punto ya tenemos que decir que tipo de arquitectura va a seguir nuestra APP, ya que nos indica que tipo de Alojamiento vamos a realizar. El tipo de alojamiento puede ser Auto-Hosted (que son las alojadas en Azure), Provider-Hosted (alojadas en un servidor del proveedor) o SharePoint-Hosted (alojadas en el propio servidor). En nuestro caso esta claro que vamos a alojarlas en el propio servidor de desarrollo, principalmente por comodidad y rapidez para realizar estas pruebas. Pero en que nos condiciona el elegir un alojamiento u otro, pues en la forma en la que vamos a consumir los datos de las listas, bibliotecas de SharePoint ya estaría incluida en caso de SharePoint-Hosted y en el resto de opciones tendriamos las restricciones de cross-domain a la hora de realizar las llamadas JavaScript (que ya hablaré en futuros post).

El siguiente paso una vez hemos seleccionado estos pasos es ver la estructura de Proyecto que nos ha generado Visual Studio, que quedaría de la siguiente forma:

Vemos que el proyecto lo ha separado en varias partes:
1. Carpeta Content donde definiremos los elementos que vamos a crear dentro de SharePoint listas, bibliotecas, tambien podemos añadir los ficheros css (para darle los estilos que correspondan).
2. Pages Aqui introduciremos las paginas que va a tener nuestra aplicación
3. Scripts En esta parte están todos los ficheros .js que va a utilizar nuestra aplicación, por regla general por un lado tenemos las referencias a los ficheros jquery que utiliza y por otro lado tenemos un fichero app.js que es la ubicación donde nosotros introduciremos el código que va a desplegar nuestra aplicación.

Si no me he vuelto loco esto es un Proyecto abierto con Visual Studio donde tenemos que saber si o si JavaScript (ahora mismo mi conocimiento sobre JavaScript es nivel aprendiz, estoy aprendiendo todas las bondades de este lenguaje de programación).
Ahora lo que vamos a editar el proyecto fichero APP.js para añadirle el código que queremos implementar en nuestro caso vamos a implementar una llamada para que nos cargue el contenido de una lista «Empleados», para esto lo primero es eliminar casi todo el contenido que hay en este fichero APP.js y dejarlo como esto
$(document).ready(function ()
{
CreateCombo();
}
El resto del contenido no nos vale (salvo que queramos ver un Hola mundo en nuestra aplicación).
Ahora el primer paso es crearnos la función que lea de la API Rest y nos rellene los valores del combo para eso nos valdría la siguiente función:

function CreateCombo() {
    Resultados = {
        elements: '',
        url: '',

        init: function (element) {
            Resultados.elements = element;
            Resultados.url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('Superheroes')/items/";
        },
        load: function () {
            $.ajax({
                url: Resultados.url,
                method: "GET",
                headers: {
                    "accept": "application/json;odata=verbose",
                },
                success: Resultados.onSuccess,
                error: Resultados.onError

            });
        },
        onSuccess: function (data) {
            var myresultados = data.d.results;

            var htmlResultados = "<label>Elije tu SuperHeroe preferido: </label>  <select id='combobox'><option value=''>Elije uno...</option>";
            for (var i = 0; i < myresultados.length; i++) {
                htmlResultados += "<option value='" + i + "'>" + myresultados[i].Title + "</option>";
            }
            htmlResultados += "</select>";
            var capa = document.getElementById("combo");
            var combo = document.createElement("combosuper");
            combo.innerHTML = htmlResultados;
            capa.appendChild(combo);

            //Resultados.element.html(htmlResultados);
        },
        onError: function (err) {
            alert(JSON.stringify(err));
        }
    }
    Resultados.init('#combo');
    Resultados.load();

}

Antes de ver el resultado final voy a explicar un poco que hace esta función, el primer paso de todo es me creo una clase(como si fuera .NET pero a lo Java) en esta clase lo que hago es en primer lugar me creo dos variables una primera donde tengo el elemento Dom donde voy a representar los resultados, otra segunda variable donde introduzco la url donde esta el servicio donde vamos a obtener datos en mi caso una lista de Superheroes. A continuación me creo una función init que traduciendo su referencia a .Net es como si fuera el Constructor y que es una buena práctica inicializar las variables antes de utilizarlas. A continuación creo un método Load que indico que es lo que voy ha realizar una vez invoque este método, y que es lo que voy a realizar pues realizar la llamada JSON para obtener los elementos de la lista. Como esta llamada es asíncrona es decir que los datos los puedo recibir antes o después y no por ello debo de dejar su ejecución parada para eso implemento dos métodos uno en el que en caso que obtenga la llamada se produzca con éxito que lo que hace es pintar los datos que hemos obtenido con el formato de un combo. En caso de que se produzca un error pues mostramos un alert para indicarnos el tipo de error que se ha producido.
El resultado en mi caso sería el siguiente:

Antes de hacer esto en primer lugar me he creado una lista utilizando el Asistente de Visual Studio y dentro de la página default.aspx he eliminado el id que creado por defecto y he añadido un div con id=’combo’ que lo utilizo como referencia para añadirle el combo.
El tema del asistente de Visual Studio para crear listas también quiero abordarlo en futuros post, ya que para mi juicio han añadido funcionalidad pero no mas que la que daba soluciones como el Software Factory y seguimos teniendo que recurrir a añadir campos de Taxonomía y de Lookup utilizando código, por lo que si hay que morir usando codigo pues el asistente creo que carece de sentido y de la utilidad necesaria (pero bueno sabemos que estamos en las primeras versiones y seguro que MS se lo apuntan para nuevos Updates 🙂
También que aunque es un ejemplo base sirve para afianzar conceptos, la idea que tengo es ir añadiendo post para explicar el uso básico de esta API REST, desde como visualizarlos a como añadir/editamos/eliminamos nuevos registros en una lista e ir adaptándonos a esta «Nueva» forma de desarrollar sobre nuestro servidor favorito 🙂