Añadiendo elementos a una lista usando la API REST de SharePoint 2013


Muy buenas a todos.

Hoy quiero dar un paso más en el uso de la API REST de SharePoint 2013 y el conocimiento de la misma. Hasta ahora, solo la había usado para obtener datos de SharePoint: de usuarios, listas y sitios. Lo que hoy quiero mostrar en este post es, cómo añadir a través de API REST elementos a una lista. Os dejo en primer lugar algunos enlaces a post donde trataba sobre todo lo anterior que os comentaba

Acceso a datos desde una Aplicación en SharePoint 2013 usando API Rest

Introducción a la API REST de SharePoint 2013 (Usuarios y grupos)

Introducción a la API REST de SharePoint 2013

Para poder cumplir el objetivo que me he propuesto, voy a crear una SharePoint Hosted App, en la que implementaré todo el funcionamiento. Va a ser una App sencilla, por lo que voy a utilizar la estructura que por defecto se crea con el proyecto, y modificaré los ficheros Default.aspx y App.js.

Además en esta aplicación vamos a añadir una Lista Personalizada que llamaremos Noticias, y que tendrá además del campo Title, uno llamado Subject y otro Body y que añadiremos a través de Visual Studio.

Código del fichero Default.aspx

<%-- Las 4 líneas siguientes son directivas ASP.NET necesarias cuando se usan componentes de SharePoint --%>

<%@ Page Inherits="Microsoft.SharePoint.WebPartPages.WebPartPage, Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" MasterPageFile="~masterurl/default.master" Language="C#" %>

<%@ Register TagPrefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>
<%@ Register TagPrefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%-- El marcado y el script del elemento Content siguiente se pondrán en el elemento <head> de la página --%>
<asp:Content ContentPlaceHolderID="PlaceHolderAdditionalPageHead" runat="server">
    <script type="text/javascript" src="../Scripts/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
    <script type="text/javascript" src="/_layouts/15/sp.js"></script>
    <script type="text/javascript" src="/_layouts/15/SP.RequestExecutor.js"></script>
    <meta name="WebPartPageExpansion" content="full" />

    <!-- Agregue sus estilos CSS al siguiente archivo -->
    <link rel="Stylesheet" type="text/css" href="../Content/App.css" />

    <!-- Agregue el código JavaScript al siguiente archivo -->
    <script type="text/javascript" src="../Scripts/App.js"></script>
</asp:Content>

<%-- El marcado del elemento Content siguiente se pondrá en el elemento TitleArea de la página --%>
<asp:Content ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea" runat="server">
    Page Title
</asp:Content>

<%-- El marcado y el script del elemento Content siguiente se pondrán en el elemento <body> de la página --%>
<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div>
        <p id="message">
            <!-- El contenido siguiente se reemplazará con el nombre de usuario cuando ejecute la aplicación; vea App.js -->
            initializing...
        </p>
    </div>

    <label for="title">Título:&nbsp;</label>
<input id="title" type="text" />

    <label for="title">Subtítulo de la noticia:&nbsp;</label>
<input id="subtitle" type="text" />

    <label for="title">Cuerpo:&nbsp;</label>
<textarea id="body" rows="3" cols="30"></textarea>
    


    <button id="submit" >Añadir Nueva Noticia</button>

</asp:Content>

El código de este fichero es muy sencillo, tan solo se ha modificado el mismo para añadir, los inputs que nos van a permitir insertar una nueva noticia y el botón correspondiente y una etiqueta p donde vamos a insertar las listas de forma consecutiva.

Un aspecto que si que es importante está en la línea 18, donde se encuentra la referencia al script RequestExecutor.js con la librería Cross-Domain que vamos a usar para hacer las peticiones con JSOM y API REST.

Código del Fichero App.js

'use strict';

var hostweburl;
var appweburl;

