[売上予測を置き換える]javascriptからAPEXを呼び出して画面の一部を再描画する
しばらく更新をサボっていました。というのも、弊社リバネス９月に社員面談があるのでその準備で色々と開発に追われていまして。細かく言えば書きたいことは色々あるような気がするのだけど思い出せないので少しずつ書いていきたいと思います。
Salesforceにはデフォルトの機能として売上予測という仕組みがあります。これはこれで便利でして、Salesforceを実務に導入する際に一番効いたのはこれでした。営業状況が一覧できますし、売上目標のデータを作成しておけば、事業計画に対する達成度が一目瞭然です。素晴らしい機能。
とはいっても、会社には色々な事情がありますし、カスタマイズしたいなって思うのは自然なことだと思うんですよね。それで作ってみました。
カスタム売上予測画面
一番左は事業部名です。ALLは全社積み上げ。
各事業部毎に事業計画をひいているので、その目標値が出るようになっています。
請求済み・契約済み請求前・確度高・商談初期段階は、商談の売上予測分類に設定してあるのそのままですが、それ以外に達成値(請求済み+契約済み請求前)、達成まで(目標-達成値)、達成まで(目標-達成値-確度高)、未開拓(目標-達成まで)、先週比
なんかを加えています。
デフォルトの売上予測はセルをクリックすると、下部に商談一覧が出るのが魅力的で、何月にどんな商談があるのかなどが一目瞭然なのですが、これをVisualforceページで実装したいと試行錯誤してみました。そうすることで、上のテーブルのセルをクリックすると、それに対応した商談リストが画像下部に表示されるようになるという訳です。
クリックするセルにjavascriptを仕込む
Apexへの表記方法は直接HTMLを生成してしまう方法を取っていますので以下の通りです。
[code]<td style="text-align:right;" onclick="(function(){var devstring=\'' + param1 + '\';var which=\'param2\'; rerenderOppsListTable(param1,param2);})();">[/code]
こんな感じです。
読み込む必要のあるパラメータがあると思いますのでそれらを定義して読み込みます。
ここの場合は param1に事業部名、param2にどのデータが必要か(請求済みとかそういう奴ですね)が入るようになっていて、rerenderOppsListTableというjsにパラメータが渡るようになっています。
次に、VisualforcePage側への表記です。
[code]
<apex:actionFunction name="rerenderOppsListTable" action="{!getClickOpps}" rerender="oppsListTable">
<apex:param name="param1" value="param1" />
<apex:param name="param2" value="param2" />
</apex:actionFunction>
<script type="text/javascript">
rerenderOppsListTable(param1,param2);
</script>
[/code]
これに加えて先ほどのAPEXで作ったtableを表示する必要があります。
セルをクリックすると、jsのrerenderOppsListTableが呼ばれます。
rerenderOppsListTableがapex:actionFunctionを呼び、パラメータになっているparam1,param2を取得して、actioのgetClickOppsを呼び出します。
getClickOppsはAPEXの関数です。
ここで、商談リストを取得するための関数を作ります。
APEX
[code]
public pagereference getClickOpps(){
}
[/code]
ここで注意しなければならないのが、pagereference型になること。
この関数の中でLIST
APEX
[code]
public LIST<Opportunity> clickOpps{get;set;}
[/code]
こいつを書いておくことでVisualforceページ側にデータが渡り、apex:actionFunctionが
rerender="oppsListTable"
としてあるので
VisualforcePageの
[code]<apex:pageBlockTable title="商談リスト" value="{!clickOpps}" var="op" id="oppsListTable" cellspacing="1">[/code]
としてある部分が再描画されるという仕組みになっています。