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

SharePoint 2013
スポンサーリンク

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

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

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

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

20130720-1

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

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

20130720-2

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

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

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

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

20130720-3
20130720-4

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

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

Web パーツの接続設定

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

20130720-5
20130720-6
20130720-7

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

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

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

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

動作を確認する

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

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

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

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

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

ただし、これではユーザーに易しくありません。そのため、クリックで操作できるユーザー インタフェースを作ります。簡単に作るために、今回は「コンテンツ エディター」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="ん"/>
20130720-9
20130720-10

すると、下図のように50音のボタンが表示されたと思います。

このボタンをクリックすると、クエリ文字列が自動で URL に付加され、簡単にフィルター操作が行えます。例えば「さ」をクリックすると、下図のように頭文字が「さ」のデータのみが表示されます。

さいごに

いかがでしたでしょうか?ここまでの設定は、慣れるている方であれば、15分ほどで終了すると思います。プログラミングのような難しいコードを書かなくても、「フィルター」Web パーツを利用すると、ちょっとしたアプリケーションのような実装が実現できることを分かっていただけたのではないでしょうか?

もちろんコードを書いてプログラミングすることで、より詳細な要件に対応できるかもしれません。ただ、少しの工夫と知識で、”ある程度”の機能を簡単に実現できる。これが SharePoint の良さだと思います。

おつかれさまでした。

タイトルとURLをコピーしました