Newer Version Available

This content describes an older version of this product. View Latest

Embedding Flows in Visualforce Pages

To customize a flow’s look and feel or enhance its functionality you can embed it as a component in a Visualforce page. If your organization has flows enabled for sites and portals, you can then deliver the flow to your Force.com site, Customer Portal, or partner portal users.

Users can only run 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.

Note

To add a flow to a Visualforce page, embed it using the <flow:interview> component:
  1. Find the flow's unique name:
    1. Go to the flow list page. From Setup, click Create | Workflow & Approvals | Flows.
    2. Click the name of the flow 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:
    1<apex:page>
    2<flow:interview name="MyUniqueFlowName"/>
    3</apex:page>

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

    Note

  5. Restrict which users can run the flow by setting the page security for the Visualforce page that contains it.

    If the Visualforce page containing the flow is delivered externally to site or portal users, any of those users with access to the Visualforce page can run the embedded flow.

    If the Visualforce page containing the flow is delivered to users within your organization through a custom Web tab, link, or button, users must have access to the page. They must also have the “Run Flows” permission or have 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:
1<apex:page>
2    <flow:interview name="ModemTroubleShooting">
3        <apex:param name="vaCaseNumber" value="01212212"/>
4    </flow:interview>
5</apex:page>

You can only set variables at the beginning of an interview. The <apex:param> tags are evaluated only once when the flow is started.

You can only set variables that allow input access and get variables that allow output access. For each flow variable, input and output access is controlled by these fields: For a variable that doesn’t allow input or output access, attempts to set or get the variable are ignored, and compilation may fail for the Visualforce page, its <apex:page> component, or the Apex class.
  • Input/Output Type variable field in the Cloud Flow Designer
  • isInput and isOutput fields on FlowVariable in the Metadata API

Note

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:
1<apex:page standardController="Case" tabStyle="Case" >
2    <flow:interview name="ModemTroubleShooting">
3        <apex:param name="vaCaseNumber" value="{!Case.CaseNumber}"/>
4    </flow:interview>
5</apex: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:
1<apex:page standardController="Case" tabStyle="Case" >
2    <flow:interview name="ModemTroubleShooting" finishLocation="{!URLFOR('/home/home.jsp')}">
3        <apex:param name="vaCaseNumber" value="{!case.CaseNumber}"/>
4    </flow:interview>
5</apex:page>

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