Buscar..


Observaciones

Fondo

El modelo de objetos de JavaScript se introdujo en SharePoint 2010. Expone en el lado del cliente muchos de los objetos a los que anteriormente solo se podía acceder a través del código del lado del servidor o a través de servicios web dedicados.

Incrustar JavaScript en las páginas de SharePoint

En SharePoint 2013 puede poner su JavaScript en un elemento web de Script Editor.

En SharePoint 2010, puede usar la propiedad "enlace de contenido" de un elemento web del Editor de contenido para vincularlo a un archivo HTML que contiene su script incrustado.

Referencia de objeto

Los constructores, los métodos y las propiedades de todos los objetos encontrados en el espacio de nombres del SP se documentan en la referencia del modelo de objeto del cliente de SharePoint 2013 aquí .

La referencia del modelo de objeto cliente de SharePoint 2010 JavaScript está disponible aquí .

Patrón de programación asíncrono de JSOM

Cuando se usa el modelo de objeto cliente de JavaScript, el código generalmente toma el siguiente patrón:

  1. Obtener un objeto ClientContext .
  2. Utilice el objeto ClientContext para recuperar objetos que representan entidades en el modelo de objetos de SharePoint, como listas, carpetas, vistas.
  3. Poner en cola las instrucciones a realizar contra los objetos. Estas instrucciones no se transmiten al servidor todavía.
  4. Utilice la función de load para indicar al ClientContext qué información desea recibir del servidor.
  5. Invoque la función ClientContext objeto executeQueryAsync para enviar las instrucciones en cola al servidor, pasando dos funciones de devolución de llamada para que se ejecuten en caso de éxito o fracaso.
  6. En la función de devolución de llamada, trabaje con los resultados devueltos por el servidor.

Alternativas

Las alternativas del lado del cliente al JSOM incluyen servicios web de SharePoint, puntos finales REST y el modelo de objeto de cliente .NET .

Obtención de tipos de contenido de la biblioteca utilizando el nombre de la biblioteca

function getContentTypes(site_url,name_of_the_library){
    var ctx = new SP.ClientContext(site_url);
    var web = ctx.get_web();
    list = web.get_lists().getByTitle(name_of_the_library);

    // You can include any property of the SP.ContentType object (sp.js), for this example we are just getting the name
    ctx.load(list,'ContentTypes.Include(Name)');
    ctx.executeQueryAsync(onQuerySucceeded, onQueryFailed);
}

function onQuerySucceeded(sender, args) {
    // var list is the one that we used in function "getContentTypes"
    var contentTypesEnumerator = (list.get_contentTypes()).getEnumerator();

    while (contentTypesEnumerator.moveNext()) {
        var contentType = contentTypesEnumerator.get_current();
        alert(contentType.get_name());
    }
}

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

Eliminar un elemento en una lista

SP.SOD.executeOrDelayUntilScriptLoaded( function(){ deleteItem(1); }, "sp.js");

function deleteItem(id){
    var clientContext = new SP.ClientContext();
    var list = clientContext.get_web().get_lists().getByTitle("List Title");
    var item = list.getItemById(id);
    item.deleteObject();
    clientContext.executeQueryAsync(function(){
        alert("Item #"+id+" deleted successfully!");
    },function(sender,args){alert(args.get_message());});
}

Creación de elementos o carpetas

Creación de elementos de lista

SP.SOD.executeOrDelayUntilScriptLoaded(createItem,"sp.js");

function createItem(){
    var clientContext = new SP.ClientContext();
    var list = clientContext.get_web().get_lists().getByTitle("List Title");
    var newItem = list.addItem();
    newItem.set_item("Title","Example Title");
    newItem.update();
    clientContext.load(newItem); // only needed to retrieve info from newly created item
    clientContext.executeQueryAsync(function(){
        var itemId = newItem.get_item("ID");
        alert("Item #"+itemId+" Created Successfully!");
    },function(sender,args){
        alert(args.get_message());
    });
}

