Render Flows with Visualforce. salesforce Visualforce Developer Guide

CHAPTER 17 Render Flows with Visualforce

The standard user interface for running a flow can’t be customized by using Visual Workflow. However, once you embed a flow in a

Visualforce page, you can use Apex code and Visualforce markup to configure the flow at run time—such as to pass values between the Visualforce page and the flow or to customize the look and feel of the flow at run time.

A flow is an application, built with Visual Workflow, that collects, updates, edits, and creates Salesforce information.

The following topics demonstrate how to embed and configure flows in a Visualforce page.

IN THIS SECTION:

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.

An Advanced Example of Using <flow:interview>

The

<flow:interview >

component is designed to make it easy to develop complex Visualforce interactions. You can access additional features in your flow by creating a custom controller. With custom controllers, you can build a page with multiple components that can interact with each other. Any flow within your organization can be individually referenced by its own Apex type, and the variables in the flow can be accessed as member variables.

Set Flow Variable Values from a Visualforce Page

After you embed your flow in a Visualforce page, set the initial values of variables, sObject variables, collection variables, and sObject collection variables through the

<apex:param >

component.

Get Flow Variable Values to a Visualforce Page

Flow variable values can be displayed in a Visualforce page. Once you’ve embedded your flow in a Visualforce page, you can use

Visualforce markup to get values for variables or sObject variables. To display values for a collection variable or an sObject collection variable, you can use Visualforce markup to get the individual values contained in the collection.

Control Whether Users Can Pause a Flow from a Visualforce Page

After you embed a flow in a Visualforce page with the

<flow:interview >

component, consider whether you want to let users pause flows from that page. Set the allowShowPause

attribute to false to prevent users from pausing.

Customize How Users Resume Paused Flow Interviews

By default, users can resume their paused interviews from the Paused Interviews component on their home page. If you want to customize how and where users can resume their interviews, use the pausedInterviewId

attribute on the

<flow:interview >

component.

Configure the finishLocation Attribute in a Flow

If finishLocation

isn’t specified, users who click Finish start a new interview and see the first screen of the flow. You can shape what happens when a user clicks Finish on the final screen by using the

URLFOR

function, the

$Page

variable, or a controller.

253

Render Flows with Visualforce Embed Flows in Visualforce Pages

Customize a Flow’s User Interface

After you’ve embedded a flow in a Visualforce page, you can customize what the flow looks like at run time by applying custom styles using CSS. Using a combination of flow attributes and CSS classes, you can customize the individual parts of a flow, such as the button location, button style, background, and the look and feel of the screen labels.

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

a. From Setup, enter

Flows

in the

Quick Find

box, then select Flows.

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

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 >

254

Render Flows with Visualforce An Advanced Example of Using <flow:interview>

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

on page 257. For information about

getting variable values from a flow to display in a Visualforce page, see Get Flow Variable Values to a Visualforce Page

on page 261.

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

on page 265.

An Advanced Example of Using

<flow:interview >

The

<flow:interview >

component is designed to make it easy to develop complex Visualforce interactions. You can access additional features in your flow by creating a custom controller. With custom controllers, you can build a page with multiple components that can interact with each other. Any flow within your organization can be individually referenced by its own Apex type, and the variables in the flow can be accessed as member variables.

Note: You can set only variables that allow input access, and you can get only variables that allow output access. For each flow variable, input and output access is controlled by:

•

The

Input/Output Type

variable field in the Cloud Flow Designer

•

The isInput

and isOutput

fields on

FlowVariable

in the Metadata API

For a variable that doesn’t allow input or output access, attempts to get the variable are ignored, and compilation may fail for the

Visualforce page, its

<apex:page >

component, or the Apex class.

For our next example, the flow with unique name “ModemTroubleShooting” is referenced as

Flow.Interview.ModemTroubleShooting

. The markup illustrates how to display a value of a flow variable in a different part of the page:

<apex:page Controller= "ModemTroubleShootingCustomSimple" tabStyle= "Case" >

<flow:interview name= "ModemTroubleShooting" interview= "{!myflow}" />

<apex:outputText value= "Default Case Prioriy: {!casePriority}" />

</apex:page >

Note:

If the flow is from a managed package, the name

attribute must be in this format: namespace.flowuniquename

.

255

Render Flows with Visualforce An Advanced Example of Using <flow:interview>

