【Apex+Visualforce】親画面と子画面で値を受け渡すサンプル

Salesforce

Visualforceページで、親画面⇔子画面間の値を受け渡す方法。
色々なやり方があると思うので、いちサンプルです。

サンプルソース

親画面

親画面から子画面へは、URLにパラメータをくっつけて渡してます。

子画面

子画面から親画面へは、親画面のJavascript経由でパラメータを渡しています。

動作確認

親画面を表示。

「小画面表示」ボタンをクリックで、小画面を表示します。ちゃんとパラメータが渡っていることが確認できます。

「小画面を閉じる」ボタンクリックで、小画面が閉じます。親画面にもちゃんとパラメータが渡っています。

ちなみにAPI Versionは46です。

メモ:小画面から、親画面のコンポーネントに値を設定する

サンプルソースでは小画面→親画面にJavascript経由で値を渡していますが、window.openerを使って、親画面のコンポーネントに直接値を設定することもできます。

ためしに親画面にこんなのを付け足して

小画面のJavascriptから、それらに値を設定してあげます。

こんな感じで、小画面から親画面のコンポーネントに直接値を設定できました。

上記では小画面から親画面に値を設定する例を書きました、同じ要領で小画面から親画面の値を参照することも可能です。

VisualforceにおけるgetElementByIdの使い方は下記を参照。
【Visualforce】JavascriptからgetElementByIdで値を参照する方法

メモ:小画面から実行する親画面のfunctionを可変にしたい場合

サンプルソースでは小画面から実行する親画面のJavascriptのfunctionをベタで書きました。

例えばこのfunctionを可変にしたい場合。
小画面が閉じられた時、常にgetParamFromPopup()を実行するのではなく、条件によっては別のfunctionを実行したい場合。

パッと思いつくのはevalを使う方法。

これで一応やりたいことはできますが、evalを使用すること自体が微妙ですよね。

なんか他にやり方がないものかと探していたら、こんな記事を見つけたので参考に実装してます。結論から言うと、eval使わずにfunctionを可変にできました(ありがとうございます)。
関数名を文字列で指定して動的に呼び出す機構(evalを使わず)

まずは親画面のfunctionを配列化します。検証のため getParamFromPopup1 と getParamFromPopup2 を作ります。

小画面のJavascript処理はこんな感じにします。

小画面を閉じる時のパラメータが func=”getParamFromPopup1″の場合

続いてfunc=”getParamFromPopup2″の場合

出来ました。

コメント

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