sharepoint
Arbeiten mit JavaScript Client Object Model (JSOM)
Suche…
Bemerkungen
Hintergrund
Das JavaScript-Objektmodell wurde in SharePoint 2010 eingeführt. Es macht auf Clientseite viele Objekte verfügbar, auf die zuvor nur durch serverseitigen Code oder über dedizierte Webdienste zugegriffen werden konnte.
Einbetten von JavaScript in SharePoint-Seiten
In SharePoint 2013 können Sie Ihr JavaScript in einem Skript-Editor-Webpart einfügen.
In SharePoint 2010 können Sie die Eigenschaft "Content Link" eines Content Editor-Webparts verwenden, um eine Verknüpfung zu einer HTML-Datei herzustellen, die Ihr eingebettetes Skript enthält.
Objektreferenz
Die Konstrukteure, Methoden und Eigenschaften aller Objekte in dem gefundenen SP
- Namespace in der Sharepoint 2013 - Clientobjektmodell Referenz dokumentieren hier .
Die Referenz zum SharePoint 2010-JavaScript-Clientobjektmodell ist hier verfügbar.
Das asynchrone Programmiermuster von JSOM
Bei der Verwendung des JavaScript-Clientobjektmodells folgt Code im Allgemeinen dem folgenden Muster:
-
ClientContext
Sie einClientContext
Objekt. - Verwenden Sie das
ClientContext
Objekt, um Objekte abzurufen, die Entitäten im SharePoint-Objektmodell darstellen, z. B. Listen, Ordner und Ansichten. - Warteschlangenanweisungen für die Objekte. Diese Anweisungen werden noch nicht an den Server übermittelt.
- Verwenden Sie die
load
Funktion sagenClientContext
, welche Informationen Sie vom Server empfangen möchten. - Rufen Sie das
ClientContext
ObjektexecuteQueryAsync
Funktion , um die Warteschlangen Anweisungen an den Server zu senden, vorbei an zwei Callback - Funktionen auf Erfolg oder Misserfolg laufen. - Arbeiten Sie in der Rückruffunktion mit den vom Server zurückgegebenen Ergebnissen.
Alternativen
Zu den clientseitigen Alternativen zu JSOM gehören die Webdienste, REST-Endpunkte von SharePoint und das .NET- Clientobjektmodell.
Bibliotheksinhaltstypen über den Bibliotheksnamen abrufen
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());
}
Löschen Sie ein Element in einer Liste
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());});
}
Erstellen von Elementen oder Ordnern
Listenelemente erstellen
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());
});
}
Das obige Beispiel zeigt, dass ein Listenelement mit den folgenden Schritten erstellt wird:
- Rufen Sie die
addItem
Methode einesaddItem
auf, um einaddItem
- Rufen Sie die Methode
set_item
für das resultierende Listenelementobjekt auf, um jedenset_item
wie gewünschtset_item
- Rufen Sie die
update
für das Listenelementobjekt auf, um anzugeben, dass die Änderungen festgeschrieben werden sollen - Rufen Sie die Methode
executeQueryAsync
des Client-executeQueryAsync
auf, um die Anweisungen in der Warteschlange auszuführen
Beachten Sie, dass Sie nicht passieren müssen , um das neue Element - Objekt an den Client - Kontext load
das Element Methode zu erstellen. Dieser Schritt ist nur erforderlich, wenn Sie Feldwerte des Elements vom Server abrufen möchten.
Ordner erstellen
Das Erstellen eines Ordners ähnelt dem Hinzufügen eines Elements zu einer Liste. Der Unterschied besteht darin , dass man zuerst ein erstellen muß ListItemCreationInformation
Objekt und legen Sie seine underlyingObjectType
Eigenschaft auf SP.FileSystemObjectType.folder
und seine leafName
Eigenschaft auf den gewünschten Namen des neuen Ordners.
Das Objekt wird dann in der addItem
Methode der Bibliothek als Parameter addItem
, um den Ordner zu erstellen.
// ...
var itemCreateInfo = new SP.ListItemCreationInformation();
itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
itemCreateInfo.set_leafName(folderName);
var newItem = list.addItem(itemCreateInfo);
// ...
executeQueryAsync
zum ClientContext
der Änderung die executeQueryAsync
Methode des ClientContext
Objekts auf, über das auf die Bibliothek zugegriffen wurde.
Das vollständige Beispiel unten erstellt einen Ordner mit einem Namen, der auf dem aktuellen Zeitstempel basiert, und öffnet diesen Ordner in einem modalen Dialogfeld.
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());});
}
Aktuelle Benutzerinformationen abrufen
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());})
}
Holen Sie sich ein Listenelement nach 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());
}
);
}
Listenelemente nach CAML-Abfrage abrufen
Basisbeispiel
Verwenden Sie die set_viewXml
Methode des SP.CamlQuery-Objekts, um eine CAML-Abfrage zum Abrufen von Elementen anzugeben.
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 der Ergebnisse einer CAML-Abfrage
Sie können das RowLimit
Element in einer CAML-Abfrage dazu verwenden, mit jeder Abfrage nur eine Teilmenge der Ergebnisse abzurufen.
Verwenden Sie die get_listItemCollectionPosition
Methode einer Listenelementauflistung, um die aktuelle Position abzurufen, und verwenden Sie diesen Wert als Parameter in der set_listItemCollectionPosition
Methode eines SP.CamlQuery-Objekts, um den nächsten Stapel von Ergebnissen abzurufen.
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());
}
}