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 on Name so the 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 for the 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 use 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 in 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
Image tag that I used :- and click on Add a Field ( Navigate to OUTPUT section and use Display Text, Give the name CompanyLogo )
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 the 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
Likewise you can define CSS class different attributes. finally our page looks like below screenshot