Visual Workflow is a powerful Business Process Management tool built into the Force.com platform. But currently the are limits to what you can do with your flow UI. One such limit is the lack of ability to set a field focus (the active field when the page finishes rendering). When this came up in conversation recently, it got me thinking, Maybe there is a way.

Standard Visual Workflow

If you use the default flow launcher, you are brought to a standard UI that all flows use.

Basic Flow viewer. Simple and effective.

Putting your flow in Visualforce

But I’ve always preferred the option of nesting my flow in a Visualforce page. I find this to be a cleaner, more flexible display. Furthermore, once you have your flow sitting inside the VF container, you now have an HTML page where you can place your own custom code.

Some of you already get where I’m going with this, I suspect.

If you’re not familiar with using flows in Visuaforce, it couldn’t be easier and is well documented in the Visualforce Developer guide. In my page, I use flow:interview tag and set the name attribute to the the Unique Name value of my flow. I was using a flow called New_Account_Contact_Opportunity. Here is my Visualforce markup:

Flow in VF uses the Salesforce tab style and sets focus on first text field

Putting the flow into a Visualforce page means that I can use the standard Salesforce tab styles. And interestingly, it does put the focus on the first field. But only on the first text field. So to put the focus where I wanted, I needed to do some more work.

A first quick and dirty effort revealed that using the inspector to find the element ID of the field and setting the focus in a simple script would work:

But I had a problem!

Handling Visualforce Element ID Decoration

All of the gobbledeegook at the front of my element ID will be familiar to those of you who have delved into the innards of a Visualforce page. All that “j_id0” stuff can change if you modify your page. Additionally, because the flow element in my page is completely monolithic, I’m unable to create my own visualforce element ID to reference using the $Component global variable.

My mind came back to a little helper function I had encountered before, so I decided to give it a try. Using that function, with a little bit of additional code, here’s what I ended up with:

I wish I knew the name of the originator of this getApexElementByID function. I discovered it in a page I inherited from a training project and I can’t take credit for it. If I knew who it was, I would buy that developer a beer. It’s a simple way to get a specific tag from a Visualforce page based on the automatic element ID decoration. If you decide to use it, make sure you call it with the correct tag type. Also make sure you escape out any regex special characters. For instance, if you want picklist called Opportunity_Stage_Name.input, you’ll need to call it like this:

However this left me with another problem.

Flows Have Many Pages

The Visualforce page is the same throughout the flow. But fields on the UI change each time my flow goes to a new step. Which means I’ll have a focus for one field on one screen, but for the other however many steps of my flow, I’ll need to add some more logic to my setFocus function. For my sample flow, with two pages, I ended up with this:

Taking It Further

Now without a doubt, there are ways you could go well beyond my initial fiddling with this. Some thoughts that come to mind:

• jQuery. Of course, the amount of code I would need to write if I simply use jQuery would be reduced massively. 
• Pass the field names to the page using a url parameter list so that I wasn’t hard coding the fields on my page.
• Create a custom setting that stored the names of the fields to use as focus fields for each page.

Hopefully this inspires some folks to go out and begin to play with your flow UI. If you want to use my examples, you can use the pages and flow from this github repo. You can also install an unmanaged package with flow examples and Apex connectors if you want to explore Visual Workflow even further with the Getting Started Pack.

And if you’re asking yourself, “why can’t you just set the field focus with Visual Workflow?” It is a good question. There are many reasons why features do or don’t make it into a particular release of Salesforce.com and honestly, I’m not in a position to say why. But I’m sure the person who conceived this idea on Idea Exchange would be eternally grateful if you voted up their idea.

And finally…

Thanks to Patrick who was taking Andrew’s DEV401 training class this week whose question inspired this blog post.

Happy coding! And happy flowing!