The controller for the above markup looks like this: public class ModemTroubleShootingCustomSimple {

// You don't need to explicitly instantiate the Flow object;

// the class constructor is invoked automatically public Flow.Interview.ModemTroubleShooting myflow { get; set; } public String casePriority; public String getCasePriority() {

// Access flow variables as simple member variables with get/set methods if (myflow == null ) return 'High' ; else return myflow.vaCasePriority;

}

}

If you’re using a custom controller, you can also set the initial values of the variables at the beginning of the flow in the constructor of the flow. Passing in variables using the constructor is optional and isn’t necessary if you’re using

<apex:param >

tags to set the value.

Here’s an example of a custom controller that sets the values of flow variables in a constructor: public class ModemTroubleShootingCustomSetVariables { public Flow.Interview.ModemTroubleShooting myflow { get; set; } public ModemTroubleShootingCustomSetVariables() {

Map< String , Object > myMap = new Map< String , Object >(); myMap.put( 'vaCaseNumber' , '123456' ); myflow = new Flow.Interview.ModemTroubleShooting(myMap);

} public String caseNumber { set; } public String getCaseNumber() { return myflow.vaCaseNumber;

}

}

You can use the getVariableValue

method in the

Flow.Interview

class to enable a Visualforce controller to access the value of a flow variable. The variable may be in the flow embedded in the Visualforce page or in a separate flow that is called by a subflow element. The returned variable value comes from whichever flow the interview is currently running. If the specified variable can’t be found in that flow, the method returns null

. This method checks for the existence of the variable at run time only, not at compile time.

The following sample uses the getVariableValue

method to obtain breadcrumb (navigation) information from the flow embedded in the Visualforce page. If that flow contains subflow elements, and each of the referenced flows also contains a

vaBreadCrumb

variable, the Visualforce page can provide users with breadcrumbs regardless of which flow the interview is running.

public class SampleController {

//Instance of the flow public Flow.Interview.Flow_Template_Gallery myFlow {get; set;} public String getBreadCrumb() {

String aBreadCrumb; if (myFlow== null ) { return 'Home' ;} else aBreadCrumb = ( String ) myFlow.getVariableValue( 'vaBreadCrumb' ); return (aBreadCrumb== null ?

'Home' : aBreadCrumb);

256

Render Flows with Visualforce Set Flow Variable Values from a Visualforce Page

}

}

The following table shows the differences in the naming of supported data types between the flow and Apex.

Flow

Text

Number

Currency

Date

Boolean

Apex

String

Decimal

Decimal

Date, DateTime

Boolean

As it’s a good practice to write tests against your Apex code, the following is a trivial example of writing a test class for

ModemTroubleShootingCustomSetVariables

:

@isTest private class ModemTroubleShootingCustomSetVariablesTest { static testmethod void ModemTroubleShootingCustomSetVariablestests() {

PageReference pageRef = Page.ModemTroubleShootingSetVariables;

Test.setCurrentPage(pageRef);

ModemTroubleShootingCustomSetVariables mytestController = new ModemTroubleShootingCustomSetVariables();

System.assertEquals(mytestController.getcaseNumber(), '01212212' );

}

}

Setting the

reRender

Attribute

By using the reRender

attribute, the

<flow:interview />

component re-renders the flow without refreshing the whole page:

<apex:page Controller= "ModemTroubleShootingCustomSimple" tabStyle= "Case" >

<flow:interview name= "ModemTroubleShooting" interview= "{!myflow}" reRender= "casePrioritySection" />

<apex:outputText id= "casePrioritySection" value= "Default Case Prioriy: {!casePriority}" />

</apex:page >

Warning:

If you don’t set the reRender

attribute, when you click a button to navigate to a different screen in a flow, the entire

Visualforce page refreshes, not just the

<flow:interview >

component.

Set Flow Variable Values from a Visualforce Page

After you embed your flow in a Visualforce page, set the initial values of variables, sObject variables, collection variables, and sObject collection variables through the

<apex:param >

component.

257

Render Flows with Visualforce Set Flow Variable Values from a Visualforce Page

Note: You can set variables only at the beginning of an interview. The

<apex:param >

tags are evaluated only once, when the flow is launched.

You can set only variables that allow input access. For each flow variable, input access is controlled by:

•

The

Input/Output Type

variable field in the Cloud Flow Designer

•

The isInput

field on

FlowVariable

in the Metadata API

If you reference a variable that doesn’t allow input access, attempts to set the variable are ignored. Compilation can fail for the

Visualforce page, its

<apex:page >

component, or the Apex class.

The following table lists the ways you can set a flow’s variable, sObject variable, and sObject collection variable values using Visualforce.

Method Variables sObject Variables Collection Variables sObject Collection

Variables

Without a controller

With a standard controller

With a standard List controller

With a custom Apex controller

With an Interview Map

Setting Variable Values without a Controller

This example sets myVariable

to the value

01010101

when the interview starts.

<apex:page >

<flow:interview name= "flowname" >

<apex:param name= "myVariable" value= "01010101" />

</flow:interview >

</apex:page >

Setting Variable Values with a Standard Controller

You can use standard Visualforce controllers to set variables or sObject variables by passing in data from a record. This example sets the initial value of myVariable

to the Visualforce expression

{!account}

when the interview starts.

<apex:page standardController= "Account" tabStyle= "Account" >

<flow:interview name= "flowname" >

<apex:param name= "myVariable" value= "{!account}" />

</flow:interview >

</apex:page >

258

Render Flows with Visualforce Set Flow Variable Values from a Visualforce Page

Setting an sObject Collection Variable Value with a Standard List Controller

Because sObject collection variables represent an array of values, you must use a standard list controller or a custom Apex controller.

This example sets myCollection

to the value of

{!accounts}

when the interview starts.

<apex:page standardController= "Account" tabStyle= "Account" recordSetVar= "accounts" >

<flow:interview name= "flowname" >

<apex:param name= "myCollection" value= "{!accounts}" />

</flow:interview >

</apex:page >

Setting Variable Values with a Custom Apex Controller

For finer control over your Visualforce page than a standard controller allows, write a custom Apex controller that sets the variable value, and then reference that controller in your Visualforce page. This example uses Apex to set myVariable

to a specific account’s Id when the interview starts.

public class MyCustomController { public Account apexVar {get; set;}

} public MyCustomController() { apexVar = [

SELECT Id, Name FROM Account

WHERE Name = ‘Acme’ LIMIT 1];

}

<apex:page controller= "MyCustomController" >

<flow:interview name= "flowname" >

<apex:param name= "myVariable" value= "{!apexVar}" />

</flow:interview >

</apex:page >

This example uses Apex to set an sObject collection variable myAccount

to the

Id

and

Name

field values for every record with a

Name

of

Acme

.

public class MyCustomController { public Account[] myAccount { get { return [

SELECT Id, Name FROM account

WHERE Name = 'Acme'

ORDER BY Id

] ;

} set { myAccount = value;

}

} public MyCustomController () {

259

Render Flows with Visualforce Set Flow Variable Values from a Visualforce Page

}

}

<apex:page id= "p" controller= "MyCustomController" >

<flow:interview id= "i" name= "flowname" >

<apex:param name= "accountColl" value= "{!myAccount}" />

</flow:interview >

</apex:page >

Setting Variable Values with an Interview Map

This example uses an Interview map to set the value for accVar

to a specific account’s Id when the interview starts.

public class MyCustomController { public Flow.Interview.TestFlow myflow { get; set; }

}

<apex:page controller= "MyCustomController" >

<flow:interview name= "flowname" interview= "{!myflow}" />

</apex:page >

Here’s a similar example that sets the value for accVar

to a new account when the interview starts.

public class MyCustomController { public Flow.Interview.TestFlow myflow { get; set; }

} public MyCustomController() {

Map< String , List< Object >> myMap = new Map< String , List< Object >>(); myMap.put( 'accVar' , new Account(name = 'Acme' )); myflow = new Flow.Interview.ModemTroubleShooting(myMap);

}

} public MyCustomController() {

Map< String , Object > myMap = new Map< String , Object >(); myMap.put( 'accVar' , [SELECT Id FROM Account

WHERE Name = 'Acme' LIMIT 1]); myflow = new Flow.Interview.ModemTroubleShooting(myMap);

<apex:page controller= "MyCustomController" >

<flow:interview name= "flowname" interview= "{!myflow}" />

</apex:page >

This example uses a map to add two values to a string collection variable ( stringCollVar

) and two values to a number collection variable ( numberCollVar

).

public class MyCustomController { public Flow.Interview.flowname MyInterview { get; set; } public MyCustomController() {

String [] value1 = new String []{ 'First' , 'Second' };

Double [] value2 = new Double []{999.123456789, 666.123456789};

Map< String , Object > myMap = new Map< String , Object >();

260

Render Flows with Visualforce Get Flow Variable Values to a Visualforce Page myMap.put( 'stringCollVar' , value1); myMap.put( 'numberCollVar' , value2);

MyInterview = new Flow.Interview.flowname(myMap);

}

}

<apex:page controller= "MyCustomController" >

<flow:interview name= "flowname" interview= "{!MyInterview}" />

</apex:page >

Get Flow Variable Values to a Visualforce Page

Flow variable values can be displayed in a Visualforce page. Once you’ve embedded your flow in a Visualforce page, you can use Visualforce markup to get values for variables or sObject variables. To display values for a collection variable or an sObject collection variable, you can use Visualforce markup to get the individual values contained in the collection.

Note: You can get only variables that allow output access. For each flow variable, output access is controlled by:

•

The

Input/Output Type

variable field in the Cloud Flow Designer

•

The isOutput

field on

FlowVariable

in the Metadata API

If you reference a variable that doesn’t allow output access, attempts to get the variable are ignored. Compilation can fail for the

Visualforce page, its

<apex:page >

component, or the Apex class.

The following example uses an Apex class to get an sObject variable value from a flow and then displays it in a Visualforce page.

public class FlowController { public Flow.Interview.flowname myflow { get; set; } public Case apexCaseVar; public Case getApexCaseVar() { return myflow.caseVar;

}

}

<apex:page controller= "FlowController" tabStyle= "Case" >

<flow:interview name= "flowname" interview= "{!myflow}" />

<apex:outputText value= "Default Case Priority: {!apexCaseVar.Priority}" />

</apex:page >

This example uses an Apex class to get the values that are stored in a string collection variable ( emailsCollVar

) in the flow. Then it uses a Visualforce page to run the flow interview. The Visualforce page iterates over the flow’s collection variable and displays the values for each item in the collection.

public class FlowController { public Flow.Interview.flowname myflow { get; set; } public List< String > getVarValue() { if (myflow == null ) { return null ;

} else { return (List< String >)myflow.emailsCollVar;

}

261

Render Flows with Visualforce Get Flow Variable Values to a Visualforce Page

}

}

<apex:page controller= "FlowController" >

<flow:interview name= "flowname" interview= "{!myflow}" />

<apex:repeat value= "{!varValue}" var= "item" >

<apex:outputText value= "{!item}" /> <br/ >

</apex:repeat >

</apex:page >

The following example uses an Apex class to set the flow to

{!myflow}

and then uses a Visualforce page to run the flow interview.

The Visualforce page uses a data table to iterate over the flow’s sObject collection variable and display the values for each item in the collection.

public class MyCustomController { public Flow.Interview.flowname myflow { get; set; }

}

<apex:page controller= "MyCustomController" tabStyle= "Account" >

<flow:interview name= "flowname" interview= "{!myflow}" reRender= "nameSection" />

<!-- The data table iterates over the variable set in the "value" attribute and sets that variable to the value for the "var" attribute, so that instead of referencing {!myflow.collectionVariable} in each column, you can simply refer to "account".-->

<apex:dataTable value= "{!myflow.collectionVariable}" var= "account" rowClasses= "odd,even" border= "1" cellpadding= "4" >

<!-- Add a column for each value that you want to display.-->

<apex:column >

<apex:facet name= "header" >Name </apex:facet >

<apex:outputlink value= "/{!account['Id']}" >

{!account['Name']}

</apex:outputlink >

</apex:column >

<apex:column >

<apex:facet name= "header" >Rating </apex:facet >

<apex:outputText value= "{!account['Rating']}" />

</apex:column >

<apex:column >

<apex:facet name= "header" >Billing City </apex:facet >

<apex:outputText value= "{!account['BillingCity']}" />

</apex:column >

<apex:column >

</apex:column >

</apex:dataTable >

</apex:page >

<apex:facet name= "header" >Employees </apex:facet >

<apex:outputText value= "{!account['NumberOfEmployees']}" />

Depending on the contents of the sObject collection variable in your flow, here’s what that data table looks like.

262

Render Flows with Visualforce Control Whether Users Can Pause a Flow from a Visualforce

Page

Control Whether Users Can Pause a Flow from a Visualforce Page

After you embed a flow in a Visualforce page with the

<flow:interview >

component, consider whether you want to let users pause flows from that page. Set the allowShowPause

attribute to false to prevent users from pausing.

Whether the Pause button appears depends on three settings.

•

Your organization’s Process Automation settings must have Let Users Pause Flows enabled.

•

For this

<flow:interview >

, allowShowPause

must not be false. The default value is true.

•

Each screen must be configured to show the Pause button.

Example:

In a Visualforce page, you’ve embedded a flow that includes three screens. Screen 1 is configured to show the Pause button. Screens 2 and 3 are configured to not show the Pause button.

Result Pause button Let Users Pause Flows

(Process Automation setting)

Enabled allowShowPause

(Visualforce component)

true

or not set

Enabled

Not enabled false true

or not set

Pause button appears only on the first screen

Pause button doesn’t appear for any screens in this Visualforce page

Pause button doesn’t appear for any screens

This example embeds the MyUniqueFlow flow in a Visualforce page and doesn’t allow the Pause button to appear.

<apex:page >

<flow:interview name= "MyUniqueFlow" allowShowPause= "false" />

</apex:page >

263

Render Flows with Visualforce Customize How Users Resume Paused Flow Interviews

Customize How Users Resume Paused Flow Interviews

By default, users can resume their paused interviews from the Paused Interviews component on their home page. If you want to customize how and where users can resume their interviews, use the pausedInterviewId

attribute on the

<flow:interview > component.

The following example shows how you can resume an interview—or start a new one—from a button on a page layout. When users click Survey Customer from a contact record, the Visualforce page does one of two things, depending on whether the user has any paused interviews for the “Survey Customers” flow.

•

If the user does, it resumes the first one.

•

If the user doesn’t, it starts a new one.

Create the Visualforce and Apex Controller

Because the Visualforce page will be referenced in a contact-specific button, it must use that standard controller. Use a controller extension to add more logic to the page with Apex, which is where the page gets the ID of the interview to resume.

<apex:page standardController= "Contact" extensions= "MyControllerExtension_SurveyCustomers" >

<flow:interview name= "Survey_Customers" pausedInterviewId= "{!pausedId}" />

</apex:page >

This Apex controller extension performs a SOQL query to get a list of paused interviews. If nothing is returned from the query, getPausedId()

returns a null value, and the Visualforce page starts a new interview. If at least one interview is returned from the query, the Visualforce page resumes the first interview in that list.

public class MyControllerExtension_SurveyCustomers {

}

// Empty constructor, to allow use as a controller extension public MyControllerExtension_SurveyCustomers(

ApexPages.StandardController stdController) { }

