Hi! 🙋🏻♂️
This one’s gonna be short and simple one. 😉
The standard flow screen component, ‘Display Image’, only allows you to preview a Static resource image. But what if your file is stored as Content Document, eh? Quite a bummer.
But with the new FilePreview component, we can say bye bye to this issue.
And with this component, you can preview not just image files but all the files types that you can preview normally in Salesforce.
You can install the component from here.
Quick Demo
Hope you find this one useful! Catch you in the next one! ✌🏻
And thank you for being an awesome reader! Subscribe to this blog for receiving all the latest updates straight to your inbox. 🙂
forcePanda 
Pingback: From Narender Singh: a File Viewer for Flow Screens – UnofficialSF
Nice, but unfortunately this is not working with a login flow – it displays a small preview, but clicking on it does nothing (it is not opening a full preview overlay)…
LikeLike
Ahh… most likely because the file preview event is not firing on click which is expected.
Workaround that I can think of is to create a lightning component that takes a URL of the image file, height and width and displays accordingly.
LikeLike
This might be a hack but I’m using custom metadata in a login flow to dynamically display a message upon log in and was able to enter html (e.g and it worked. For example:
Summer 21 is now GA.
LikeLike
Sorry the HTML was stripped out:
< img src=”https://d3nqfz2gm66yqg.cloudfront.net/images/20210405070436/featured-images-12-700×400.png” alt=”Summer 21 logo” >
LikeLiked by 1 person
You can directly use the Display Text/Image screen components to show highlighted text or image. Why use CMDT for it?
LikeLike
Thanks for your reply!
Actually, I already tried similar approach with LC and iframe (I’m not using image file, but public url of docx/pdf), however, it seems that login container is enforcing width of preview overlay making it really narrow. I can make it wider of course, by using some larger fixed width for iframe, but then it looks bad as login frame/container (flow screen) is not adapting to the width of iframe – it’s still narrow while preview file in iframe, although looking good, it is stretched over it.
LikeLike
Not sure if it’ll work but you can try using lightning:overlayLibrary to open a modal(containing iframe) in fullscreen. Worth a try!
For reference: https://forcepanda.wordpress.com/2020/04/07/how-to-show-a-modal-in-fullscreen-from-utility-bar/
LikeLike
Pingback: Flow Screen Component: Display Images via URL | forcePanda
This is awesome!
I was wondering how I could make the preview 100% width instead of the small box it’s in. The use case is that a bookkeeper needs to reference information on a related file (checking invoice data against what user entered).
LikeLike
Is it a pdf or an image file?
LikeLike
Thomas, did you ever figure out how to make this preview 100% width or to control the size?
LikeLike
Can you post a snapshot of what width you want to control?
P.S. The component is relying on standard behavior of the standard lightning:card base component. To control the width, you’d probably need to write more code.
LikeLike
Pingback: Flow: Display Photo or Upload a Photo – Sunshine and Other Unhandled Exceptions
Pingback: From Jessie Rymph: How to display or upload a contact photo using Flow – UnofficialSF