How to Display Image in Salesforce Screen Flow

In Salesforce, flows automate data processes like creating, updating, and deleting records. We generally use the Salesforce Screenflow to create records, and for those records, you might need to add an image or static image.

We can add or embed this image in the Screen flow. In this Salesforce tutorial, we will learn to display an Image in Salesforce Screen flow.

Display Image in Salesforce Screen Flow

To display Images in the Salesforce Screen flow, we will first create a Static resource, and that resource will be used in the Screen flow to display the image.

Create a Static Resource for Image

To create a Static resource for an image, navigate to the setup page and follow the steps below.

1. In the Quick Find box, search and select Static Resources.

how to add an Image in Salesforce flow

2. In the next window, click on New button.

3. In Static resource information, enter the Name of the resource. After this, click on the Choose File button and browse the image that you want to display.

Select Cache-Control as Public and click the Save button.

Create a Static resource for image file in Salesforce

We have created the Static resource for the image file; now, we will use it in the Flow to display the image.

Create the Screen flow

In this example, I will create a Screen flow that will create contact records, and within that flow, I will add a static resource that will display the image in the flow.

See also  Record Sharing Using Salesforce Flow | Create Custom Record Sharing Logic Using Salesforce Flow

Now, navigate to the Setup page of Salesforce and follow the below steps.

1. In the Quick Find box, search and select Flows under Process Automation.

2. In the flow setup, click on the New Flow button, then in the next window, select Screen Flow and click on the Create button.

3. Add a Screen element to the flow and add the following components that are required to create a Contact record along with the display image.

  • Add Text component to the flow and label it as Last Name.
Create a Record with display image using Salesforce Screen flow
  • To assign an account to a contact, add a Lookup field component to the screen.
  • Enter API Name, Field API Name, Label, and Object API Name.
Use Image in a Salesforce Screen Flow

4. Now add the Display Image component to the Screen and configure it.

  • Enter the API Name for the Display Image element.
  • In the Image Name, enter the name of the Static resource that we have created.
  • To center the image, write Center in the field Horizontal Alignment.
Use images as Static Resource in Salesforce Screen Flow

5. Enter the Label and API Name for the Screen element and click Done.

6. Now, we will add a Create Record element to create contacts and configure it in the following way.

  • Enter the Label and the API Name.
  • Select the radio button ‘Use Separate Resources and Literal values‘.
  • In the Object field, select Contact.
Display images in Salesforce Screen flow
  • In the section Set Field Values, map the field AccountId with the value Contacts_Account(lookup) > RecordID, then map Last Name with the value Last Name (text).
Use static resource to display image in Salesforce screen flow

7. Save the screen flow with the relevant Flow label and click Save.

How to Display image in Salesforce Screen flow

The Screen flow is completed; now, in the further steps, we will test and debug the flow.

See also  How to Freeze User's Account Using Salesforce Flow

Debug the Screen flow

Now we will debug the created screen flow in the below steps.

1. Click on the Debug button in the flow builder.

use images as Static Resource in Salesforce Flow

2. In the debug window, click on the Run button.

Add images as Static Resource in Salesforce screen Flow

3. As we run the screen flow, we can see that the image is displayed at the top of the screen.

How to display image on Screen flow in Salesforce

After successful debug you have to activate the flow from the Activate button in the flow builder.

In this way, we can display images in a Salesforce screen flow by following the above steps.

Conclusion

In Salesforce screen flows, we can add images as a static resource, and this makes the screen flow more visually appealing and user-friendly, resulting in an effective user experience.

By following the above steps, you might have understood the method to use images as Static Resources and display them in Salesforce Screen Flow.

You may like to read: