sharepoint
JavaScriptクライアントオブジェクトモデル(JSOM)の使用
サーチ…
備考
バックグラウンド
JavaScriptオブジェクトモデルはSharePoint 2010で導入されました。以前はサーバー側のコードまたは専用のWebサービスを通じてアクセス可能だった多くのオブジェクトをクライアント側で公開しています。
SharePointページへのJavaScriptの埋め込み
SharePoint 2013では、JavaScriptをスクリプトエディタのWebパーツに配置できます。
SharePoint 2010では、コンテンツエディタWebパーツの「コンテンツリンク」プロパティを使用して、埋め込みスクリプトを含むHTMLファイルにリンクすることができます。
オブジェクト参照
SP
名前空間に含まれるすべてのオブジェクトのコンストラクタ、メソッド、およびプロパティは、 ここではSharePoint 2013クライアントオブジェクトモデルのリファレンスに記載されています。
ここでは、SharePoint 2010のJavaScriptクライアントオブジェクトモデルリファレンスを使用できます 。
JSOMの非同期プログラミングパターン
JavaScriptクライアントオブジェクトモデルを使用する場合、コードは一般的に次のパターンをとります。
-
ClientContext
オブジェクトを取得します。 -
ClientContext
オブジェクトを使用して、SharePointオブジェクトモデル内のエンティティ(リスト、フォルダ、ビューなど)を表すオブジェクトを取得します。 - オブジェクトに対して実行される命令をキューイングします。これらの命令はまだサーバーには送信されません。
-
load
関数を使用して、サーバーから受信する情報をClientContext
に通知します。 -
ClientContext
オブジェクトのexecuteQueryAsync
関数を呼び出して、ClientContext
れた命令をサーバーに送信し、成功または失敗時に実行される2つのコールバック関数を渡します。 - コールバック関数では、サーバーから返された結果を処理します。
代替案
JSOMのクライアント側の代替案には、SharePointのWebサービス、 RESTエンドポイント 、 .NETクライアントオブジェクトモデルなどがあります 。
ライブラリ名を使用してライブラリコンテンツタイプを取得する
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());
}
リスト内の項目を削除する
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());});
}
アイテムまたはフォルダの作成
リスト項目の作成
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());
});
}
上記の例は、次の処理を実行することによってリスト項目が作成されることを示しています。
- リストオブジェクトの
addItem
メソッドを呼び出してアイテムオブジェクトを取得する - 結果のリストアイテムオブジェクトに対して
set_item
メソッドを呼び出して、各フィールド値を必要に応じて設定します - リストアイテムオブジェクトの
update
メソッドを呼び出して、変更がコミットされることを示します。 - キューに格納された命令を実行するには、クライアントコンテキストオブジェクトの
executeQueryAsync
メソッドを呼び出します。
アイテムを作成するために、新しいアイテムオブジェクトをクライアントコンテキストのload
メソッドに渡す必要はありません 。この手順は、サーバーからアイテムのフィールド値を取得する場合にのみ必要です。
フォルダの作成
フォルダを作成することは、リストに項目を追加することに似ています。違いは、最初にListItemCreationInformation
オブジェクトを作成し、そのunderlyingObjectType
プロパティをSP.FileSystemObjectType.folder
設定し、そのleafName
プロパティを新しいフォルダの希望する名前に設定する必要があることです。
オブジェクトは、ライブラリのaddItem
メソッドのパラメータとして渡され、フォルダが作成されます。
// ...
var itemCreateInfo = new SP.ListItemCreationInformation();
itemCreateInfo.set_underlyingObjectType(SP.FileSystemObjectType.folder);
itemCreateInfo.set_leafName(folderName);
var newItem = list.addItem(itemCreateInfo);
// ...
変更をコミットするには、ライブラリがアクセスされたClientContext
オブジェクトのexecuteQueryAsync
メソッドを呼び出します。
以下の完全な例は、現在のタイムスタンプに基づいた名前のフォルダを作成し、そのフォルダをモーダルダイアログで開きます。
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());});
}
現在のユーザー情報を取得する
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());})
}
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());
}
);
}
CAMLクエリによるリスト項目の取得
基本的な例
SP.CamlQueryオブジェクトのset_viewXml
メソッドを使用して、アイテムを取得するCAMLクエリを指定します。
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());});
}
CAML問合せの結果のページング
CAML問合せのRowLimit
要素を利用して、各問合せで結果のサブセットのみを取得できます。
リストアイテムコレクションのget_listItemCollectionPosition
メソッドを使用して現在の位置を取得し、その値をSP.CamlQueryオブジェクトのset_listItemCollectionPosition
メソッドのパラメータとして使用して、結果の次のバッチを取得します。
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());
}
}