sharepoint
Trabajar con JavaScript Client Object Model (JSOM)
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:
- Obtener un objeto
ClientContext
. - Utilice el objeto
ClientContext
para recuperar objetos que representan entidades en el modelo de objetos de SharePoint, como listas, carpetas, vistas. - Poner en cola las instrucciones a realizar contra los objetos. Estas instrucciones no se transmiten al servidor todavía.
- Utilice la función de
load
para indicar alClientContext
qué información desea recibir del servidor. - Invoque la función
ClientContext
objetoexecuteQueryAsync
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. - 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:
- Llame al método
addItem
de un objeto de lista para obtener un objeto de elemento - Llame al método
set_item
en el objeto de elemento de lista resultante para establecer cada valor de campo como desee - Llame al método de
update
en el objeto de elemento de lista para indicar que los cambios se deben confirmar - 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());
}
}