フィルター Web パーツを利用して電話帳アプリっぽいものを作ってみる

今回は、使うと便利なのにあまり語られることの少ないフィルター Web パーツについて投稿します。今回使うのは「クエリ文字列（URL）フィルター」Web パーツです。サンプルとして電話帳みたいなものを作ってみましょう。

最初に注意を。もしも、サンプルを試される際には、サイト機能の「ダウンロード最小化戦略」を非アクティブにしておいてください。アクティブのままだと、おそらくサンプルは動かないと思います。

（2013/8/30）また、フィルター Web パーツの利用するためには、「SharePoint Server Enterprise サイトコレクション機能」を有効化しておく必要があります。

まずは、電話帳リストを作成する
「クエリ文字列（URL）フィルター」Web パーツの設定
Web パーツの接続設定
動作を確認する
フィルター操作のユーザーインタフェースを作る
さいごに

まずは、電話帳リストを作成する

一番初めは、データを格納するリスト作りからです。カスタムリストから簡単に作ります。リストには、下図のような列を用意しました。

特に凝ったことはせず、姓名とその読み仮名、電話番号を入力する列を作成します。ただし、フィルター Web パーツを利用するために、「頭文字」という列を作成しました。この列は、集計値列で作成しており、「姓（よみ）」の最初の一文字が自動で入力されるようになっています。指定した数式は「=LEFT([姓（よみ）])」です。

少しだけデータを入力すると、下図のようになります。わかりやすく「頭文字」列もビューに表示しておきました。

今回実装するフィルター機能は、苗字が「あ」から始まる人、苗字が「い」から始まる人、といった条件をワンクリックでフィルターを掛けられるといった機能にしたいと思います。この機能は「クエリ文字列（URL）フィルター」Web パーツを利用すると、簡単に実装ができます。

「クエリ文字列（URL）フィルター」Web パーツの設定

何はともあれ「クエリ文字列（URL）フィルター」Web パーツをリストの Web パーツを貼り付けたページと同じページに配置します。リボンメニューから Web パーツを選択する際に、「フィルター」カテゴリの中にあります。

追加した直後が下図なのですが、リスト Web パーツの下に四角の枠が表示されました。これが「クエリ文字列（URL）フィルター」Web パーツです。（なんだかおかしいですね。この動作は不具合のような気も…。）

気を取り直して、この四角の枠をクリックすると、リボンメニューに「Web パーツ」タブが現れるので、タブを切り替えて「Web パーツのプロパティ」をクリックします。すると、ページの右側に「クエリ文字列（URL）フィルター」Web パーツのプロパティ編集メニューが表示されます。「クエリ文字列パラメーター名」が指定できるようになっているので、今回は「Initial」と入力しました。「適用」を押して設定を保存します。

Web パーツの接続設定

次に、フィルター Web パーツをリスト Web パーツへ「接続」します。フィルター Web パーツは、単独では何の機能も提供できないため、フィルターしたい対象に「接続」してあげる必要があります。

下図のように「電話帳」リストを選択します。

すると、「接続の選択」ダイアログが表示されますので、「1. 接続の選択」タブの「接続の種類」に「フィルターの値の取得」を指定し、「構成」をクリックします。

「2. 接続の構成」タブの「コンシューマーフィールド名」には、フィルターの条件として用いる列の「頭文字」を指定し、「完了」をクリックします。

フィルターの設定はこれで全て終了です。

動作を確認する

一見何の変化もありませんが、動作を確認してみましょう。動作を確認する方法は簡単です。Web パーツを配置したページの URL にクエリ文字列を指定するだけです。下記は頭文字が「あ」でフィルターを掛ける場合の指定です。PhoneBook.aspx は、Web パーツを配置しているページです。「%E3%81%82」は「あ」を UTF-8 で URL エンコードしたものです。

http://sps2013/SitePages/PhoneBook.aspx?Initial=%E3%81%82

するとどうでしょうか？頭文字に「あ」が入力されているデータのみが表示されたと思います。

これで、きちんとフィルターが動作していることが確認できました。

