5 - Agenda

Agenda sesión #5

1 - Resumen de lo visto hasta ahora (20')
2 - Procedimiento para realizar operaciones básicas con JavaScript en SharePoint 2013 (100')

Break

3 - App Contoso (Provider Hosted-App). Uso de Azure (120')

5.2.8.3 - Eliminar un elemento de lista

Eliminar un elemento de lista

Para eliminar un elemento de lista, se llama a la función deleteObject() del objeto. En el siguiente ejemplo se usa la función getItemById(id) para devolver el segundo elemento de la lista y luego se elimina el elemento.

SharePoint mantiene los identificadores de enteros de los elementos dentro de las colecciones aunque se hayan eliminado.

Por ejemplo, el segundo elemento de una lista podría no tener el 2 como identificador. Si se llama a la función deleteObject() para un elemento que no existe, se devuelve la excepción ServerException.

function deleteListItem(siteUrl) {
    this.itemId = 2;
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');
    this.oListItem = oList.getItemById(itemId);
    oListItem.deleteObject();

    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded() {
    alert('Item deleted: ' + itemId);
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

Por ejemplo, si desea recuperar el nuevo recuento de elementos que resulta de una operación de eliminación, se incluye una llamada al método update() para actualizar la lista. Además, debe cargar el objeto de lista en sí o la propiedad itemCount en el objeto de lista antes de ejecutar la consulta. Si desea recuperar un recuento de inicio y finalización de los elementos de lista, debe ejecutar dos consultas y devolver el recuento de elemento dos veces, tal como se muestra en la modificación siguiente del ejemplo anterior.

function deleteListItemDisplayCount(siteUrl) {
    this.clientContext = new SP.ClientContext(siteUrl);
    this.oList = clientContext.get_web().get_lists()
                         .getByTitle('Announcements');
    clientContext.load(oList);

    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.deleteItem), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function deleteItem() {
    this.itemId = 58;
    this.startCount = oList.get_itemCount();
    this.oListItem = oList.getItemById(itemId);
    oListItem.deleteObject();

    oList.update();
    clientContext.load(oList);
        
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.displayCount), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function displayCount() {
    var endCount = oList.get_itemCount();
    var listItemInfo = 'Item deleted: ' + itemId + 
        '\nStart Count: ' +  startCount + 
        ' End Count: ' + endCount;
        
    alert(listItemInfo)
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

5.2.8.2 - Actualizar un elemento de lista

Actualizar un elemento de lista

Para establecer la mayoría de las propiedades del elemento de lista, se puede usar un indizador de columna para realizar una asignación y llamar a la función update() para que los cambios se realicen al llamar a executeQueryAsync(succeededCallback, failedCallback).

En el ejemplo siguiente se establece el título del tercer elemento de la lista de anuncios.

function updateListItem(siteUrl) {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');

    this.oListItem = oList.getItemById(3);
    oListItem.set_item('Title', 'My Updated Title');
    oListItem.update();

    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded() {
    alert('Item updated!');
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

5.2.8.1 - Crear, actualizar y eliminar elementos de lista

Crear, actualizar y eliminar elementos de lista

La creación, actualización o eliminación de elementos de lista mediante el modelo de objetos de cliente funciona de forma similar a la realización de tareas mediante el modelo de objetos de servidor. Se crea un objeto de elemento de lista, se establecen sus propiedades y, a continuación, se actualiza el objeto.

Para modificar o eliminar un objeto de elemento de lista, se usa la función getById(id) del objeto ListItemCollection para devolver el objeto y, a continuación, se establecen las propiedades y llame a la actualización del objeto que devuelve este método o llame al propio método del objeto para eliminarlo. A diferencia del modelo de objetos de servidor, cada una de estas operaciones en el modelo de objetos de cliente debe concluir con una llamada a executeQueryAsync(succeededCallback, failedCallback) para realizar los cambios en el servidor.

Crear un elemento de lista

Para crear elementos de lista, debe crear un objeto ListItemCreationInformation, establecer sus propiedades y pasarlo como parámetro a la función addItem(parameters) del objeto List. Establezca las propiedades en el objeto de elemento de lista que este método devuelve y luego llame a la función update(), como se ve en el ejemplo siguiente.

function createListItem(siteUrl) {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');
        
    var itemCreateInfo = new SP.ListItemCreationInformation();
    this.oListItem = oList.addItem(itemCreateInfo);
    oListItem.set_item('Title', 'My New Item!');
    oListItem.set_item('Body', 'Hello World!');
    oListItem.update();

    clientContext.load(oListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded() {
    alert('Item created: ' + oListItem.get_id());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

5.2.7.2 - Tareas de elementos de lista de SharePoint

Usar el método Include para obtener acceso a propiedades de objetos ListItem

Hay 4 propiedades de objetos ListItem que no están disponibles de forma predeterminada al devolver elementos de lista: displayName, effectiveBasePermissions, hasUniqueRoleAssignments y roleAssignments. El ejemplo anterior devuelve una excepción PropertyOrFieldNotInitializedException si trata de obtener acceso a una de estas propiedades. Para obtener acceso a una de estas propiedades, se debe usar el método Include como parte de la cadena de la consulta, como se muestra en el siguiente ejemplo.

Nota

Al usar LINQ para crear consultas respecto del modelo de objetos de cliente, se utiliza LINQ to Objects, y no el proveedor LINQ to SharePoint, que solo se puede usar cuando se escribe código respecto al modelo de objetos de servidor.

function retrieveListItemsInclude(siteUrl) {

    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><RowLimit>100</RowLimit></View>');
    this.collListItem = oList.getItems(camlQuery);

    clientContext.load(
        collListItem, 
        'Include(Id, DisplayName, HasUniqueRoleAssignments)'
    );
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    );
}

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
        
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += '\nID: ' + oListItem.get_id() + 
            '\nDisplay name: ' + oListItem.get_displayName() + 
            '\nUnique role assignments: ' + 
            oListItem.get_hasUniqueRoleAssignments();
    }

    alert(listItemInfo.toString());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

Dado que en este ejemplo se usa Include, solo las propiedades especificadas estarán disponibles después de la ejecución de la consulta. Por lo tanto, recibirá una excepciónPropertyOrFieldNotInitializedException si trata de obtener acceso a otras propiedades además de las que se especificaron. Además, se recibirá este error si se trata de usar propiedades como get_contentType o get_parentList para obtener acceso a las propiedades de los objetos que contienen.

5.2.7.1 - Tareas de elementos de lista de SharePoint

Tareas de elementos de lista de SharePoint

Para devolver elementos de una lista con JavaScript, se usa la función getItemById(id) para devolver un solo elemento o use la función getItems(query) para devolver varios elementos. Luego se usa la función load(clientObject) para alcanzar los objetos de elemento de lista que representan los elementos.

Recuperar elementos de una lista

La función getItems(query) permite definir una consulta Lenguaje de marcado de aplicaciones de colaboración (CAML) que especifique qué elementos se van a devolver. Puede pasar un objeto CamlQuery no definido para devolver todos los elementos de la lista, o bien usar la función set_viewXml para definir una consulta CAML y devolver los elementos que cumplan con criterios específicos.

En el siguiente ejemplo se muestran los valores de columna Identificador, Título y Cuerpo de los primeros 10 elementos de la lista Anuncios, empezando por los elementos de lista cuyo identificador de colección es mayor que 1.

function retrieveListItems(siteUrl) {
    var clientContext = new SP.ClientContext(siteUrl);
    var oList = clientContext.get_web().get_lists().getByTitle('Announcements');
        
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(
        '<View><Query><Where><Geq><FieldRef Name=\'ID\'/>' + 
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query>' + 
        '<RowLimit>10</RowLimit></View>'
    );
    this.collListItem = oList.getItems(camlQuery);
        
    clientContext.load(collListItem);
    clientContext.executeQueryAsync(
        Function.createDelegate(this, this.onQuerySucceeded), 
        Function.createDelegate(this, this.onQueryFailed)
    ); 
}

function onQuerySucceeded(sender, args) {
    var listItemInfo = '';
    var listItemEnumerator = collListItem.getEnumerator();
        
    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += '\nID: ' + oListItem.get_id() + 
            '\nTitle: ' + oListItem.get_item('Title') + 
            '\nBody: ' + oListItem.get_item('Body');
    }

    alert(listItemInfo.toString());
}

function onQueryFailed(sender, args) {
    alert('Request failed. ' + args.get_message() + 
        '\n' + args.get_stackTrace());
}

5.2.6.2 - Crear, leer, actualizar y eliminar archivos

Leer un archivo de una biblioteca de documentos

Para leer el contenido de un archivo, se debe realizar una operación GET en la dirección URL del archivo, como se ve en el ejemplo siguiente.

function readFile(resultpanel) {
    var clientContext;
    var oWebsite;
    var fileUrl;

    clientContext = new SP.ClientContext.get_current();
    oWebsite = clientContext.get_web();

    clientContext.load(oWebsite);
    clientContext.executeQueryAsync(function () {
        fileUrl = oWebsite.get_serverRelativeUrl() +
            "/Lists/Shared Documents/TextFile1.txt";
        $.ajax({
            url: fileUrl,
            type: "GET"
        })
            .done(Function.createDelegate(this, successHandler))
            .error(Function.createDelegate(this, errorHandler));
    }, errorHandler);

    function successHandler(data) {
        resultpanel.innerHTML =
            "The content of file \"TextFile1.txt\": " + data
    }

    function errorHandler() {
        resultpanel.innerHTML =
            "Request failed: " + arguments[2];
    }
}