Visualforce Developer Guide

Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Override Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrate Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Embed Flows in Visualforce Pages
An Advanced Example of Using <flow:interview>
Set Flow Variable Values from a Visualforce Page
Get Flow Variable Values to a Visualforce Page
Control Whether Users Can Pause a Flow from a Visualforce Page
Customize How Users Resume Paused Flow Interviews
Configure the finishLocation Attribute in a Flow
Customize a Flow’s User Interface
Render Lightning Runtime for Flows in a Visualforce Page
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service
Visualforce Best Practices
Standard Visualforce Component Reference
Appendices
PDF

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.

Flow Button Attributes

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

Attribute Description
buttonLocation Defines the location of the navigation buttons in the flow’s user interface. Available values are:top, bottom, or both.
buttonStyle Assigns a style to the flow navigation buttons as a set. Can only be used for inline styling, not for CSS classes.

Example buttonLocation:

1<apex:page>
2<flow:interview name="MyFlow" buttonLocation="bottom"/>
3</apex:page>

Note: If unspecified, the buttonLocation value defaults to both.

Example buttonStyle:

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

Flow-Specific CSS Classes

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

Flow Style Class Applies to...
FlowContainer The <div> element containing the flow.
FlowPageBlockBtns The <apex:pageBlockButtons> element containing the flow navigation buttons.
FlowCancelBtn The Don’t Pause button.
FlowPauseBtn The Pause button.
FlowPreviousBtn The Previous button.
FlowNextBtn The Next button.
FlowFinishBtn The Finish button.
FlowText A text field label.
FlowTextArea A text area field label.
FlowNumber A number field label.
FlowDate A date field label.
FlowCurrency A currency field label.
FlowPassword A password field label.
FlowRadio A radio button field label.
FlowDropdown A picklist label.

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 {}.