sharepoint
Arbeta med JavaScript Client Object Model (JSOM)
Sök…
Anmärkningar
Bakgrund
JavaScript-objektmodellen introducerades i SharePoint 2010. Den avslöjar på klientsidan många av de objekt som tidigare bara var tillgängliga via serversidan eller via dedikerade webbtjänster.
Bädda in JavaScript i SharePoint-sidor
I SharePoint 2013 kan du lägga till din JavaScript i en webbdel för Script Editor.
I SharePoint 2010 kan du använda egenskapen "innehållslänk" i en innehållsredigeringswebdel för att länka till en HTML-fil som innehåller ditt inbäddade skript.
Objektreferens
Konstruktörer, metoder och egenskaper för alla objekt som finns i SP namnutrymmet dokumenteras i SharePoint 2013-klientobjektmodellreferensen här .
Referensmodellen för JavaScript-klientobjekt för SharePoint 2010 finns här .
JSOMs asynkrona programmeringsmönster
När du använder JavaScript-klientobjektmodellen tar koden i allmänhet följande mönster:
- Skaffa ett
ClientContextobjekt. - Använd
ClientContextobjektet för att hämta objekt som representerar enheter i SharePoint-objektmodellen, till exempel listor, mapp, vyer. - Köa instruktioner som ska utföras mot föremålen. Dessa instruktioner skickas inte till servern än.
- Använd
loadatt berätta förClientContextvilken information du vill få tillbaka från servern. -
ClientContextobjektetsexecuteQueryAsyncfunktion för att skicka instruktionerna i kö till servern och överföra två återuppringningsfunktioner för att köra framgång eller misslyckande. - I återuppringningsfunktionen arbetar du med resultaten som returnerats från servern.
alternativ
Alternativ på klientsidan till JSOM inkluderar SharePoints webbtjänster, REST-slutpunkter och .NET-klientobjektmodellen .
Få biblioteksinnehållstyper med bibliotekets namn
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());
}
Radera ett objekt i en 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());});
}
Skapa objekt eller mappar
Skapa listobjekt
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());
});
}
Exemplet ovan visar att ett listobjekt skapas genom att utföra följande:
- Ring metoden
addItemför ettaddItemför att få ett objektobjekt - Ring metoden
set_itempå det resulterande listobjektet för att ställa in varje fältvärde efter önskemål - Ring
updatei listobjektet för att indikera att ändringarna ska genomföras - Ring metoden
executeQueryAsyncför klientens sammanhangsobjekt för att köra instruktionerna i kö
Observera att du inte behöver skicka det nya objektobjektet till klientkontextens load för att skapa objektet. Det steget är bara nödvändigt om du vill hämta något av artikelns fältvärden från servern.
Skapa mappar
Att skapa en mapp liknar det att lägga till ett objekt i en lista. Skillnaden är att man först måste skapa ett ListItemCreationInformation objekt och ställa dess underlyingObjectType egenskap till SP.FileSystemObjectType.folder och dess egendom leafName till önskat namn på den nya mappen.
Objektet skickas sedan som en parameter i addItem metoden i biblioteket för att skapa mappen.
// ...
var itemCreateInfo = new SP.ListItemCreationInformation();
itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
itemCreateInfo.set_leafName(folderName);
var newItem = list.addItem(itemCreateInfo);
// ...
För att genomföra ändringen påkallar du executeQueryAsync metoden för ClientContext objektet genom vilket biblioteket åtkom.
Det fullständiga exemplet nedan skapar en mapp med ett namn baserat på den aktuella tidsstämpeln och öppnar sedan den mappen i en modal dialog.
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());});
}
Få aktuell användarinformation
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());})
}
Skaffa en listobjekt efter 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());
}
);
}
Hämta listobjekt av CAML Query
Grundläggande exempel
Använd metoden set_viewXml i SP.CamlQuery-objektet för att ange en CAML-fråga för att hämta objekt.
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());});
}
Sökning av resultaten från en CAML-fråga
Du kan dra fördel av RowLimit elementet i en CAML-fråga för att bara hämta en delmängd resultat med varje fråga.
Använd metoden get_listItemCollectionPosition i en get_listItemCollectionPosition för att hämta den aktuella positionen, använd sedan det värdet som parameter i ett SP.CamlQuery-objektets set_listItemCollectionPosition metod för att hämta nästa resultatgrupp.
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());
}
}