// Flow support methods public String getInterviews() { return null ; } public String showList { get; set; } public String getPausedId() {

String currentUser = UserInfo.getUserId();

List<FlowInterview> interviews =

[SELECT Id FROM FlowInterview WHERE CreatedById = :currentUser AND InterviewLabel

LIKE '%Survey Customers%' ]; if (interviews == null || interviews.isEmpty()) { return null ; // early out

}

// Return the ID for the first interview in the list return interviews.get(0).Id;

}

264

Render Flows with Visualforce Configure the finishLocation Attribute in a Flow

Reference the Visualforce Page from a Page Layout

To actually expose this Visualforce page to your users, make it available from the Contact page layout.

Tip: If you embed the Visualforce page directly in a page layout, every time a user accesses a contact, they automatically resume the first of their paused interviews—possibly unintentionally. It’s better for the user to make the conscious choice to start or resume an interview, so let’s use a custom button.

First create a custom button for the Contact object that links to the Visualforce page. Use these field values to create the button.

Field

Label

Display Type

Content Source

Content

Value

Survey Customer

Detail Page Button

Visualforce Page

YourVisualforcePage

Finally, add the button to your Contact page layout.

Configure the

finishLocation

Attribute in a Flow

If finishLocation

isn’t specified, users who click Finish start a new interview and see the first screen of the flow. You can shape what happens when a user clicks Finish on the final screen by using the

URLFOR

function, the

$Page

variable, or a controller.

The following sections show the ways you can configure the

<flow:interview >

component’s finishLocation

attribute.

•

Set finishLocation

with the

URLFOR

Function

•

Set finishLocation

with the

$Page

Variable

•

Set finishLocation

with a Controller

Set

finishLocation

with the

URLFOR

Function

Note: You can't redirect flow users to a URL that’s external to your Salesforce organization.

