2.5.7 - Incorporar el código para los elementos

Incorporar el código para los elementos

1. Seleccionar el archivo App.js para editarlo
2. En la función Ready(), incluir la definición para las funciones que serán llamadas cuando el usuario presione los botones Crear Elemento y Eliminar Elemento. Además, incluiremos un manejador de eventos jQuery para que la Lista de elementos se actualice cuando se seleccione una nueva lista.

$("#createitembutton").click(function (event) {

            createitem();

            event.preventDefault();

        });

        $("#deleteitembutton").click(function (event) {

            deleteitem();

            event.preventDefault();

        });

    

        // Actualiza el listado de elementos cuando 

        // una nueva lista es seleccionada.

        $("#selectlistbox").change(function (event) {

            getitems();

            event.preventDefault();

        });

A continuación, incluiremos el código JavaScript para las funciones definidas y generaremos una función adicional (getItems()) que servirá para encapsular la funcionalidad:

• createItem(): Incorpora un elemento a la lista seleccionada por el usuario, y le setea el nombre al elemento que le especifique el usuario en el cuadro de texto Elemento.
• deleteItem(): Elimina el elemento seleccionado por el usuario de la lista.
• getItems(): Obtiene el listado de los elementos en la lista seleccionada por el usuario

• createItem

// createitem y sus manejadores de evento

function createitem() {

    // Obtiene la lista seleccionada por el usuario, e incorpora un elemento.

    var selectListBox = document.getElementById("selectlistbox");

    var selectedListTitle = selectListBox.value;

    var selectedList = web.get_lists().getByTitle(selectedListTitle);

    var listItemCreationInfo = new SP.ListItemCreationInformation();

    var newItem = selectedList.addItem(listItemCreationInfo);

    var listItemTitle = document.getElementById("createitembox").value;

    newItem.set_item('Title', listItemTitle);

    newItem.update();

    context.load(newItem);

    context.executeQueryAsync(onItemCreationSuccess, onItemCreationFail);

}

function onItemCreationSuccess() {

    // Refresta la lista de elementos.

    getitems();

}

function onItemCreationFail(sender, args) {

    // El elemnto no pudo ser creado – muestra el error

    alert('Error al crear el elemento. ' + args.get_message());

}

• deleteItem

// deleteitem y sus manejadores de evento

function deleteitem() {

   // Elimina el elemento seleccionado por el usuario.

   var selectListBox = document.getElementById("selectlistbox");

   var selectedListTitle = selectListBox.value;

   var selectedList = web.get_lists().getByTitle(selectedListTitle);

   var selectItemBox = document.getElementById("selectitembox");

   var selectedItemID = selectItemBox.value;

   var selectedItem = selectedList.getItemById(selectedItemID);

   selectedItem.deleteObject();

   selectedList.update();

   context.load(selectedList);

   context.executeQueryAsync(onDeleteItemSuccess, onDeleteItemFail);

}

function onDeleteItemSuccess() {

   // Refresca la lista de elementos

   getitems();

}

function onDeleteItemFail(sender, args) {

   // El elemento no pudo ser borrado

   alert('Error al borrar el elemento. ' + args.get_message());

}

• getItems

// getitems y sus manejadores de eventos

function getitems() {

   // Utilizando una CAML Query, obtener los elementos en la lista seleccionada por el usaurio

// y setea el contexto a la colección de de los elementos de la lista

   var selectListBox = document.getElementById("selectlistbox");

   var selectedList = selectListBox.value;

   var selectedListTitle = web.get_lists().getByTitle(selectedList);  

   var camlQuery = new SP.CamlQuery();

   camlQuery.set_viewXml("<View><ViewFields>" +

       "<FieldRef Name='ID' />" +

       "<FieldRef Name='Title' />" +

       "</ViewFields></View>')");

   listItemCollection = selectedListTitle.getItems(camlQuery);

   context.load(listItemCollection, "Include(Title, ID)");

   context.executeQueryAsync(onGetItemsSuccess, onGetItemsFail);

}

function onGetItemsSuccess(sender, args) {

   // Los elementos pudieron ser obtenidos

   // Mostrar los elementos que la componen

   var listItemEnumerator = listItemCollection.getEnumerator();

   var selectItemBox = document.getElementById("selectitembox");

   if (selectItemBox.hasChildNodes()) {

       while (selectItemBox.childNodes.length >= 1) {

    selectItemBox.removeChild(selectItemBox.firstChild);

       }

   }

       while (listItemEnumerator.moveNext()) {

           var selectOption = document.createElement("option");

           selectOption.value = listItemEnumerator.get_current().get_item('ID');

           selectOption.innerHTML = listItemEnumerator.get_current().get_item('Title');

           selectItemBox.appendChild(selectOption);

       }

}

function onGetItemsFail(sender, args) {

   // La lista no pudo ser obtenida

   alert('Error al obtener la lista. Error: ' + args.get_message());

}