投稿者:Mitsuhiro Okamoto | 投稿日:2011年10月31日(月) 07:26

Flow Winter '12リリースでついにクラウドベースのFlow DesignerがBetaリリースされました。Flow Designerを使えば、今まではVisualforceを利用しなければ作成出来なかった、複数画面に渡るウィザードや入力内容によって条件分岐する画面などがコードを書かなくとも簡単に作成・編集できるようになります。

またApexクラスからやVisualforceタグを使ってFlowのコンポーネントへアクセスが可能ですので、Visualforce内にFlowページを埋め込むといったことも可能です。以下はFlowで入力されたCase番号からVFページ上にデータを読み込むサンプルです。

 

VisualforcePage : caseflow

<apex:page controller="FlowpageController" sidebar="false">
<div style="float: left; width: 400px; padding: 10px;">
  <flow:interview name="CaseFlow" interview="{!caseFlow}" reRender="myPanel" />
</div>
<apex:outputPanel id="myPanel" style="float: left; min-width:400px; padding: 10px;">
  <apex:pageBlock title="ケース内容">
    <apex:pageBlockSection columns="1">
      <apex:outputField value="{!sourceCase.ID}"/>
      <apex:outputField value="{!sourceCase.CaseNumber}"/>
      <apex:outputField value="{!sourceCase.Subject}"/> 
    </apex:pageBlockSection> 
  </apex:pageblock>
</apex:outputPanel>
</apex:page>

 

<flow:interview>タグによってflowをVFページ上に配置できます。このタグはreRender属性を持っているので、フローの遷移時にダイナミックに再描画する箇所を指定できます。

以下はApexコントローラクラスです。

Apex Class : FlowpageController

public with sharing class FlowpageController {

    public Flow.Interview.CaseFlow caseFlow {get;set;}

    public Case sourceCase{
        get{
            try{
                List<Case> results = [SELECT Id,CaseNumber,Subject FROM Case Where CaseNumber = :caseFlow.vaCaseNo];
                if(results.size() !=0){
                    return results[0];
                }
            }catch(System.QueryException e){
                //just Demo, ignore;
            }
            return new Case();
        }
        set;
    }
    
    public FlowpageController(){
        caseFlow = new Flow.Interview.CaseFlow(new Map<String, Object>());
    }
}

 


こちらではFlow.Interview.<フロー名>というクラスが宣言されている所が確認できます。

 

エンドユーザの方はForce.com Flowだけを使って画面開発することが多いでしょうが、開発者の方は是非Visualforceともインテグレーションして、より高度な画面デザインにチャレンジしてみて下さい。