フィルター操作のユーザーインタフェースを作る

ただし、これではユーザーに易しくありません。そのため、クリックで操作できるユーザーインタフェースを作ります。簡単に作るために、今回は「コンテンツエディター」Web パーツを利用します。「コンテンツエディター」Web パーツを同じページに配置し、「ソースの編集」で下記を入力します。

<input onclick="location.href='?Initial=あ'" type="button" value="あ"/>
<input onclick="location.href='?Initial=い'" type="button" value="い"/>
<input onclick="location.href='?Initial=う'" type="button" value="う"/>
<input onclick="location.href='?Initial=え'" type="button" value="え"/>
<input onclick="location.href='?Initial=お'" type="button" value="お"/>
<br/>
<input onclick="location.href='?Initial=か'" type="button" value="か"/>
<input onclick="location.href='?Initial=き'" type="button" value="き"/>
<input onclick="location.href='?Initial=く'" type="button" value="く"/>
<input onclick="location.href='?Initial=け'" type="button" value="け"/>
<input onclick="location.href='?Initial=こ'" type="button" value="こ"/>
<br/>
<input onclick="location.href='?Initial=さ'" type="button" value="さ"/>
<input onclick="location.href='?Initial=し'" type="button" value="し"/>
<input onclick="location.href='?Initial=す'" type="button" value="す"/>
<input onclick="location.href='?Initial=せ'" type="button" value="せ"/>
<input onclick="location.href='?Initial=そ'" type="button" value="そ"/>
<br/>
<input onclick="location.href='?Initial=た'" type="button" value="た"/>
<input onclick="location.href='?Initial=ち'" type="button" value="ち"/>
<input onclick="location.href='?Initial=つ'" type="button" value="つ"/>
<input onclick="location.href='?Initial=て'" type="button" value="て"/>
<input onclick="location.href='?Initial=と'" type="button" value="と"/>
<br/>
<input onclick="location.href='?Initial=な'" type="button" value="な"/>
<input onclick="location.href='?Initial=に'" type="button" value="に"/>
<input onclick="location.href='?Initial=ぬ'" type="button" value="ぬ"/>
<input onclick="location.href='?Initial=ね'" type="button" value="ね"/>
<input onclick="location.href='?Initial=の'" type="button" value="の"/>
<br/>
<input onclick="location.href='?Initial=は'" type="button" value="は"/>
<input onclick="location.href='?Initial=ひ'" type="button" value="ひ"/>
<input onclick="location.href='?Initial=ふ'" type="button" value="ふ"/>
<input onclick="location.href='?Initial=へ'" type="button" value="へ"/>
<input onclick="location.href='?Initial=ほ'" type="button" value="ほ"/>
<br/>
<input onclick="location.href='?Initial=ま'" type="button" value="ま"/>
<input onclick="location.href='?Initial=み'" type="button" value="み"/>
<input onclick="location.href='?Initial=む'" type="button" value="む"/>
<input onclick="location.href='?Initial=め'" type="button" value="め"/>
<input onclick="location.href='?Initial=も'" type="button" value="も"/>
<br/>
<input onclick="location.href='?Initial=や'" type="button" value="や"/>
<input type="button" value=""/>
<input onclick="location.href='?Initial=ゆ'" type="button" value="ゆ"/>
<input type="button" value=""/>
<input onclick="location.href='?Initial=よ'" type="button" value="よ"/>
<br/>
<input onclick="location.href='?Initial=ら'" type="button" value="ら"/>
<input onclick="location.href='?Initial=り'" type="button" value="り"/>
<input onclick="location.href='?Initial=る'" type="button" value="る"/>
<input onclick="location.href='?Initial=れ'" type="button" value="れ"/>
<input onclick="location.href='?Initial=ろ'" type="button" value="ろ"/>
<br/>
<input onclick="location.href='?Initial=わ'" type="button" value="わ"/>
<input type="button" value=""/>
<input onclick="location.href='?Initial=を'" type="button" value="を"/>
<input type="button" value=""/>
<input onclick="location.href='?Initial=ん'" type="button" value="ん"/>