Tag: buttonLocation

• Visual Workflow (Flow) tips and tricks

  Posted at 9:36 PM by Rakesh Gupta, on April 15, 2019

  

  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

  1. Validation rule in Visual Workflow
  2. Branding – How to use Image in Visual Workflow
  3. 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:

  1. In a Formula resource
  2. 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

  

  Step 1 – Write Validation Rule Formula

  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

  

  Step 2 – Write Error Message

  • 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

  

  Validation Rule for Phone Number Field

  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

  

  To store Image Tag

  Image tag that I used :- 

• Use Variable ImageURL where you stored Image src tags, you can take help from below screen shot

Use Image on Visual Work Flow

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

1. buttonLocation : – You can define the location of navigation buttons in the flow user interface. Available values are Top, Bottom and Both.
2. buttonStyle : – You can define style to the flow navigation as a set. Can only be used for inline styling, not for CSS classes
3. FlowText : – You can define A field label.
4. 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

.FlowText {
  color: green;
}

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

Child Care Donation Page

You can download the full code from Github or From Chatter. let me know if you are unable to download the code.