Visual Workflow tips and tricks

In the last few articles I have gone through various ways to use Visual Workflow in Salesforce. In this article I will discuss few concepts related to Visual Workflow, that is mentioned below

Validation rule in Visual Workflow
Branding – How to use Image in Visual Workflow
Improve Visual Workflow UI

–> Validation rule in Visual Workflow

Business Use case :- Universal container is creating a Child Donation Screen by using Visual Workflow, Screen contains Name (Text), Phone Number (Text) and Amount (Currency) fields. They want to write a validation rule onName so user can’t enter any word other than alphabets. For Phone Number field they want a way so the user can’t able to enter more than 10 digits.

Solution of above business requirement

You can use standard Salesforce formula syntax in two places within a flow:

In a Formula resource
In a Screen element, specifically to validate user input for a field

We have to create a new flow. To develop this functionality follow the below instructions

Click on Name | Setup | App Setup | Create | Workflows & Approvals | Flows
Click on New Flow, it will open flow canvas for you
Drag and drop a Screen ( Give the name Donation Registration) on window, and click on Add a Field ( Use Text Data type field, Give the name Name ) to enter Donor Full Name and make this field require by selecting Required check-box
Navigate to Input Validation section and select Validate Check-box, and write validation rules on rectangular box, as shown in below screenshot

Formula I used :- REGEX( Name, “[a-zA-Z ]*$”)

Now navigate to Error Message section and write the message you want to display when the formula statement evaluates to False, You can take help from below screenshot

You can also use Rich text editor to define error message in a different font, size and color.
Likewise you can create Phone Number (Text) field and write validation rule, you can take help from below screen shot

Formula I used :- ISNUMBER (Phone_Number ) && LEN (Phone_Number ) < 11

Create Amount (Currency) and make this field require by selecting Required check-box.

Note:- If the formula statement evaluates to True, the input is valid. If the formula statement evaluates to False, the error message is displayed to the user.

Few points to remember

If flow contains an invalid formula, then You can’t activate that flow.
The formula expression must return a Boolean value.
If the user leaves the field blank, and the field is not required, no validation is performed.
A formula in a flow can’t contain more than 3,000 characters
Formulas in flows don’t support the below mentioned functions. Using these functions results in your formula returning Null (GETRECORDIDS, IMAGE, INCLUDE, INCLUDES, ISCHANGED, ISNEW, ISPICKVAL, PARENTGROUPVAL, PREVGROUPVAL, PRIORVALUE, REQUIRE SCRIPT, VLOOKUP)

–> Branding – How to use Image in Visual Workflow

Business Use case :- Higher management in Universal container wants to user their company logo on Child Donation screen for branding purpose.

Solution of above business requirement

The Rich text editor on the screen element currently does not support Image src tags. However, the flow run-time interprets any text as HTML. So, you could store the HTML markup in a custom setting, database record or some variable, and use that on the screen. In our current approach I am going to store Image src tags on a variable. First you upload image on static resources in Salesforce, now you have the image link, follow the below instruction to complete this process

Navigate to Resource tab, and create a variable with name ImageURL, Select data type as Text and under Default Value define an image tag as shown in the below screenshot

Formula I used :- ISNUMBER (Phone_Number ) && LEN (Phone_Number ) < 11

Create Amount (Currency) and make this field require by selecting Required check-box.

Note:- If the formula statement evaluates to True, the input is valid. If the formula statement evaluates to False, the error message is displayed to the user.

Few points to remember

If flow contains an invalid formula, then You can’t activate that flow.
The formula expression must return a Boolean value.
If the user leaves the field blank, and the field is not required, no validation is performed.
A formula in a flow can’t contain more than 3,000 characters
Formulas in flows don’t support the below mentioned functions. Using these functions results in your formula returning Null (GETRECORDIDS, IMAGE, INCLUDE, INCLUDES, ISCHANGED, ISNEW, ISPICKVAL, PARENTGROUPVAL, PREVGROUPVAL, PRIORVALUE, REQUIRE SCRIPT, VLOOKUP)

–> Branding – How to use Image in Visual Workflow

Business Use case :- Higher management in Universal container wants to user their company logo on Child Donation screen for branding purpose.

Solution of above business requirement

Navigate to Resource tab, and create a variable with name ImageURL, Select data type as Text and under Default Value define an image tag as shown in the below screenshot

Save this Flow and Activate it.

–> Improve Visual Workflow UI

If you are using Visual Workflow on Visualforce Page then you can change following things

buttonLocation :- You can define location of navigation buttons in the flow user interface. Available values are Top, Bottom and Both.
buttonStyle :- You can define style to the flow navigation as a set. Can only be used for inline styling, not for CSS classes
FlowText :- You can define A field label.
FlowCurrency :- You can define A field label.

Note:- To learn more about “Customizing a Flow’s User Interface” click on the URL.

Now create a Visualforce Page and embed your Flow. To change the label of Text field (Name (Text), Phone Number (Text)) defines one CSS class and use it in Visualforce page

<style type=”text/css”>
.FlowText {
color: green;
}
</style>

Likewise you can define CSS class different attributes. finally our page looks like below screenshot