先日実施しましたセミナーでご質問いただいたところからヒントを得て、ちょっとしたリストデータ連携を実装してみましたのでご紹介します。
たとえば、顧客データを管理するリストとして「顧客リスト」があり、契約書を保管するドキュメントライブラリとして「契約書ライブラリ」があるとします。契約書ライブラリに契約書を保管してきますのが、プロパティとして顧客リストに格納されているIDを参照する「顧客ID」列を追加しようと思いますが、このときユーザーにはあくまで顧客名で選択させ、実際に格納する値は「顧客ID」にしたいと思います。
さて、SharePoint 上でできるだけ手軽に実装するにはどうしたらよいでしょうか。
追加する「顧客ID」列のデータの種類を参照列にする方法も考えましたが、これでは直接、顧客リストの顧客名を選択させるだけで同時にIDを取得することはできず要件を満たせません。
そこで SharePoint Designer 2007 を利用することにしました。既存のコントロールと JavaScript の組み合わせだけで対応できそうです。
[図.ライブラリ内でのリストデータの参照]
作業概要
- 顧客リストからデータソースを生成する
- ASP.NET のドロップダウンリスト コントロールを配置し、1.で生成した顧客リストのデータソースをバインドする
- ドキュメントライブラリ上の顧客ID列に値を格納するようなコードをJavaScriptで記述する
顧客リストからデータソースを生成する
- SharePoint Desinger 2007 を使用し、契約書ライブラリ内の EditForm.aspx をコピーし "New_EditForm.aspx" として EditForm.aspx と同じ場所に保存します(オリジナルの EditForm.aspx は念のため温存しておきます)。
- 「契約書ライブラリ」のプロパティを表示し、 「関連ファイル」タブから「ドキュメントのプロパティを編集するフォーム」を "New_EditForm.aspx" に変更します。
- メニューバーにある「データビュー」メニューから「データソースの管理」をクリックします。
- デザインビュー内のリストフォームWebパーツ(ListFormWebPart)の直前あたりにカーソルを挿入した状態で、データソースの管理ウィンドウ内の顧客リストのドロップダウンメニューから「データソース コントロールの挿入」をクリックします。
ASP.NET のドロップダウンリスト コントロールを配置し、1.で生成した顧客リストのデータソースをバインドする
メニューバーにある「作業ウィンドウ」から「ツールボックス」をクリックします。
リストフォーム Web パーツ(ListFormWebPart)の直前あたり(ただし、<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">
タグよりあと) に ツールボックス内に表示されるASP.NETコントロールの DropDownList を追加します。デザインビューに表示されるDropDownList の右側に表示される ">" をクリックし、"コモン DropDownList タスク" に表示される 「データソースの選択」をクリックします。
データソース構成ウィザードが表示されます。
「データソースの選択」にて先ほど追加したデータソースを指定します。既定では"spdatasource1" という名前です。続いて「DropDownListで表示するデータ フィールドの選択」にて表示したい列を選択します。私の環境ではタイトル列を顧客名フィールドとして利用していますので"Title" を指定しています。「DropDownList の値のデータフィールドの選択」にて実際に取得したいフィールドの値を指定します。今回は最終的に顧客IDを取得したいので私の環境では"_x9867__x5ba2_ID"という列を指定しています(ここで選択する列名は環境によって異なることになると思いますので適宜状況に応じたものを選択するようにしてください。なお、最初からわかりやすい列名にしておきたい場合は列作成時に列のタイトルを英語表記で指定しておきあとから日本語のタイトルに変更しておくとよいです)。
[OK] をクリックします。
"AutoPostBack を有効にする" チェックボックスをオンにします。
以上で契約書ライブラリのプロパティ編集画面に顧客リストの一部が表示できるようになります。今回利用した DropDownList はユーザーからアクセスされたときには Select Option タグとして出力されるようになります。
JavaScript を記述する
<asp:Content ContentPlaceHolderId="PlaceHolderMain" runat="server">タグの直後あたりに、たとえば次のような JavaScript を記述します。
+++++++++++++++++++++++++++++++++++
<script type="text/javascript">
<!--
_spBodyOnLoadFunctionNames.push("getCustomerID");
function getCustomerID()
{
var sourceTag,targetTag;
var index;
//"ctl00_PlaceHolderMain_DropDownList1"の部分はDropDownList の ID値です。
sourceTag=document.getElementById("ctl00_PlaceHolderMain_DropDownList1");
//"ctl00_m_g_79887cea～" の部分は 「顧客ID」列となっている input タグの IDです
targetTag=document.getElementById("ctl00_m_g_79887cea_b0ac_4eac_87ea_f0895d24288a_ctl00_
ctl02_ctl00_ctl01_ctl00_ctl00_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_TextField");
//ドロップダウンリストで選択されている項目の値を顧客ID列に格納します
index=sourceTag.selectedIndex;
targetTag.value=sourceTag.options[index].value;
//顧客ID列は直接は編集できないよう、読み取り専用にしておきます
targetTag.readOnly=true;
}
+++++++++++++++++++++++++++++++++++
データビューの連携
今回はついでに、顧客リストのデータをデータビューを使って同時に表示するようにしています。このあたりは前回の記事の応用です(以前の記事)。構成の概要だけご紹介しておきます。
- DropDownList の隣に顧客リストのデータビューを挿入します。
- データビューのフィルタ設定で、ドロップダウンリスト コントロールの値をパラメータとしてフィルタします。(例) "顧客ID" が "次の値に等しい" "param1" ※ param1 はドロップダウンリスト コントロールの値
補足
今回はデータビューと連携させるために ドロップダウンリストの AutoPostBack を 有効にしましたが、特にデータビューと連携させないのであれば AutoPostBack は有効にせず、直接ドロップダウンリストの onchanged イベントで 顧客ID 列に値を格納するようにしてももちろん構いません。
onchanged イベントを利用して即座に顧客ID列に値を格納する場合のコードサンプル
+++++++++++++++++++++
_spBodyOnLoadFunctionNames.push("addOnchangeFunction");
function addOnchangeFunction()
{
var sTag=document.getElementById("ctl00_PlaceHolderMain_DropDownList1");
sourceTag.onchange=function getCustomerID(){
var sourceTag,targetTag;
targetTag=document.getElementById("ctl00_m_g_79887cea_b0ac_4eac_87ea_f0895d24288a_ctl00_ctl02_
ctl00_ctl01_ctl00_ctl00_ctl00_ctl00_ctl00_ctl04_ctl00_ctl00_TextField");
sourceTag=document.getElementById("ctl00_PlaceHolderMain_DropDownList1");
var index=sourceTag.selectedIndex;
targetTag.value=sourceTag.options[index].value;
targetTag.readOnly=true;
}
}
+++++++++++++++++++++
以上、参考になれば幸いです。
コメント