To route users to a relative URL or a specific record or detail page, using its ID, use the

URLFOR

function.

This example routes users to the Salesforce home page.

<apex:page >

<flow:interview name= "MyUniqueFlow" finishLocation= "{!URLFOR('/home/home.jsp')}" />

</apex:page >

This example routes users to a detail page with an ID of 001D000000IpE9X.

<apex:page >

<flow:interview name= "MyUniqueFlow" finishLocation= "{!URLFOR('/001D000000IpE9X')}" />

</apex:page >

For more information about

URLFOR

, see

Functions

on page 631.

265

Render Flows with Visualforce Customize a Flow’s User Interface

Set

finishLocation

with the

$Page

Variable

To route users to another Visualforce page without using

URLFOR

, set finishLocation

to the name of the destination page with the format

{!$Page.pageName}

.

<apex:page >

<flow:interview name= "MyUniqueFlow" finishLocation= "{!$Page.MyUniquePage}" />

</apex:page >

For more information about

$Page

, see

Global Variables on page 602.

Set

finishLocation

with a Controller

You can set finishLocation

in a few ways with a custom controller.

This sample controller configures a flow’s finish behavior in three different ways.

•

getPageA

instantiates a new page reference by passing a string to define the location.

•

getPageB

returns a string that is treated like a PageReference.

•

getPageC

returns a string that gets translated into a PageReference.

public class myFlowController { public PageReference getPageA() { return new PageReference( '/300' );

} public String getPageB() { return '/300' ;

} public String getPageC() { return '/apex/my_finish_page' ;

}

}

Here’s a sample Visualforce page references that controller and sets the flow finish behavior to the first option.

<apex:page controller= "myFlowController" >

<h1 >Congratulations!

</h1 > This is your new page.

<flow:interview name= "flowname" finishLocation= "{!pageA}" />

</apex:page >

If you use a standard controller to display a record on the same page as the flow, users who click Finish start a new flow interview and see the first screen of the flow, without the record. This is because the id

query string parameter isn’t preserved in the page URL. If needed, configure the finishLocation

to route users back to the record.

Customize a Flow’s User Interface

After you’ve embedded a flow in a Visualforce page, you can customize what the flow looks like at run time by applying custom styles using CSS. Using a combination of flow attributes and CSS classes, you can customize the individual parts of a flow, such as the button location, button style, background, and the look and feel of the screen labels.

266

Render Flows with Visualforce Customize a Flow’s User Interface

Flow Button Attributes

Use these attributes to change how the Next, Previous, Finish, Pause, and Don’t Pause buttons appear in your flow.

Attribute

buttonLocation

Description

Defines the location of the navigation buttons in the flow’s user interface. Available values are:

•

top

•

bottom

•

both

For example:

<apex:page >

<flow:interview name= "MyFlow" buttonLocation= "bottom" />

</apex:page >

Note:

If unspecified, the buttonLocation

value defaults to both

.

buttonStyle

Assigns a style to the flow navigation buttons as a set. Can only be used for inline styling, not for

CSS classes.

For example:

<apex:page >

<flow:interview name= "MyFlow" buttonStyle= "color:#050; background-color:#fed; border:1px solid;" />

</apex:page >

Flow-Specific CSS Classes

You can override these predefined flow style classes with your own CSS styles.

Flow Style Class

FlowContainer

FlowPageBlockBtns

Applies to...

The

<div >

element containing the flow.

The

<apex:pageBlockButtons >

element containing the flow navigation buttons.

Note: To prevent your CSS styling for flow navigation buttons from being overwritten by button styling applied elsewhere in the system, we recommend you specify this flow style class each time you apply CSS styling to flow navigation buttons.

For example, instead of

.FlowPreviousBtn {}

, enter

.FlowPageBlockBtns

.FlowPreviousBtn {}

.

FlowCancelBtn

FlowPauseBtn

FlowPreviousBtn

FlowNextBtn

The Don’t Pause button.

The Pause button.

The Previous button.

The Next button.

267

Render Flows with Visualforce

Flow Style Class

FlowFinishBtn

FlowText

FlowTextArea

FlowNumber

FlowDate

FlowCurrency

FlowPassword

FlowRadio

FlowDropdown

Applies to...

The Finish button.

A text field label.

A text area field label.

A number field label.

A date field label.

A currency field label.

A password field label.

A radio button field label.

A drop-down list label.

Customize a Flow’s User Interface

268