Embed Flows in Visualforce Pages

To customize a flow’s look and feel or enhance its functionality, embed it in a Visualforce page. If your organization has flows enabled for sites and portals, use the Visualforce page to deliver the flow to your Force.com site, portal, or community.
Note

Note

Users can run only flows that have an active version. If the flow you embed doesn't have an active version, users see an error message. If the flow you embed includes a subflow element, the flow that is referenced and called by the subflow element must have an active version.

To add a flow to a Visualforce page, embed it using the <flow:interview> component:
  1. Find the flow's unique name:
    1. From Setup, enter Flows in the Quick Find box, then select Flows.
    2. Click the name of the flow that you want to embed.
  2. Define a new Visualforce page or open one that you want to edit.
  3. Add the <flow:interview> component, somewhere between the <apex:page> tags.
  4. Set the name attribute to the unique name of the flow. For example:
    <apex:page>
    <flow:interview name="MyUniqueFlowName"/>
    </apex:page>
    Note

    Note

    If the flow is from a managed package, the name attribute must be in this format: namespace.flowuniquename.

  5. Restrict which users can run the flow by setting the page security for the Visualforce page that contains it.
    To run the flow, external users (such as on a community) need access to the Visualforce page. To run the flow, internal users need access to the Visualforce page and either:
    • The "Run Flows" permission
    • The Force.com Flow User field enabled on their user detail page
  6. Specify what happens when a user clicks Finish in a flow screen by setting the flow finish behavior.

Setting Variable Values in a Flow

In this example, we'll build a simple flow to allow customer support agents to troubleshoot modem issues by creating a case. You can set the value of variables when starting a flow through the <apex:param> component. For our example, to set the case number variable called vaCaseNumber with the initial value 01212212 when the flow loads, use the following markup:
<apex:page>
    <flow:interview name="ModemTroubleShooting">
        <apex:param name="vaCaseNumber" value="01212212"/>
    </flow:interview>
</apex:page>
You can also leverage standard Visualforce controllers to set variables. For example, if the Visualforce page is using the standardCase controller, you can enhance the page to pass in the data from the standard controller:
<apex:page standardController="Case" tabStyle="Case" >
    <flow:interview name="ModemTroubleShooting">
        <apex:param name="vaCaseNumber" value="{!Case.CaseNumber}"/>
    </flow:interview>
</apex:page>

For more examples of setting variable values, see Set Flow Variable Values from a Visualforce Page. For information about getting variable values from a flow to display in a Visualforce page, see Get Flow Variable Values to a Visualforce Page.

Setting the finishLocation Attribute

Building on our modem troubleshooting example, we'll also set the finishLocation attribute to redirect the user to the Salesforce home page when they click on the Finish button at the end of the flow:
<apex:page standardController="Case" tabStyle="Case" >
    <flow:interview name="ModemTroubleShooting" finishLocation="{!URLFOR('/home/home.jsp')}">
        <apex:param name="vaCaseNumber" value="{!case.CaseNumber}"/>
    </flow:interview>
</apex:page>

For more examples of setting finishLocation, see Configure the finishLocation Attribute in a Flow.

Previous
Next