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
ClientContext
objekt. - Använd
ClientContext
objektet 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
load
att berätta förClientContext
vilken information du vill få tillbaka från servern. -
ClientContext
objektetsexecuteQueryAsync
funktion 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
addItem
för ettaddItem
för att få ett objektobjekt - Ring metoden
set_item
på det resulterande listobjektet för att ställa in varje fältvärde efter önskemål - Ring
update
i listobjektet för att indikera att ändringarna ska genomföras - Ring metoden
executeQueryAsync
fö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());
}
}