You are here:
Display Image Screen Input Component
Easily insert images in flow screens. Upload images to Salesforce as static resources and then you can reference them while configuring the component.
Required Editions
| View supported editions. |
For information about adding screen components to your flow screen, see Screen Element.
Configure the Display Image Component
| Attribute | Description |
|---|---|
| API Name | The API name of the component. An API name can include underscores and alphanumeric characters without spaces. It must begin with a letter and can’t end with an underscore. It also can’t have two consecutive underscores. |
| Horizontal Alignment | If you don't want the browser to determine the image's horizontal alignment, enter a specific alignment value. Valid values are: left, center, or right. This attribute accepts single-value resources. The value is treated as text. |
| Image Alt Text | Alternative text for screen readers and other assistive technology and for browsers that can’t load the image. Provide a meaningful description unless the image is purely decorative or redundant. To have assistive technology skip the
image, set Image Alt Text to If you don't set this
attribute, assistive technology reads the file path from the image source ( This attribute accepts single-value resources. The value is treated as text. |
| Image CSS | Override the CSS for your image by providing your own CSS string. Example:
This attribute accepts single-value resources. The value is treated as text. |
| Image Height | If you don't want the browser to determine the image height, enter a specific height value. Valid values are a number and unit, or a percentage of the container. Examples: 200 px, 2 cm, 50%. If you enter a number value and don’t enter a unit value, the unit value defaults to pixels. This attribute accepts single-value resources. The value is treated as text. |
| Image Name | Required. The name of a static resource that contains an image file. The image must be a .png or .jpg file. This attribute accepts single-value resources. The value is treated as text. |
| Image Width | If you don't want the browser to determine the image width, enter a specific width value. Valid values are a number and unit, or a percentage of the container. Examples: 200 px, 2 cm, 50%. If you enter a number value and don’t enter a unit value, the unit value defaults to pixels. This attribute accepts single-value resources. The value is treated as text. |
Store the Display Image Component’s Values in the Flow
The flow stores values automatically. If you store values manually, store the attribute’s output value in a variable.
To store values manually, select Manually assign variables (advanced).
- Navigates to another screen and returns to the component’s screen.
- Pauses the flow then resumes it.
- Navigates to the next screen and triggers an input validation error.
Setting the attribute enables a flow to remember the value. The flow stores the value automatically. If you store values manually, store the attribute’s output value in a variable.
Set the Component Visibility
Specify the logic that determines when the flow displays the component.
| Option | Description |
|---|---|
| When to Display Component | Configure when the component is displayed by using conditional logic. You can set the components to:
|
Validate Input
Provide a formula that evaluates whether what the user entered is valid and the error message to display if invalid.
| Option | Description |
|---|---|
| Error Message | Specify the error message that appears below the component if the user enters an invalid value. |
| Formula | Provide a formula expression that returns a Boolean value. If the formula expression evaluates to true, the input is valid. If the formula expression evaluates to false, the error message appears below the component. If the user leaves the field blank and the field isn’t required, the flow doesn’t perform the validation. If the user leaves the field blank and the field is required, the flow shows the default error message and not your custom error message. |
Specify the Behavior of Values on Revisited Screens
Specify what this component does when a user enters a value, navigates to a previous screen, and then returns to the screen with this component.
