Simple Techniques To Make Your Flows Look Better And Do Better

You are currently viewing Simple Techniques To Make Your Flows Look Better And Do Better

Visual Workflow is one of the most powerful declarative tools in Salesforce. It lets you loop through records, traverse multiple objects, have screens for user interaction, delete records and much more. If I am working on a project implementation, my first instinct is always to check if a complex automation related requirement can be met using Flows and then accordingly move to Apex/Visualforce. This post will talk about four ways to enhance your Flows to make your end users exclaim ‘Woah! This looks fantastic!’ :

  1. Embed the flow at the top of a record detail page and set landing location to be the updated record

    Wouldn’t it be great to run your flow and view related record details at the bottom of the flow? An icing on the cake would be to land on the originating record in case that’s one of your flow’s requirements. For this to happen, we would have to embed our Flow in a Visualforce page and create a straightforward extension class to handle the rest. In the following example, a flow is launched on the Quote record page and after the flow finishes, the user lands back on the updated Quote record. You could apply a similar logic to flows which create new record/(s) and where the user is supposed to land on a newly created record.

    Visualforce Page
    Visualforce Page
    Embed Extension
    Apex Extension

    Result:

  2. Make the record detail part of the page to be opaque/blurred

    Notice how the rest of the screen (other than the flow) has been made opaque. That is to help an end user distinguish between the Flow screen and the record detail page. The following highlighted piece of code will let you do that:Opaque code

  3. Move Next/Previous and other buttons to the center of the Flow screen

    I have heard end users complain that the Next, Previous, Finish and other Flow buttons are too far away to the right and look slightly detached from the Flow screen. So let’s move them towards the center of the screen by inserting the following piece of code:Next to center
    Result:Next

  4. Introduce a Check/Uncheck All functionality for Multi-Select Checkboxes

    Ever wanted to introduce a Select/Unselect All functionality for Multi Select Checkboxes? The checkbox below the Defenders label lets you select and unselect all choices at once.9lRDEA
    Then the following piece of code will let us do that:Checkbox

 

By embedding our flow in a Visualforce page and with a few lines of code , we have been able to enhance our flow to make it more appealing and thus provide a better user experience. This is going to be a staple across all of my Flow implementations which involve screen interactions and I hope you are able to use these techniques to improve your Flows.
A special note of thanks to Paul Mraz and Deepak Anand for being the contributors to this post’s content.

Code:
Flow VF Page – https://gist.github.com/miragedeb/cf9cb8cf7fd74306a21a8c65535eb619
Apex Extension – https://gist.github.com/miragedeb/af42ab4f8edd8a36bbed25a2ad7584c1