El ejemplo anterior demuestra que un elemento de lista se crea realizando lo siguiente:

  1. Llame al método addItem de un objeto de lista para obtener un objeto de elemento
  2. Llame al método set_item en el objeto de elemento de lista resultante para establecer cada valor de campo como desee
  3. Llame al método de update en el objeto de elemento de lista para indicar que los cambios se deben confirmar
  4. Llame al método executeQueryAsync del objeto de contexto de cliente para ejecutar las instrucciones en cola

Tenga en cuenta que no necesita pasar el nuevo objeto de elemento al método de load del contexto del cliente para crear el elemento. Ese paso solo es necesario si desea recuperar cualquiera de los valores de campo del elemento desde el servidor.

Creación de carpetas

Crear una carpeta es similar a agregar un elemento a una lista. La diferencia es que primero se debe crear un objeto ListItemCreationInformation y establecer su propiedad underlyingObjectType en SP.FileSystemObjectType.folder , y su propiedad leafName en el nombre deseado de la nueva carpeta.

El objeto se pasa luego como un parámetro en el método addItem en la biblioteca para crear la carpeta.

// ...
var itemCreateInfo = new SP.ListItemCreationInformation();
itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
itemCreateInfo.set_leafName(folderName);
var newItem = list.addItem(itemCreateInfo);
// ...

Para confirmar el cambio, invocar el executeQueryAsync método de la ClientContext objeto a través del cual se accede a la biblioteca.

El ejemplo completo a continuación crea una carpeta con un nombre basado en la marca de tiempo actual, y luego abre esa carpeta en un diálogo modal.

SP.SOD.executeOrDelayUntilScriptLoaded(createFolder,"sp.js");

function createFolder(){
    var now = new Date();
    var timeStamp = now.getYear() + "-" + (now.getMonth()+1) + "-" + now.getDate() 
        + "T" + now.getHours()+"_"+now.getMinutes()+" "+now.getSeconds()+"_"+now.getMilliseconds();
    var clientContext = new SP.ClientContext();
    var list = clientContext.get_web().get_lists().getByTitle("Library Title");
    var itemCreateInfo = new SP.ListItemCreationInformation();
    itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
    itemCreateInfo.set_leafName(timeStamp);
    var newItem = list.addItem(itemCreateInfo);
    newItem.update();
    clientContext.load(newItem);
    var rootFolder = list.get_rootFolder(); // Note: use a list's root folder to determine its server relative URL
    clientContext.load(rootFolder);
    clientContext.executeQueryAsync(function(){
        var itemId = newItem.get_item("ID");
        var name = newItem.get_item("FileLeafRef");
        SP.UI.ModalDialog.showModalDialog(
            { 
                title: "Folder \""+name+"\" (#"+itemId+") Created Successfully!", 
                url: rootFolder.get_serverRelativeUrl() + "/" + name
            }
        ); 
    },function(sender,args){alert(args.get_message());});
}

Obtener información actual del usuario

SP.SOD.executeOrDelayUntilScriptLoaded(showUserInfo,"sp.js");

function showUserInfo(){
    var clientContext = new SP.ClientContext();
    var user = clientContext.get_web().get_currentUser();
    clientContext.load(user);
    clientContext.executeQueryAsync(function(){
            var details = "ID: "+user.get_id()+"\n"+
                "Title: "+user.get_title()+"\n"+
                "Login: "+user.get_loginName()+"\n"+
                "Email: "+user.get_email();
            alert(details);
        },function(sender,args){alert(args.get_message());})
}

Obtener un elemento de lista por ID

SP.SOD.executeOrDelayUntilScriptLoaded(myFunction,"sp.js");

