ShowTable of Contents
フィールドの実現方法「ダイアログリスト」
XPageにて 「ダイアログリスト」を実現する場合、Dojoライブラリを用いたモーダルウィンドウにてダイアログを実現する。
適用方法
Dojoライブラリのダイアログボックス機能を利用するには、ページにそのライブラリを読み込んでおく必要がある。
1-1.XPageのプロパティ[すべてのプロパティ]-[resources]に「xp:dojoModule」を追加し、その中の[name]に“dijit.Dialog”と入力する。
1-2.Dojoのテーマを利用するため、XPageのプロパティ[すべてのプロパティ]-[dojo]-[dojoTheme]を“true”に変更する。
これで、表示されるダイアログが透明になることを防ぐことができる。
2.メイン画面を作成する
今回は、所属マスター文書から所属リストを表示するダイアログを作成する。
メインの画面に所属情報をセットするフィールドと選択するボタンを準備する。
◆メイン画面の内容
項目 | 名前 | 内容 |
| 「所属情報」フィールド | departmentName | ・コントロールパネルの[編集ボックス]を追加する。 |
| 「選択」ボタン | selectDepartment | ・コントロールパネルの[ボタン]を追加する。
・[イベント]-[onclick]-[クライアント]-[スクリプトエディタ]内に下記を記述する。
var dialog = dijit.byId("#{id:selectDepartmentOnlyOne}");
dialog.show();
<解説>
「dialog」オブジェクトをダイアログとして表示させる。
|
3.ダイアログの領域を作成する
ページ内にパネル領域を作成して、その中にダイアログの内容を記述する。
パネル領域はどこに作成しても問題ないが、メンテナンスのことも考えてページの最下部に設置するとよい。
3-1.パネルコントロールの「すべてのプロパティ」で、[dojo]-[dojoType]に“dijit.Dialog”を設定することで、この領域がダイアログボックスであることを宣言する。
3-2.ダイアログボックスを表示するとき、クライアントスクリプトでIDが必要になるので、明示的に指定する。
ここでは、「selectDepartmentOnlyOne」としておく。
4.選択ボックスの配置
ダイアログボックスのパネル領域の中に、「リストボックス」コントロールを配置する。
◆リストボックスの内容
項目 | 名前 | 内容 |
| 「所属選択」フィールド | departmentSelect | ・コントロールパネルの[リストボックス]を追加する。
・[値]-[式項目の追加]にてスクリプトエディタに下記の式を記述する。
@DbColumn(@DbName(),"Departments",1)
<解説>
"Departments"ビューの1列目をリストとして表示する。
|
5.「OK」、「キャンセル」ボタンの配置
「OK」ボタンで、選択した項目をメインに反映させる。
同様に「キャンセル」ボタンを準備する。
◆ボタンの内容
項目 | 名前 | 内容 |
| OK | ok_button | ・コントロールパネルの[ボタン]を追加する。
・[イベント]-[onclick]-[クライアント]-[スクリプトエディタ]内に下記を記述する。
var selected = dojo.byId("#{id:departmentSelect}");
var input = dojo.byId("#{id:departmentName}");
input.value = selected.value;
var dialog = dijit.byId("#{id:selectDepartmentOnlyOne}");
dialog.hide();
<解説>
ダイアログ内の 「所属選択」フィールドで選択した値をメインの「所属情報」フィールドへセットする。
その後、ダイアログを閉じる。
|
| キャンセル | can_button | ・コントロールパネルの[ボタン]を追加する。
・[イベント]-[onclick]-[クライアント]-[スクリプトエディタ]内に下記を記述。
var dialog = dijit.byId("#{id:selectDepartmentOnlyOne}");
dialog.hide();
<解説>
ダイアログを閉じる。
|
6.スクリプトの出力の配置
＜script＞ タグを出力するために「スクリプトの出力」を配置する。
◆スクリプトの出力の内容
項目 | 名前 | 内容 |
| スクリプト | scriptBlock1 | ・コントロールパネルの[スクリプトの出力]を追加する。
・[すべてのプロパティ]-[データ]-[value]内に下記を記述する。
XSP.addOnLoad(function(){
var dialog = dojo.byId("#{id:selectDepartmentOnlyOne}");
dialog.parentNode.removeChild(dialog);
var form = document.forms[0];
form.appendChild(dialog);
var dialogWidget = dijit.byId("#{id:selectDepartmentOnlyOne}");
dialogWidget.startup();
});
<解説>
ダイアログ領域となっている「selectDepartmentOnlyOne」パネルを
formタグの直下に移動し、ダイアログ内での部分更新が実行できるようにする。
|
7.ブラウザで確認
ブラウザで参照するとダイアログリストが表示されることが確認できる。
パターンA. 新規項目追加の場合
1.編集ボックスの追加と各項目の修正
新規項目を追加する場合、下記のように、リストボックスとは別に新しいキーワード入力用の編集ボックスを用意する。
また、新しいキーワードが入力されている場合、その内容を反映させる為に各項目の修正を行う。
◆変更内容
項目 | 名前 | 内容 |
| 「新しいキーワード」フィールド | Newdepartment | ・コントロールパネルの[編集ボックス]を追加する。
・[イベント]-[onclick]-[クライアント]-[スクリプトエディタ]内に下記を記述する。
var selected = dojo.byId("#{id:departmentSelect}");
selected.value = "";
<解説>
新しいキーワードを入力する場合、「所属選択」フィールドの値をクリアする。
|
| 「所属選択」フィールド | departmentSelect | ・[イベント]-[onclick]-[クライアント]-[スクリプトエディタ]内に下記を記述する。
var selected_new = dojo.byId("#{id:Newdepartment}");
selected_new.value = "";
<解説>
所属選択をする場合、「新しいキーワード」フィールドの値をクリアする。
|
| OK | ok_button | ・[イベント]-[onclick]-[クライアント]-[スクリプトエディタ]内に下記を記述する。
var selected = dojo.byId("#{id:departmentSelect}");
var selected_new = dojo.byId("#{id:Newdepartment}");
var input = dojo.byId("#{id:departmentName}");
if (selected_new.value ==""){
input.value = selected.value;
}else{
input.value = selected_new.value;
}
var dialog = dijit.byId("#{id:selectDepartmentOnlyOne}");
dialog.hide();
<解説>
「所属選択」フィールドまたは、「新しいキーワード」フィールドにて選択・入力された値を
メインの「所属情報」フィールドへセットする。その後、ダイアログを閉じる。
|
2.ブラウザで確認
ブラウザで参照するとダイアログリストに新規項目が追加されたことが確認できる。
パターンB. 複数選択の場合
1.各項目の修正
リストボックスにて複数値を選択できるように変更後、その結果をメインの画面に反映させる必要がある。
◆変更内容
項目 | 名前 | 内容 |
| 「所属情報」フィールド | departmentName | ・ [プロパティ] - [すべてのプロパティ] - [基本] - [multipleSeparator] に、区切り文字として","を入力する。
|
| 「所属選択」フィールド | departmentSelect | ・[プロパティ]-[オプション]-[複数選択も可]にチェックを付ける。
|
| OK | ok_button | ・[イベント]-[onclick]-[クライアント]-[スクリプトエディタ]内に下記を記述する。
var selected = dojo.byId("#{id:departmentSelect}");
var input = dojo.byId("#{id:departmentName}");
input.value = "";
for(var i=0; i< selected.length; i++){
var option = selected.options[i];
if(option.selected==true){
if(input.value==""){
input.value = option.value;
}else{
input.value = input.value + "," + option.value;
}
}
}
var dialog = dijit.byId("#{id:selectDepartmentOnlyOne}");
dialog.hide();
<解説>
複数選択されている場合、","区切りで値をメインの「所属情報」フィールドへセットする。その後、ダイアログを閉じる。
|
2.ブラウザで確認
ブラウザで参照すると複数選択可能となったことが確認できる。
その他
＜調査環境＞
Lotus Domino Designer 8.5.2
Microsoft Internet Explorer 8
その他の「フィールド」については
こちらを参照してください
この記事は九州地区ノーツパートナー会技術部会(リコー IT ソリューションズ 株式会社)によって作成されました。