サーチ…


備考

バックグラウンド

JavaScriptオブジェクトモデルはSharePoint 2010で導入されました。以前はサーバー側のコードまたは専用のWebサービスを通じてアクセス可能だった多くのオブジェクトをクライアント側で公開しています。

SharePointページへのJavaScriptの埋め込み

SharePoint 2013では、JavaScriptをスクリプトエディタのWebパーツに配置できます。

SharePoint 2010では、コンテンツエディタWebパーツの「コンテンツリンク」プロパティを使用して、埋め込みスクリプトを含むHTMLファイルにリンクすることができます。

オブジェクト参照

SP名前空間に含まれるすべてのオブジェクトのコンストラクタ、メソッド、およびプロパティは、 ここではSharePoint 2013クライアントオブジェクトモデルのリファレンスに記載されています。

ここでは、SharePoint 2010のJavaScriptクライアントオブジェクトモデルリファレンスを使用できます

JSOMの非同期プログラミングパターン

JavaScriptクライアントオブジェクトモデルを使用する場合、コードは一般的に次のパターンをとります。

  1. ClientContextオブジェクトを取得します。
  2. ClientContextオブジェクトを使用して、SharePointオブジェクトモデル内のエンティティ(リスト、フォルダ、ビューなど)を表すオブジェクトを取得します。
  3. オブジェクトに対して実行される命令をキューイングします。これらの命令はまだサーバーには送信されません。
  4. load関数を使用して、サーバーから受信する情報をClientContextに通知します。
  5. ClientContextオブジェクトのexecuteQueryAsync関数を呼び出して、 ClientContextれた命令をサーバーに送信し、成功または失敗時に実行される2つのコールバック関数を渡します。
  6. コールバック関数では、サーバーから返された結果を処理します。

代替案

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());
    });
}

上記の例は、次の処理を実行することによってリスト項目が作成されることを示しています。

  1. リストオブジェクトのaddItemメソッドを呼び出してアイテムオブジェクトを取得する
  2. 結果のリストアイテムオブジェクトに対してset_itemメソッドを呼び出して、各フィールド値を必要に応じて設定します
  3. リストアイテムオブジェクトのupdateメソッドを呼び出して、変更がコミットされることを示します。
  4. キューに格納された命令を実行するには、クライアントコンテキストオブジェクトの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());
    }
}


Modified text is an extract of the original Stack Overflow Documentation
ライセンスを受けた CC BY-SA 3.0
所属していない Stack Overflow