How to put your Flow in a Visualforce Page

There are often times that you need to get a bit more complex than a simple URL to launch your Flow.  When that time comes, you can use a Visualforce Page!  You might say, “I haven’t written one of these before”, but don’t let that stop you from reading on!  We will walk through this slowly and break down each step so that you know how to customize a Visualforce Page for any use case!  If you do want to learn Visualforce in more detail, check out Trailhead!

Lets get started… We need to create a Visualforce Page that we can customize.  That means we need to head to our Developer Console!

Developer Console

Empty Developer Console

Now lets create and name our Visualforce Page.  To do this, go up to File, New, and then Visualforce Page.

Selecting a Visualforce Page

We are now prompted to enter our New Apex Page’s name.  I typically use a name similar to my Flow’s name.

Name the Visualforce Page

Awesome!  See, that wasn’t too hard, was it?  Now you are ready to dive into writing the code!  So, we want to start to add to what we have (or by the end of this walk through, copy and paste our ‘template’ onto our Visualforce Page.

Brand New VFP

To embed our Flow in a Visualforce Page we must use this component: “flow:interview“.  But, simply putting that in our Visualforce Page will not do anything.  We need to add some attributes to this component that will let us tell Salesforce which Flow we want to call.

Flow Interview

The first attribute we always will use is “name“.  This is where you place the Flow’s Unique Name (‘API name’).

Flow Name in VFP

The second attribute we use is “finishLocation“.  This is where we tell the Flow where we want to go when we are at the end of our Flow.  You can send someone to a specific UR or a dynamic URL (by using a Record Id).  I find that in the majority of my Flows, I send the User back to the record that they were previously on.

Finish Location

To pass variables into our Flow we need to use the “apex:param” component.  This component must be placed inside of our “flow:interview” to work properly.  This allows you to state the name of the variable in your Flow and the Value you want it to be.  99.9% of the time I only use the Record Id and/or the Running User’s Id.

Apex Param

“Name” inside the param component is reserved for the name of the variable in your Flow.  “Value” is the value outside of your Flow that you want to pass into your Flow. In my example below, we will be passing the Case.Id value into our Flow using the variable inside the Flow, var_CaseId.  If you want to pass more than one variable into your flow, simply add another param component into your code.

Passing Variable through a VFP

So, we covered the ‘basic’ Visualforce Page for embedding your Flow and how to pass a variable into it.  If you want to do some more complex features like passing a variable out of your Flow into the Visualforce Page, you’ll have to hold tight for the next post!

The finished product:

Final VF Page

Text of the code:

<apex:page standardController="Case">
 <flow:interview name="Internal_Case_Comment" finishLocation="/{!Case.Id}">
      <apex:param name="var_CaseId" value="{!Case.Id}"/>
 </flow:interview>
</apex:page>

RECAP:  Flows embedded in a Visualforce Page take a bit more work than a simple URL, but you gain much more control and flexibility.  You can limit who has access to the page via the Visualforce Page’s Security.  As well as add additional content around your Flow, like a Company Logo?  Who knows what you might want to do, but you leave yourself with more options than a URL with just a bit more work!

2 thoughts on “How to put your Flow in a Visualforce Page

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s