Did you know that you can use Flow Builder to build no-code Lightning components like an Image component? Check out how you can use Flow screens to make your own no-code components with just a few clicks!
🎧 Listen to this podcast with Product Manager Shannon Hale
Subscribe to the Salesforce Admins channel!
More Tips & Tricks
Check out all our “🧐 Did You Know” videos in one handy playlist!
Full Video Transcript
Hi, my name’s LeeAnne Rimel, Principal Admin Evangelist here at Salesforce. Did you know that you can use Flow Builder and standard components to make your own custom Lightning components, with no code? That’s right, with the new Flow Builder and with the flow sharing component, you can build your own display components, image components, to use throughout Salesforce.
So, let’s take a look. Here on our Salesforce home page and we wanna add an image to this home page. Let’s jump in to Setup and go to Static Resources. This is where we’re going to upload the image that we want to add to our page. So we’re gonna call this CandyBeans, it’s a picture of candy, and we’re adding that image. So you wanna know what image you want to present on your page before you start this process. Once we’ve added our static resources, we’re gonna go to Flows. Now, we create a new flow. We’re gonna drag the Screen element onto our flow canvas. We’ll call this HomePageImage. And, we wanna drag from the left, the Display Image Lightning Flow Screen component. And we’re gonna call this, the name of our image, so it’s our CandyBeans image, and this is where we add our static resource name. We can also decide if we want it to be centered, and the size. Let’s get rid of our frame, like our header and our footer, ’cause we don’t need, all users have navigation here. We need to connect it to start with a connector, and save our flow. When we save it we wanna save it something very descriptive, like HomePage_Image. We’re gonna select a Screen Flow, because this is gonna be you presenting a screen. Now, when we go back to our flows, we have to cut back, and then click into our flow and click Activate, to activate this flow, then we can add it to our page. So this is a great way to start to think about, things that you can present to your users. So, we go back to our home page and let’s go to Edit Page. And we edit the page, we’re gonna drag the standard flow component onto the page. Now when we have the standard flow component on the page, any screen flow that is activated will be available. So we wanna make sure we select the right one, HomePage_Image, save and activate. Now when we go back to our home page we’ve get our brand new image presented right on the home page.
And there we go, we just built our own new Lightning component, with no code, no code coverage, no need to outsource that work, and this is just a really simple-use case, but it’s great to start thinking about how can you use flow screens to serve this information to your users and to use some of those really cool Lightning fields that are available in your flow screen. So, to learn more about Flow, one thing to do today, is to listen to this great podcast with the product manager for Flow, Shannon Hale, on her own admins podcast, and the link is below. That’s all for today. I hope you have fun building awesome screens in Flow and I will see you next time.