Tag: use image in flow

• Getting Started with Lightning Flow – Part 17 (Want to learn how to display a notice at login? Read on!)

  Posted at 9:43 PM by Rakesh Gupta, on July 23, 2020

  

  Many times we want to display Notice, Messages, or Information to our users after they successfully logged In to Salesforce. For example, similar to Salesforce downtime or maintenance notifications. Displaying information after login will help the organization to keep its users informed about upcoming events or changes.

  Objectives:

  After reading this blog, you’ll be able to: 

  • Understand what is a Login Flow
  • Setup a simple Flow
  • Understand how to set up a Login Flow 

  Business Use Case

  Edward Backhouse is a System Administrator at GurukulOnCloud. Edward received a requirement to company upcoming webinar registration link (with banner) to users when they successfully logged into Salesforce. 

  What is Login Flow?

  Login Flows give you the flexibility to build a custom process that can be used to display a message, take users’ input, and process the data, build a post-authentication process that meets your business requirements. For example, you want two-factor authentication only when a user is trying to log-in from a particular City, Subdivision, Zip code, County, or Browser. Let us start with a business use case.

  Automation Champion Approach (I-do):

  Usually, with Salesforce, multiple approaches are available to solve a business requirement. Choose the ones that are simple, straight forward, and consume fewer resources. 

  Similarly in this scenario, we will use a combination of Flow and Login Flow. Before trying to understand the technical aspect of the solution, let us spend some time to understand the general flow of our solution at a very high level. Please spend a few minutes to go through the following flow diagram and understand it. 

  

  Let’s begin building this automation process.

  Guided Practice (We-do):

  There are 3 steps to solve Edwards’s business requirement using Lightning Flow. We must: 

  1. Add a Screen Element
  2. Add a display Text to Screen Element 
  3. Set up a Login Flow

  Step 1: Add a Screen Element 

  1. Click Setup.
  2. In the Quick Find box, type Flows.
  3. Select Flows then click on the New Flows.
  4. Select the Screen Flow option and click on Create.
  5. Drag-and-drop Screen element onto the Flow designer. 
  6. Enter Label the API Name will auto-populate.
  7. Click Done.

  Step 2: Add a Display Text to Screen Element  

  1. On the Screen element, navigate to the Display section and double-click on the Display Text field, to add it on to the Screen element
  2. Enter API Name. 
  3. You can now use a Rich-text editor to add content like Text, Image, URL, etc.
  4. Click Done.

  In the end, Edward’s Flow will look like the following screenshot:

  

  Once you’re done, Save the flow and name it Display Flow on Login. Do not forget to activate the Flow by clicking on the Activate button.

  Step 3: Set up a Login Flow

  1. Click Setup.
  2. In the Quick Find box, type Login Flows.
  3. Select Login Flows then click on the New.
  4. Select the Type from the drop-down Flow.
  5. Enter Display Message on Login as a Name.
  6. The next step is to select Flow, User license, and Profile. Follow the steps as shown in the following screenshot:
  7. Click Done.

  

  It’s time to test the Login Flow

  Now, if a User with profile Salesforce successfully logged In, they will see the flow which displays the message. 

  

  Great! You are done! Feel free to modify it based on your business requirement. 

  Formative Assessment:

  I want to hear from you!  

  What is one thing you learned from this post? How do you envision applying this new knowledge in the real world? 

  Let me know by Tweeting me at @automationchamp, or find me on LinkedIn.

  Have feedback, suggestions for posts, or need more information about Salesforce online training offered by me? Say hello, and leave a message!

  Name(required)

  Email(required)

  Phone

  Course Name(required) Administrator Advanced Administrator Lightning Flow Advanced Lightning Flow Pardot Specialist Pardot Consultant Platform App Builder Platform Developer I Community Coud Consultant Financial Service Cloud Sales Cloud Consultant Service Cloud Consultant Other

  Preferred Timing(required) Morning

  Evening

  Weekend

  Fast Track

  Not Sure

  Write your query(required)

  Submit Query!

  Share this:

  • Twitter
  • LinkedIn
  • Facebook
  • Pocket
  • WhatsApp
  • Reddit
  • Tumblr
  • Pinterest
  • Skype

  Like this:

  Like Loading...
  Posted in Lightning Flow | 50 Comments | Tagged Advance flow, Define Login Flow, Display Image in Flow, Display Information, Display information after login to Salesforce, Display information after Salesforce login, Display notice when users log in to Salesforce, flow, Flow Designer, Flow Example, Flow varibale, FlowRockstar, Login Flow, Login Flow Concepts, Login Flow example, Login Flow Salesforce, Login Flow use cases, New Flow, Record Lookup, salesforce, Salesforce Flow, salesforce login, Screen Element, use image in flow, Visual flow, Visual flow Rockstar, Visual Work Flow, Visual workflow, Visual workFlow examples, Visual Workflow Implementation Guide

• 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.