Dynamic Visualforce and Visual Workflow with Rerender

In preparation for my Cloudforce 2011 New York City session, I’ve been getting up to speed on the new Cloud Flow Designer, debuting as a beta in the Winter ’12 release. I want to show how a Flow embedded in a Visualforce page can interact with other elements on the page – in my demo an <iframe> shows a page relating to the user’s progress through the Flow, the page URL updated via a variable set in the Flow. The Visualforce Developer’s Guide describes how a flow can cause specific page elements to be refreshed, and my initial attempt used this feature to refresh an <outputPanel> containing some JavaScript that would update the <iframe>:

<apex:page controller="InsuranceController" sidebar="false">
  <div style="float: left; width: 400px; padding: 10px;">
    <flow:interview name="InsuranceFlow" interview="{!myFlow}" rerender="myScript"/>
  </div>
  <div style="float: left;">
    <iframe id="myFrame" frameborder="0" width="600" height="450"/>
  </div>
  <apex:outputPanel id="myScript">
    <script type="text/javascript">
      document.getElementById('myFrame').src = '{!myFlow.resource}';
    </script>
  </apex:outputPanel>
</apex:page>

My page controller simply created the Flow and made it available to the Visualforce Page:

public with sharing class InsuranceController {
    public Flow.Interview.InsuranceFlow myFlow {get;set;}

    public InsuranceController() {
        myFlow = new Flow.Interview.InsuranceFlow(new Map<String, Object>());
    }
}

This worked well, and would be a great technique for driving more complex interactions – for example, hiding and showing page elements. However, taking a second look, I realized that it’s simply overkill for updating an <iframe> – all I need to do is directly set the <iframe>‘s <src> property to the Flow’s resource variable:

<apex:page controller="InsuranceController" sidebar="false">
  <div style="float: left; width: 400px; padding: 10px;">
    <flow:interview name="InsuranceFlow" interview="{!myFlow}" reRender="myPanel"/>
  </div>
  <apex:outputPanel id="myPanel" style="float: left;">
    <iframe src="{!myFlow.resource}" frameborder="0" width="600" height="450"/>
  </apex:outputPanel>
</apex:page>

Equivalent functionality in 5 fewer lines of code, with no JavaScript required. I guess I have JavaScript on the brain from spending so much time with Node.js! I’ve exposed the Flow as a Site, so you can see the effect here.

For more on Visual Workflow and the Cloud Flow Designer, watch the replay of the recent webinar and, if you’re in the NYC area, register free for Cloudforce 2011 New York City and come see my session, along with Sandeep on ‘Developing Mobile Apps for Force.com and Database.com’ and Quinton‘s ‘Five Developer Tips Every Admin Needs to Know’.

Published
October 27, 2011
Topics:

Leave your comments...

Dynamic Visualforce and Visual Workflow with Rerender