Preparando el Office & SharePoint App Challenge que tenemos la próxima semana y aprovechando que queremos que CompartiMOSS tenga una SharePoint App en la Store, empezamos con el desarrollo de esta App, aprovechando los servicios REST de SharePoint 2013.
CompartiMOSS App tiene que usar la API de búsqueda para mostrar los números y los artículos, además de permitir buscar el contenido de estos, más o menos, como se hacemos en la web, pero dentro de una App.
¿Fácil no? Básicamente, tenemos que usar jQuery para hacer la llamada al servicio REST, en la siguiente URL http://host/site/_api/search y parsear la información, para mostrarla con los estilos de CompartiMOSS. Algo como:
$.ajax(
{
url: http://host/_api/search/query?querytext='sharepoint',
method: «GET»,
headers:
{
«accept»: «application/json;odata=verbose»,
},
success: onSuccess,
error: onError
}
function onSuccess() {
var results = data.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
var html = "<div class='results'>";
for (var i = 0; i < results.length; i++)
{
html += "<div>";
var clickableLink = "<a href='" + results[i].Cells.results[6].Value + "'>"
+ results[i].Cells.results[3].Value + "</a><br/><span>Type: " + results[i].Cells.results[17].Value + "</span><br/>";
html += clickableLink;
html += "</div>";
}
html += "</div>";
$("#searchResults").html(html);
}
Error. Gracias a nuestro queridísimo Javascript, nos encontramos con un problema conocido y muy habitual de llamadas en cross-domain. Nuestra App, que se ejecutará en el dominio de nuestro SharePoint, no permite las llamadas Javascript a un dominio externo, como el de CompartiMOSS.
MDSN y JC al rescate. Hablando con Juan Carlos y Fabian, descubrimos en la MSDN que en la API de SharePoint 2013, hay un objeto WebProxy que permite, a las SharePoint Apps, realizar llamadas cross-domain de una forma bastante sencilla. Con estos cambios:
var context = SP.ClientContext.get_current();
var request = new SP.WebRequestInfo();
request.set_url("http://host/_api/search/query?querytext='sharepoint'");
request.set_method("GET");
request.set_headers({ "Accept": "application/json;odata=verbose" });
var response = SP.WebProxy.invoke(context, request);
context.executeQueryAsync(successHandler, errorHandler);
No realizamos la llamada Ajax, sino que le pasamos la petición al WebProxy de SharePoint, que es el encargado de realizar la llamada asíncrona y devolvernos el resultado.
function successHandler() {
if (SPSearchResults.response.get_statusCode() == 200) {
var body = JSON.parse(SPSearchResults.response.get_body());
var results = body.d.query.PrimaryQueryResult.RelevantResults.Table.Rows.results;
var html = "<div class='results'>";
for (var i = 0; i < results.length; i++) {
var linkUrl = results[i].Cells.results[4].Value;
var title = results[i].Cells.results[5].Value;
var desc = results[i].Cells.results[6].Value;
var picture = results[i].Cells.results[2].Value;
html += "<div class='divCompartiMOSSMagazineNumber' id='Number" + i + "'>";
html += "<div class='divPicture'>";
html += "<a href='" + linkUrl + "'>" + picture + "</a>";
html += "</div>";
html += "<div class='divOverlay'>";
html += "<a class='linkOverlay' href='" + linkUrl + "'>";
html += "<h2 class='ms-noWrap'>" + title + "</h2>";
html += "<div>" + desc + "</div>";
html += "</a>";
html += "</div>";
html += "</div>";
}
html += "</div>";
$("#searchResults").html(html);
$(".divCompartiMOSSMagazineNumber").hover(
function () {
$(".divOverlay", this).css('top', '0');
},
function () {
$(".divOverlay", this).css('top', '300px');
});
}
else {
var errordesc;
errordesc = "<P>Status code: " +
SPSearchResults.response.get_statusCode() + "<br/>";
errordesc += SPSearchResults.response.get_body();
$("#searchResults").html(errordesc);
}
}
y junto con un poco de maquillaje css, obtener el resultado deseado:
Una vez más se demuestra que SharePoint es una gran plataforma y que incluye diversas funcionalidades que nos facilitan la vida a los desarrolladores.
Saludos a todos…
.png)
