JSウィジェットの表示/非表示(使用可能/不可)

1.1 問題説明

実際運用する時、動的にウィジェットを表示/非表示に設定、或いは使用可能/使用不可に設定するニーズがあります。

下記のよう：

表示/非表示

使用可能/不可

1.2 実現方法

Javascriptでウィジェットオブジェクトを取得して下記のメソッドで実現できます。

表示/非表示：setVisible(true/false)

使用可能/使用不可：setEnable(true/false)

2.1 表示/非表示

1)テンプレートを作成

下記のようなテンプレートを作成：

①データセットを追加

　ds_地域：SELECT 地域 FROM 販売量

　ds_販売員：SELECT 販売員 FROM 販売量 WHERE 地域 = '${p_area}'

　ds_データ：SELECT * FROM 販売量 WHERE 地域 = '${p_area}' AND 販売員 = '${p_saler}'

②ウィジェットを追加：

　地域ラベル「label0」

　地域選択ウィジェット「p_area」

　販売員ラベル「label1」非表示

　販売員選択ウィジェット「p_saler」非表示

　検索ボタン

③帳票作成

2)イベント設定

プルダウンボックスウィジェット「p_area」に編集後イベントを追加：

Javascript文：

//ウィジェットを取得
var w_area = this.options.form.getWidgetByName("p_area");
var w_label1 = this.options.form.getWidgetByName("label1");
var w_saler = this.options.form.getWidgetByName("p_saler");
if(w_area.getValue().length!=0){
//地域にが値がある場合、販売員ラベルとプルダウンウィジェットを表示
	w_label1.setVisible(true);
	w_saler.setVisible(true);
}else{
	w_label1.setVisible(false);
	w_saler.setVisible(false);
}

3)効果確認

テンプレートを保存してプレビューボタンをクリック：

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

2.2 使用可能/不可

1)テンプレートを作成

下記のようなテンプレートを作成

①データセットを追加

　ds_地域：SELECT 地域 FROM 販売量

　ds_販売員：SELECT 販売員 FROM 販売量 WHERE 地域 = '${p_area}'

　ds_データ：SELECT * FROM 販売量 WHERE 地域 = '${p_area}' AND 販売員 = '${p_saler}'

②ウィジェットを追加：

　地域ラベル「label0」

　地域選択ウィジェット「p_area」

　販売員ラベル「label1」

　販売員選択ウィジェット「p_saler」使用不可

　検索ボタン

③帳票作成

2)イベント設定

プルダウンボックスウィジェット「p_area」に編集後イベントを追加：

Javascript文：

//ウィジェットを取得
var w_area = this.options.form.getWidgetByName("p_area");
var w_saler = this.options.form.getWidgetByName("p_saler");
if(w_area.getValue().length!=0){
//地域に値がある場合、販売員のプルダウンウィジェットを使用可能にする
	w_saler.setEnable(true);
}else{
	w_saler.setEnable(false);
}

3)効果確認

テンプレートを保存してプレビューボタンをクリック：

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

3.1 表示/非表示

JS条件別でウィジェット表示と非表示.cpt

3.2 使用可能/不可

JS条件別でウィジェット使用可能と使用不可.cpt