JS子画面の値を親画面に戻す

1.1希望効果

親画面から開いたダイアログボックス画面に選択された値をまた親画面に設定すること。下記のよう：

1.2実現方法

親画面と子画面二つを作成、親画面のボタンをクリックするとダイアログボックスで子画面を開く、子画面に設定された値をまた親画面に戻す。

2.1子画面を作成

1)データ準備

データセットds1を作成：SELECT * FROM Categories

2)画面作成

ボタンにクリックイベントを追加

Javascript文：

var form = window.parent.contentPane; //親画面を取得する
var Widget = form.parameterEl.getWidgetByName('p_category');
Widget.setValue(val);
//表示画面の場合数式でセルの値を取得できます
//入力画面の場合、Javascriptで入力ウィジェットの値を取得する必要があります。
//なければ、動的に取得できません。
window.parent.FR.closeDialog(); //ダイアログボックスを閉じる
window.parent.FR.destroyDialog();

3)テンプレートを「JS子画面の値を親画面に戻す_子画面.cpt」として保存

2.2親画面を作成

1)データ準備

データセットds1を作成：SELECT * FROM Products WHERE CategoryID = '${p_category}'

子画面から戻された値は${p_category}となります。

2)画面作成

タイトル設定、データセットの項目を画面上に設定

ウィジェット名を「p_category」に変更

子画面を開く用のボタンを追加

ボタンのクリックイベント設定

Javascript文

window.form = this.options.form;
var $iframe = $("<iframe id='inp' name='inp' width='100%' height='100%' scrolling='no' frameborder='0'>"); // iframeの属性設定
$iframe.attr("src", "http://localhost:8075/webroot/decision/view/report?viewlet=JS子画面の値を親画面に戻す_子画面.cpt&ref_t=design&op=view&ref_c=9e2cfd00-e8b1-4f7a-b870-bd0574f39811"); 
//JS子画面の値を親画面に戻す_子画面.cptは子画面のテンプレート名
var o = {
title : "カテゴリを選択",
width : 600,//ダイアログボックスの幅さ
height: 300//ダイアログボックスの高さ
};
FR.showDialog(o.title, o.width, o.height, $iframe,o); //ダイアログボックスを開く

3)テンプレートを「JS子画面の値を親画面に戻す_親画面.cpt」として保存

2.3効果確認

「JS子画面の値を親画面に戻す_親画面.cpt」をプレビューする

注意：モバイル側は利用できません

JS子画面の値を親画面に戻す_子画面.cpt

JS子画面の値を親画面に戻す_親画面.cpt