JavaScript からの操作

投稿日 2015/10/29

JavaScript からいろいろ操作もできるらしい。

大前提
- htmlのheadタグ
- JavaScript
データの検索の例

大前提

htmlのheadタグ

以下を追加する。

<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/4.0/1/MicrosoftAjax.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.runtime.js"></script>
<script type="text/javascript" src="/_layouts/15/sp.js"></script>

※外部に接続できない場合は、MicrosoftAjax.js を _layouts 以下に置いてそれを指定させるよう変更する。

JavaScript

以下のようにして、sp.js ロード後に処理を実行させるよう記述する。

$(function () {
    // SharePoint 2010
    // ExecuteOrDelayUntilScriptLoaded(hoge, "sp.js");
    // SharePoint 2013
    SP.SOD.executeFunc("sp.js", "SP.ClientContext", hoge);
});

function hoge() {
    ...
}

$(function () {

// SharePoint 2010

// ExecuteOrDelayUntilScriptLoaded(hoge, "sp.js");

// SharePoint 2013

SP.SOD.executeFunc("sp.js", "SP.ClientContext", hoge);

});

function hoge() {

...

}

データの検索の例

注意点

CAMLは<View>...</View>で囲って使用する。
DateTime型の値の取得時は日付をフォーマットしてやること。
SP.ClientContext.executeQueryAsync メソッドを使用する。

function hoge() {
    var spContext = new SP.ClientContext.get_current();
    var web = spContext.get_web();

    // 検索対象のカスタムリスト取得
    var list = web.get_lists().getByTitle("カスタムリスト名");

    // CAMLを作成
    var caml = getCaml();

    // CAMLを設定
    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml(caml);
    this.colListItem = list.getItems(camlQuery);

    spContext.load(colListItem);
    spContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}

// CAML作成処理
function getCaml() {
    // CAMLを作成して返却
    return "<View><Query>...</Query></View>";
}

// 検索成功時処理
function onQuerySucceeded(sender, args) {

    var listCount = colListItem.get_count();
    if (listCount < 1) {
        // データなし時の処理
        alert("ねーよ");
        return;
    }

    var listItemEnumerator = colListItem.getEnumerator();

    while (listItemEnumerator.moveNext()) {
        var item = listItemEnumerator.get_current();

        var aaa      = item.get_item("XXX");
        var bbbDate  = item.get_item("YYYDate");
        if (bbbDate != null) {
            bbbDate  = bbbDate.format("yyyy/MM/dd");
        }

        // http://domain/subsite/Lists/listname/AllItems.aspx で一覧を表示できるカスタムリストの場合
        // "/subsite/Lists/listname" が取れる
        var fileDirRef = item.get_item("FileDirRef");

        var id         = item.get_item("ID");
        var linkUrl    = "http://" + document.domain + fileDirRef + "/DispForm.aspx?ID=" + id;

        // 処理など
    }
}

/**
 * 検索失敗時処理
 * @param sender イベントを発生したオブジェクト
 * @param args 発生したイベントに関する情報
 */
function onQueryFailed(sender, args) {
    alert("失敗だよ");
}

function hoge() {

var spContext = new SP.ClientContext.get_current();

var web = spContext.get_web();

// 検索対象のカスタムリスト取得

var list = web.get_lists().getByTitle("カスタムリスト名");

// CAMLを作成

var caml = getCaml();

// CAMLを設定

var camlQuery = new SP.CamlQuery();

camlQuery.set_viewXml(caml);

this.colListItem = list.getItems(camlQuery);

spContext.load(colListItem);

spContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

}

// CAML作成処理

function getCaml() {

// CAMLを作成して返却

return "<View><Query>...</Query></View>";

}

// 検索成功時処理

function onQuerySucceeded(sender, args) {

var listCount = colListItem.get_count();

if (listCount < 1) {

// データなし時の処理

alert("ねーよ");

return;

}

var listItemEnumerator = colListItem.getEnumerator();

while (listItemEnumerator.moveNext()) {

var item = listItemEnumerator.get_current();

var aaa = item.get_item("XXX");

var bbbDate = item.get_item("YYYDate");

if (bbbDate != null) {

bbbDate = bbbDate.format("yyyy/MM/dd");

}

// http://domain/subsite/Lists/listname/AllItems.aspx で一覧を表示できるカスタムリストの場合

// "/subsite/Lists/listname" が取れる

var fileDirRef = item.get_item("FileDirRef");

var id = item.get_item("ID");

var linkUrl = "http://" + document.domain + fileDirRef + "/DispForm.aspx?ID=" + id;

// 処理など

}

/**

* 検索失敗時処理

* @param sender イベントを発生したオブジェクト

* @param args 発生したイベントに関する情報

function onQueryFailed(sender, args) {

alert("失敗だよ");

}