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>:

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

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:

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’.

Get the latest Salesforce Developer blog posts and podcast episodes via Slack or RSS.

Add to Slack Subscribe to RSS