SharePoint 2013 JavaScript Object Model (JSOM) を使用して検索結果を取得する


こんにちは、SharePoint サポートの佐伯です。
今回の投稿では、JavaScript Object Model (JSOM) を使用して検索結果を取得する方法についてご紹介します。
検索結果の取得から描画まで一通り実装して動作を確認したい、全体的な実装イメージを掴みたいという方のために、サンプルを用意しました。
API の詳細について確認されたい場合は、本投稿内に記載の公開情報のリンクからご確認ください。

■サンプル
概要 : JSOM を使用して検索結果を取得する処理を実装し、最新のお知らせアイテムを表示する Web パーツを作成します。
ページにスクリプト エディター Web パーツを配置し、この Web パーツの [スニペットを編集] で、下記の JavaScript のコードを記述します。
完成後のイメージ :

サンプル コード :

<script type=”text/javascript” src=”/_layouts/15/sp.runtime.js”></script>
<script type=”text/javascript” src=”/_layouts/15/sp.js”></script>
<script type=”text/javascript” src=”/_layouts/15/sp.search.js”></script>
<script type=”text/javascript” src=”http://ajax.microsoft.com/ajax/jQuery/jquery-1.4.2.min.js”></script><script type=”text/javascript”>
<!–
var results;$(document).ready(function () {
getSearchResults();
});function getSearchResults() {
var context = new SP.ClientContext(“<サイトの URL>”);
var contextSite = context.get_site();
var keywordQuery = new Microsoft.SharePoint.Client.Search.Query.KeywordQuery(context);

//検索クエリを設定します。(ここでは、お知らせアイテムを取得するため ContentTypeId:0x0104* を設定)
keywordQuery.set_queryText(“ContentTypeId:0x0104*”);
//返される検索結果の最大数を設定します。(ここでは、5 を設定)
keywordQuery.set_rowLimit(5);
//検索結果の並べ替えを可能にします。
keywordQuery.set_enableSorting(true);
//並べ替え条件を設定します。(ここでは、最新のアイテムを取得するため、LastModifiedTime の降順を設定)
var sortList = keywordQuery.get_sortList();
sortList.add(“LastModifiedTime”, 1);

//取得する検索結果のプロパティを設定します。(ここでは、Title、Path、LastModifiedTime を設定)
var properties = keywordQuery.get_selectProperties();
properties.add(‘Title’);
properties.add(‘Path’);
properties.add(‘LastModifiedTime’);

//検索結果を取得します。
var searchExecutor = new Microsoft.SharePoint.Client.Search.Query.SearchExecutor(context);
results = searchExecutor.executeQuery(keywordQuery);
context.executeQueryAsync(onQuerySuccess, onQueryError);
}

//検索結果が正常に取得できた場合の処理
function onQuerySuccess() {
var table = $(‘<table border=1>’);

var thead = $(‘<thead>’).append(
$(‘<tr>’)
.append(‘<th>Title</th>’)
.append(‘<th>Path</th>’)
.append(‘<th>LastModifiedTime</th>’)
);
table.append(thead);

var tbody = $(‘<tbody>’);
$.each(results.m_value.ResultTables[0].ResultRows, function() {
tbody.append(
$(‘<tr>’)
.append(‘<td>’ + this.Title + ‘</td>’)
.append(‘<td>’ + this.Path + ‘</td>’)
.append(‘<td>’ + this.LastModifiedTime.getFullYear() + “/” + (this.LastModifiedTime.getMonth() + 1) + “/” + this.LastModifiedTime.getDate() + ‘</td>’)
);
});
table.append(tbody);

$(“#SearchResultsArea”).append(table);
}

//検索結果の取得時にエラーが発生した場合の処理
function onQueryError(){
$(“#SearchResultsArea”).append(“データの取得でエラーが発生しました。”);
}
–>
</script>

<div id=”SearchResultsArea”></div>

注意 :
<サイトの URL> には、同一 Web アプリケーション (テナント) を指定してください。
他ファームや他 Web アプリケーション、他テナントの URL を指定するとクロスドメイン制約のためアクセスが拒否されます。

なお、こちらのコードは参考例となります。
使用する API や設定するパラメーターについては公開情報を確認しながらご実装ください。
検索結果の描画やエラー処理等につきましては、ご要件にあわせて実装いただき、十分なテストをご実施ください。

– 参考情報 –
SharePoint 2013 での検索
SharePoint 2013 検索クエリ API を使用する
SP.ClientContext object (sp.js)
KeywordQuery members
Microsoft.SharePoint.Client.Search.Query namespace
SearchExecutor methods

なお、コンテンツ検索 Web パーツを使用して上記のような検索結果を取得する方法については下記の投稿に記載しております。
SharePoint 2013 お知らせアイテムを新着順に表示するコンテンツ検索 Web パーツを作成する

今回の投稿は以上です。

Comments (0)

Skip to main content