$(document).ready(function () {
    //Get the URI decoded URLs.
    hostweburl =
        decodeURIComponent(
            getQueryStringParameter("SPHostUrl")
    );
    appweburl =
        decodeURIComponent(
            getQueryStringParameter("SPAppWebUrl")
    );

    // resources are in URLs in the form:
    // web_url/_layouts/15/resource
    //var scriptbase = hostweburl + "/_layouts/15/";

    LoadNews(appweburl);

    $("#submit").click(function () {
        var title = $("#title").val();
        var subtitle = $("#subtitle").val();
        var body = $("#body").val();

        var executor = new SP.RequestExecutor(appweburl);

        executor.executeAsync({
            method: "POST",
            url: appweburl + "/_api/web/Lists/GetByTitle('Noticias')/items",
            body: "{'__metadata': {'type': 'SP.Data.NoticiasListItem'},'Title': '" + title + "', 'Subject1': '" + subtitle + "', 'Body1': '" + body + "'}",
            headers: {
                "accept": "application/json;odata=verbose",
                "content-type": "application/json;odata=verbose"
            },
            success: function (data) {
                console.log(data);
                LoadNews(appweburl);
            },
            error: function (data) {
                console.log(data);

            }
        });

        
        return false;
    })
});

function LoadNews(appweburl)
{
    var executor = new SP.RequestExecutor(appweburl);

    executor.executeAsync({
        method: "GET",
        url: appweburl + "/_api/web/Lists/GetByTitle('Noticias')/items",
        headers: { "Accept": "application/json; odata=verbose" },
        success: onLoadSuccess,
        error: onLoadError
    });
}

function onLoadSuccess(data) {
    var jsonObject = JSON.parse(data.body);
    var announcementsHTML = "";

    var results = jsonObject.d.results;
    for (var i = 0; i < results.length; i++) {
        announcementsHTML = announcementsHTML +
            "<p><h1>" + results[i].Title +
            "</h1>" + results[i].Body1 +
            "</p><hr>";
    }

    document.getElementById("message").innerHTML =
        announcementsHTML;
}

function onLoadError() {
    alert("Error loading Data");
}

function getQueryStringParameter(paramToRetrieve) {
    var params =
        document.URL.split("?")[1].split("&");
    var strParams = "";
    for (var i = 0; i < params.length; i = i + 1) {
        var singleParam = params[i].split("=");
        if (singleParam[0] == paramToRetrieve)
            return singleParam[1];
    }
}

En el archivo app.js, para facilitar el desarrollo del código, se usa JQuery. Además, vamos a destacar los siguientes aspectos del mismo:

  • La función LoadNews(), hace una petición REST para obtener las noticias de la lista que se creó anteriormente, y se usa la función onLoadSuccess para leer e imprimir los datos en pantalla
  • En la línea 23, se crea la función que asocia al evento click del botón la solicitud REST para insertar el elemento. Se utiliza el objeto SP.RequestExecutor para hacer la petición
  • La línea 33 también es importante, por medio del parámetro body se le indica a través de JSON, el elemento que se desea añadir. El primer parámetro indica el tipo de dato. Éste, será siempre, dependiendo de la lista, SP.Data.NOMBREDELALISTAListItem.
  • El parámetro url indicará, la dirección de API REST para acceder a los elementos de la lista en donde se quiere añadir el parámetro
  • Como lo que queremos es insertar un elemento, usaremos en esta ocasión como valor del parámetro method de la función POST

Viendo el resultado de la App

Vamos a ver el resultado de probar la App que acabamos de desarrollar.

Captura de pantalla 2015-02-06 a las 0.16.04

A continuación veremos como al pulsar sobre el botón de añadir aparece una nueva noticia en la lista de noticias.

Captura de pantalla 2015-02-06 a las 0.16.24

En el código, cuando la operación se realizaba correctamente, se escribía en consola el resultado de la respuesta. En la siguiente captura lo podéis ver, donde se confirma que la petición devuelve un resultado correcto.

Captura de pantalla 2015-02-06 a las 0.24.00

Y esto es todo por hoy. Espero que os haya resultado interesante como con la API REST se puede, tanto obtener como escribir información en SharePoint. En próximos artículos, quiero centrarme en ejemplos de SharePoint Provider Hosted App y en cómo trabajar con la otra API, CSOM, que me queda por conocer.

Saludos.

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s