User Interface Improvements With Salesforce Flow

Flow gives administrators the opportunity to offer users a custom interface for interacting with Salesforce providing as much help as you think they may need to get their jobs done, from simplifying data entry to providing insight to help users complete forms, all without the need for code.

Last week, I defined some use cases for Flow and offered a presentation to introduce you to various features of Flows for data input and Salesforce record creation.  This week we look at ways to improve the user experience with Flows.

You can access the demonstration Flow I created at http://flow.snugsfbay.com.

Help

Cascading Stylesheets offer control.

Each Flow Screen has its own Help Text area, which you can use to add an extra bit of information  that may not be needed by all users.  In my example Flow, the lead form Screen includes a link to Help, located with the "Next" and "Previous" buttons, to let users know that their information will not be shared.  Other Screens offer more in-depth information in their Help.  And Screens that don't have Help text do not show a link at all.

Because Help text is defined per Screen, your Flow can provide context-sensitive help to your users.

Branding & Style

Flows offer two ways to format output display text and Help text.  Toggling to the Rich Text Editor while editing text, you can select formatting option buttons for bold, italics, font, etc.  But you can also enter HTML tags directly without toggling to the Rich Text Editor.  For example, "Not Bold and <b>Bold</b>"  will display the following: 
Not Bold and Bold

You can also use HTML tags to add an image directly to your Flow.  For example, adding the following to display text will display the Bay Area Nonprofit User Group logo: "<IMG SRC="https://c.na14.content.force.com/servlet/servlet.ImageServer?id=015d0000001wpuy&oid=00Dd0000000gNhq&lastMod=1381177979000" WIDTH="100" ALT="SNUGSFBay">"

For even more control over the look and feel of your Flow, define a cascading stylesheet (CSS) and incorporate both the Flow and CSS into a Visualforce page.  Among the tags particular to Flow are FlowContainer and FlowPageBlockBtns.

Special Tip

One undocumented CSS tag that you will want to know about if you change the background color of your Flow is interviewFormHeaderCell.  If you see a random underline character at the top of every Flow Screen, it comes from a bit of code automatically inserted by Salesforce, and is a known bug.  To get rid of the stray text use the following code in your Visualforce page or adapt it for your CSS file:

        
    <STYLE type="text/css">
        .interviewFormHeaderCell {border-bottom:0px;}
    </STYLE> 

According to technical support, this is the only way to get rid of the unwanted character as of Dec. 9, 2013.

Next week's blog post will describe some of the more complex data handling options currently available with Salesforce Flow.