function myFunction(){
    var clientContext = new SP.ClientContext();
    var list = clientContext.get_web().get_lists().getByTitle("List Title");
    var item = list.getItemById(1); // get item with ID == 1
    clientContext.load(item);
    clientContext.executeQueryAsync(
        function(){ // onSuccess
            var title = item.get_item("Title");
            alert(title);
        },
        function(sender,args){ // onError
            alert(args.get_message());
        }
    );
}

Obtener elementos de lista por consulta CAML

Ejemplo básico

Usar la set_viewXml método del objeto SP.CamlQuery para especificar una consulta CAML para recuperar elementos.

SP.SOD.executeOrDelayUntilScriptLoaded(showListItems,"core.js");

function showListItems(){
    var clientContext = new SP.ClientContext();
    var list = clientContext.get_web().get_lists().getByTitle("List Title");
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(
        "<View><Query>" +
            "<Where>" +
                "<Eq><FieldRef Name=\"Title\"/><Value Type=\"Text\">Value</Value></Eq>" + 
            "</Where>" +
            "<OrderBy><FieldRef Name=\"Modified\" Ascending=\"FALSE\"/></OrderBy>" +
        "</Query>"+
        //"<RowLimit>5000</RowLimit>" +
        "</View>");
    var items = list.getItems(camlQuery);
    clientContext.load(items);
    clientContext.executeQueryAsync(function(){
        var itemArray = [];
        var itemEnumerator = items.getEnumerator();
        while(itemEnumerator.moveNext()){
            var item = itemEnumerator.get_current();
            var id = item.get_item("ID");
            var title = item.get_item("Title");
            itemArray.push(id + ": " + title);
        }
        alert("ID: Title\n"+itemArray.join("\n"));
    },function(sender,args){alert(args.get_message());});
}

Paginar los resultados de una consulta CAML

Puede aprovechar el elemento RowLimit en una consulta CAML para recuperar solo un subconjunto de resultados con cada consulta.

Utilice el método get_listItemCollectionPosition de una colección de elementos de lista para recuperar la posición actual, luego use ese valor como el parámetro en el método set_listItemCollectionPosition un objeto set_listItemCollectionPosition para recuperar el siguiente lote de resultados.

SP.SOD.executeOrDelayUntilScriptLoaded(showListItems,"sp.js");

function showListItems(){
    var itemArray = [];
    var clientContext = new SP.ClientContext();
    var list = clientContext.get_web().get_lists().getByTitle("List Title");
    var viewXml = 
        "<View><Query>" +
            "<OrderBy><FieldRef Name=\"Modified\" Ascending=\"FALSE\"/></OrderBy>" +
        "</Query>"+
          "<RowLimit>1</RowLimit>" +
        "</View>";
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(viewXml);            
    var items = list.getItems(camlQuery);
    clientContext.load(items);
    clientContext.executeQueryAsync(loadResults,showError);

    function loadResults(){
        var resultsFound = false;            
        var itemEnumerator = items.getEnumerator();
        while(itemEnumerator.moveNext()){
            var item = itemEnumerator.get_current();
            var id = item.get_item("ID");
            var title = item.get_item("Title");
            itemArray.push(id + ": " + title);
        }
        var pos = items.get_listItemCollectionPosition();// <- get position
        if(pos !== null){ // <-- position is null when no more results are returned
            if(confirm("Results so far: \nID: Title\n"+itemArray.join("\n"))){
                camlQuery = new SP.CamlQuery();
                camlQuery.set_listItemCollectionPosition(pos);// <- set position for next batch
                camlQuery.set_viewXml(viewXml);            
                items = list.getItems(camlQuery);
                clientContext.load(items);
                clientContext.executeQueryAsync(loadResults,showError);
            }
        }else{
            alert("Total Results: \nID: Title\n"+itemArray.join("\n")); // <- display when no more results
        }
    }
    function showError(sender,args){
        alert(args.get_message());
    }
}


Modified text is an extract of the original Stack Overflow Documentation
Licenciado bajo CC BY-SA 3.0
No afiliado a Stack Overflow