Images in a Screen Flow make a process easier to follow: a product photo, an icon, a company logo, or a diagram of the step the user is on. This guide covers uploading an image as a Static Resource, putting it on a screen with the built-in Display Image component, the accessibility settings worth filling in, and when a different storage option fits better.
Visuals increase adoption and reduce user errors. Images give users something to trust (logos), context (product images) and instructional clarity (icons or diagrams), all without custom code.
- Step 1: Upload the image as a Static Resource
- Go to Setup → Static Resources → New.
- Upload your image file, give it a meaningful name (e.g., product_image), and set Cache Control to Public.
- If you need multiple images, compress them into a ZIP and upload that. In some contexts you can then reference files inside the ZIP like
/resourceName/image.png.
- Step 2: Add the image to a Screen Flow
- Go to Setup → Flows → New Flow → Screen Flow.
- Add a Screen element, then drag the Display Image component onto the canvas.
- In the Image Name field, enter the Static Resource name you created (exact match).
- Adjust sizing and Horizontal Alignment (center is often best for branding and product visuals).
- Use the Image Alt Text field where available to improve accessibility and screen-reader support.
- Step 3: Test, activate, and deploy
- Preview the flow inside the Flow Builder to confirm the image displays correctly at different screen sizes.
- Activate the flow when ready and add it to Lightning pages, the utility bar, or a quick action depending on your use case.
A few things worth doing while you are in there:
- Keep images optimized (small file sizes, web-friendly formats like PNG or JPG) to reduce load time.
- Use consistent sizing and alignment so flows look professional across screens.
- Prefer Static Resources for stable, org-managed assets. For frequently updated images, consider Files (ContentDocument) with public URLs or a CDN, and reference the public link from the flow (that needs extra configuration).
- Always provide meaningful alt text for accessibility and compliance.
Where this earns its keep:
- Product selection flows showing product images.
- Onboarding flows with company logos and step illustrations.
- Support or guided troubleshooting flows that use icons or diagrams to clarify instructions.
Admins get this working without Apex or a custom LWC, which is the appeal: it ships the same afternoon. Developers can extend the approach for dynamic images by integrating with Files or external storage. And the people running the flow spend less time in training and make fewer mistakes, because the screen shows them what the step actually looks like.
#Salesforce #Flow #ScreenFlow #StaticResources #AdminTips
For more, please follow our page!
Leave a Comment