sharepoint
Praca z JavaScript Object Object Model (JSOM)
Szukaj…
Uwagi
tło
JavaScript Object Model został wprowadzony w SharePoint 2010. Udostępnia po stronie klienta wiele obiektów, które wcześniej były dostępne tylko za pośrednictwem kodu po stronie serwera lub poprzez dedykowane usługi sieciowe.
Osadzanie JavaScript na stronach SharePoint
W SharePoint 2013 możesz umieścić swój JavaScript w części web Script Editor.
W SharePoint 2010 możesz użyć właściwości „content content” składnika Web Part Content Editor, aby połączyć się z plikiem HTML zawierającym osadzony skrypt.
Odniesienie do obiektu
Konstruktory, metody i właściwości wszystkich obiektów znalezionych w przestrzeni nazw SP
są udokumentowane tutaj w odwołaniu do modelu obiektu klienta SharePoint 2013.
Odwołanie do modelu obiektowego klienta JavaScript SharePoint 2010 jest dostępne tutaj .
Wzorzec programowania asynchronicznego JSOM
Podczas korzystania z modelu obiektowego klienta JavaScript kod na ogół przyjmuje następujący wzorzec:
- Uzyskaj obiekt
ClientContext
. - Użyj obiektu
ClientContext
aby pobrać obiekty reprezentujące byty w modelu obiektowym SharePoint, takie jak listy, foldery, widoki. - Kolejkuj instrukcje do wykonania względem obiektów. Te instrukcje nie są jeszcze przesyłane do serwera.
- Użyj funkcji
load
aby powiedziećClientContext
jakie informacje chcesz otrzymać z serwera. - Wywołaj funkcję
ClientContext
obiektuexecuteQueryAsync
aby wysłać instrukcje umieszczone w kolejce na serwer, przekazując dwie funkcje zwrotne w celu uruchomienia lub niepowodzenia. - W funkcji wywołania zwrotnego pracuj z wynikami zwróconymi z serwera.
Alternatywy
Alternatywy po stronie klienta do JSOM obejmują usługi sieciowe SharePoint, punkty końcowe REST i model obiektowy klienta .NET .
Pobieranie typów zawartości biblioteki za pomocą nazwy biblioteki
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());
}
Usuń element z listy
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());});
}
Tworzenie elementów lub folderów
Tworzenie elementów listy
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());
});
}
Powyższy przykład pokazuje, że element listy jest tworzony przez wykonanie następujących czynności:
- Wywołaj metodę
addItem
obiektu listy, aby uzyskać obiekt elementu - Wywołaj metodę
set_item
na wynikowym obiekcie elementu listy, aby ustawić każdą wartość pola zgodnie z potrzebami - Wywołaj metodę
update
obiektu obiektu listy, aby wskazać, że zmiany mają zostać zatwierdzone - Wywołaj metodę
executeQueryAsync
obiektu kontekstu klienta, aby wykonać instrukcje umieszczone w kolejce
Należy pamiętać, że nie trzeba przekazywać nowego obiektu elementu do metody load
kontekstu klienta, aby utworzyć element. Ten krok jest konieczny tylko wtedy, gdy chcesz odzyskać dowolną wartość pola elementu z serwera.
Tworzenie folderów
Tworzenie folderu jest podobne do dodawania elementu do listy. Różnica polega na tym, że najpierw trzeba stworzyć ListItemCreationInformation
obiekt i ustawić jego underlyingObjectType
właściwość SP.FileSystemObjectType.folder
, a jego leafName
nieruchomość na żądaną nazwę nowego folderu.
Obiekt jest następnie przekazywany jako parametr w metodzie addItem
w bibliotece w celu utworzenia folderu.
// ...
var itemCreateInfo = new SP.ListItemCreationInformation();
itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
itemCreateInfo.set_leafName(folderName);
var newItem = list.addItem(itemCreateInfo);
// ...
Aby zatwierdzić zmianę, executeQueryAsync
metodę ClientContext
obiektu ClientContext
przez który uzyskano dostęp do biblioteki.
Pełny przykład poniżej tworzy folder o nazwie opartej na bieżącym znaczniku czasu, a następnie otwiera ten folder w modalnym oknie dialogowym.
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());});
}
Uzyskaj bieżące informacje o użytkowniku
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());})
}
Uzyskaj element listy według identyfikatora
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());
}
);
}
Uzyskaj elementy listy według zapytania CAML
Podstawowy przykład
Użyj set_viewXml
metodę obiektu SP.CamlQuery określić kwerendy CAML do pobierania przedmiotów.
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());});
}
Stronicowanie wyników zapytania CAML
Możesz skorzystać z elementu RowLimit
w zapytaniu CAML, aby pobrać tylko podzbiór wyników dla każdego zapytania.
Użyj metody get_listItemCollectionPosition
kolekcji elementów listy, aby pobrać bieżącą pozycję, a następnie użyj tej wartości jako parametru w metodzie set_listItemCollectionPosition obiektu set_listItemCollectionPosition
, aby pobrać następną partię wyników.
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());
}
}