sharepoint
Lavorare con JavaScript Client Object Model (JSOM)
Ricerca…
Osservazioni
sfondo
Il modello di oggetti JavaScript è stato introdotto in SharePoint 2010. Espone sul lato client molti degli oggetti che in precedenza erano accessibili solo attraverso il codice lato server o tramite servizi Web dedicati.
Incorporamento di JavaScript nelle pagine di SharePoint
In SharePoint 2013 è possibile inserire il codice JavaScript in una web part Script Editor.
In SharePoint 2010 è possibile utilizzare la proprietà "collegamento contenuto" di una web part Editor contenuto per collegarsi a un file HTML che contiene lo script incorporato.
Riferimento dell'oggetto
I costruttori, i metodi e le proprietà di tutti gli oggetti trovati nello spazio dei nomi SP
sono documentati nel riferimento del modello di oggetto client SharePoint 2013 qui .
Il riferimento del modello di oggetto client JavaScript di SharePoint 2010 è disponibile qui .
Pattern di programmazione asincrona di JSOM
Quando si utilizza il modello di oggetto client JavaScript, il codice generalmente ha il seguente schema:
- Ottenere un oggetto
ClientContext
. - Utilizzare l'oggetto
ClientContext
per recuperare oggetti che rappresentano entità nel modello di oggetti di SharePoint, come elenchi, cartelle, viste. - Accodare le istruzioni da eseguire rispetto agli oggetti. Queste istruzioni non sono ancora state trasmesse al server.
- Utilizzare la funzione di
load
per comunicare aClientContext
quali informazioni si desidera ricevere dal server. - Richiamare la funzione
ClientContext
dell'oggettoexecuteQueryAsync
per inviare le istruzioni in coda al server, passando due funzioni di callback per l'esecuzione in caso di esito positivo o negativo. - Nella funzione di callback, lavorare con i risultati restituiti dal server.
alternative
Le alternative lato client di JSOM includono i servizi Web di SharePoint, gli endpoint REST e il modello di oggetto client .NET .
Ottenere i tipi di contenuto della libreria usando il nome della libreria
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());
}
Elimina un elemento in un elenco
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());});
}
Creazione di elementi o cartelle
Creazione di voci di elenco
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());
});
}
L'esempio sopra mostra che una voce di elenco viene creata eseguendo quanto segue:
- Chiama il metodo
addItem
di un oggetto lista per ottenere un oggetto oggetto - Chiamare il metodo
set_item
sull'oggetto item dell'elenco risultante per impostare ogni valore di campo come desiderato - Chiamare il metodo di
update
sull'oggetto dell'elenco per indicare che le modifiche devono essere eseguite - Chiamare il metodo
executeQueryAsync
dell'oggetto contesto client per eseguire le istruzioni in coda
Si noti che non è necessario passare il nuovo oggetto oggetto al metodo di load
del contesto del client per creare l'elemento. Questo passaggio è necessario solo se si desidera recuperare uno dei valori del campo dell'articolo dal server.
Creazione di cartelle
La creazione di una cartella è simile all'aggiunta di un elemento a un elenco. La differenza è che bisogna prima creare un oggetto ListItemCreationInformation
e impostare la proprietà underlyingObjectType
su SP.FileSystemObjectType.folder
e la proprietà leafName
sul nome desiderato della nuova cartella.
L'oggetto viene quindi passato come parametro nel metodo addItem
sulla libreria per creare la cartella.
// ...
var itemCreateInfo = new SP.ListItemCreationInformation();
itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
itemCreateInfo.set_leafName(folderName);
var newItem = list.addItem(itemCreateInfo);
// ...
Per executeQueryAsync
la modifica, richiamare il metodo ClientContext
dell'oggetto ClientContext
tramite il quale è stata ClientContext
l' ClientContext
alla libreria.
L'esempio completo di seguito crea una cartella con un nome basato sul timestamp corrente, quindi apre quella cartella in una finestra di dialogo modale.
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());});
}
Ottieni informazioni utente correnti
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());})
}
Ottieni un elemento della lista per 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());
}
);
}
Ottieni elementi della lista tramite CAML Query
Esempio di base
Utilizzare il set_viewXml
metodo dell'oggetto SP.CamlQuery per specificare una query CAML per recuperare gli elementi.
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());});
}
Paging i risultati di una query CAML
È possibile sfruttare l'elemento RowLimit
in una query CAML per recuperare solo un sottoinsieme di risultati con ciascuna query.
Utilizzare il metodo get_listItemCollectionPosition
di una raccolta di voci di elenco per recuperare la posizione corrente, quindi utilizzare tale valore come parametro in un metodo set_listItemCollectionPosition dell'oggetto set_listItemCollectionPosition
per recuperare il successivo batch di risultati.
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());
}
}