sharepoint
Werken met JavaScript Client Object Model (JSOM)
Zoeken…
Opmerkingen
Achtergrond
Het JavaScript Object Model is geïntroduceerd in SharePoint 2010. Aan de clientzijde zijn veel van de objecten zichtbaar die voorheen alleen toegankelijk waren via server-side code of via speciale webservices.
JavaScript insluiten in SharePoint-pagina's
In SharePoint 2013 kunt u uw JavaScript in een webonderdeel van Script Editor plaatsen.
In SharePoint 2010 kunt u de eigenschap "contentlink" van een webonderdeel Content Editor gebruiken om te linken naar een HTML-bestand dat uw ingesloten script bevat.
Object referentie
De constructors, werkwijzen en eigenschappen van alle objecten in de SP
naamruimte worden beschreven in de SharePoint 2013 cliëntobject model en hier .
De referentie van het SharePoint 2010 JavaScript-clientobjectmodel is hier beschikbaar.
Asynchroon programmeerpatroon van JSOM
Bij het gebruik van het JavaScript-clientobjectmodel heeft code doorgaans het volgende patroon:
- Verkrijg een
ClientContext
object. - Gebruik het
ClientContext
object om objecten op te halen die entiteiten in het SharePoint-objectmodel vertegenwoordigen, zoals lijsten, mappen en views. - Wachtrij-instructies die tegen de objecten moeten worden uitgevoerd. Deze instructies worden nog niet naar de server verzonden.
- Gebruik de
load
omClientContext
te vertellen welke informatie u van de server wilt ontvangen. - Roep de
ClientContext
objectexecuteQueryAsync
functie om de wachtrij staan instructies te sturen naar de server, langs twee callback-functies uit te voeren op het succes of falen. - Werk in de callback-functie met de resultaten die door de server zijn geretourneerd.
alternatieven
Alternatieven aan de clientzijde voor de JSOM zijn de webservices van SharePoint, REST-eindpunten en het .NET- clientobjectmodel.
Bibliotheekinhoudstypen verkrijgen met behulp van de bibliotheeknaam
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());
}
Verwijder een item in een lijst
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());});
}
Items of mappen maken
Lijstitems maken
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());
});
}
Het bovenstaande voorbeeld laat zien dat een lijstitem wordt gemaakt door het volgende uit te voeren:
- Roep de
addItem
methode van eenaddItem
aan om eenaddItem
te krijgen - Roep de methode
set_item
op het resulterende lijstitemobject aan om elke veldwaarde naar wens in te stellen - Roep de
update
op het lijstitemobject aan om aan te geven dat de wijzigingen moeten worden doorgevoerd - Roep de methode
executeQueryAsync
van het clientcontextobject aan om de instructies in de wachtrij uit te voeren
Merk op dat u niet nodig om het nieuwe item object doorgeven aan de klant de context van load
methode om het item te maken. Die stap is alleen nodig als u de veldwaarden van het item van de server wilt ophalen.
Mappen maken
Een map maken lijkt op het toevoegen van een item aan een lijst. Het verschil is dat men eerst een ListItemCreationInformation
object moet maken en zijn underlyingObjectType
eigenschap moet SP.FileSystemObjectType.folder
op SP.FileSystemObjectType.folder
en de eigenschap leafName
op de gewenste naam van de nieuwe map.
Het object wordt vervolgens doorgegeven als parameter in de methode addItem
in de bibliotheek om de map te maken.
// ...
var itemCreateInfo = new SP.ListItemCreationInformation();
itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
itemCreateInfo.set_leafName(folderName);
var newItem = list.addItem(itemCreateInfo);
// ...
Om de wijziging door te voeren, roept u de methode executeQueryAsync
van het ClientContext
object waarmee de bibliotheek is geopend.
Het volledige voorbeeld hieronder maakt een map met een naam op basis van de huidige tijdstempel en opent die map vervolgens in een modaal dialoogvenster.
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());});
}
Ontvang huidige gebruikersinformatie
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());})
}
Ontvang een lijstitem op 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());
}
);
}
Lijstitems ophalen via CAML-zoekopdracht
Basis voorbeeld
Gebruik de methode set_viewXml
van het SP.CamlQuery-object om een CAML-query op te geven om items op te halen.
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());});
}
Oproepen van de resultaten van een CAML-zoekopdracht
U kunt profiteren van het RowLimit
element in een CAML-query om bij elke query slechts een subset resultaten op te halen.
Gebruik de methode get_listItemCollectionPosition
van een lijstitemverzameling om de huidige positie op te halen en gebruik vervolgens die waarde als parameter in de methode set_listItemCollectionPosition
een SP.CamlQuery-object om de volgende batch met resultaten op te halen.
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());
}
}