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
ClientContextobject. - Gebruik het
ClientContextobject 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
loadomClientContextte vertellen welke informatie u van de server wilt ontvangen. - Roep de
ClientContextobjectexecuteQueryAsyncfunctie 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
addItemmethode van eenaddItemaan om eenaddItemte krijgen - Roep de methode
set_itemop het resulterende lijstitemobject aan om elke veldwaarde naar wens in te stellen - Roep de
updateop het lijstitemobject aan om aan te geven dat de wijzigingen moeten worden doorgevoerd - Roep de methode
executeQueryAsyncvan 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());
}
}