Build Your First Lightning Flow App – Part Four


After a minor detour, we’re getting back to building. The intention of part three was to give you a good enough background of Flow and some basics of coding that this next bit makes some sense.

And on that note, let’s get back on the saddle.

Future apology – I’m genuinely sorry for the amount of times I use the word Flow in this post.

Let’s Build

As always, begin from the Setup page. Type Flows in to the Quick Find text box and select the Flows item found under Process Automation.

From here, click New Flow. We’re now asked to select the type of automation we want to build, in this case, it’s going to be a Screen Flow. Click Create to move to the next step.

Welcome to your blank canvas. Here is where we make art. Or a process automation… I prefer the former.

This Flow is going to display a video, let the viewer score the video out of 5 and then store that result in a new record. So before we begin, we need to create a few resources.

Within the Toolbox, click the Manager tab, followed by New Resource and then fill in the following.

  • Resource Type: Constant
  • API Name: YouTube_Code
  • Description: The code of the video the user will watch
  • Data Type: Text
  • Value: 3nSO_DWvvZU

You should have something that looks like this.

Create another resource with the following details.

  • Resource Type: Picklist Choice Set
  • API Name: Rating_Values
  • Description: The video rating picklist values available to the user
  • Object: Video Rating
  • Data Type: Picklist
  • Field: Video_Rating__c

And just one more resource to create.

  • Resource Type: Formula
  • API Name: Current_User
  • Description: The current user’s record ID
  • Data Type: Text
  • Formula: {!$User.Id}

Great. We’ve now created the three resources we need. The code of the video we’re going to access, a list of the different possible ratings (based on our data model) and the ID of the user viewing the video. It’s now time to construct the logic.

From the Elements tab of the Toolbox, drag Screen onto the empty canvas. It doesn’t matter where you place this, but it will look neater if it’s close to the Start icon. You’ll then be presented with the following pop-up.

Click on [Flow Label] to display the Screen’s properties on the right hand side. You will then need to complete the following.

  • Label: YouTube Video
  • API Name: YouTube_Screen
  • Description: Screen that displays the YouTube video.

On the left hand side of the window, you’ll see a list of Screen Components. Scroll to the bottom until you can see a component called YouTube, under the Custom heading. Click and drag the YouTube component to the middle of the page, above the Pause, Previous and Finish buttons.

You should now see something like the following.

On the right hand side, enter the following details.

  • API Name: Video_Component
  • Video Code: YouTube_Code (this should be available as a dropdown item)

Although the component defaults a video code, by overriding this with our constant, we can control the video the user sees by simply changing our constant. Although I won’t cover it in this series, you can switch out the constant for a variable that sources its data from custom metadata or even a record.

Click Done and we now have our first Element configured.

The YouTube Video screen we’ve just created won’t actually do anything until we link it to the Start icon. To do this, click the circle under Start and drag a line to our new Element (as illustrated below.

Click Save and give your Flow a name, I’ll call mine YouTube Flow. Once your work has saved, you’ll get 2 warnings pop up. One of these warnings is showing because we’re using Lightning and Flow can’t vouch for the validity of its code. The second warning is alerting us to the fact that our screen isn’t connected to any processes. That will be remedied shortly.

Now it’s time to test the first part of our hard work. Clicking Run will open up a new tab and you should be presented with a YouTube video. At the moment, you won’t be able to anything other than watch the video. When you’re happy, close the tab and we’re onto the next part.

Drag another Screen element on to the canvas, select [Flow Label] and complete the following details (as before).

  • Label: Rate The Video
  • API Name: Rate_The_Video
  • Description: Screen that lets the user rate the video.

Now drag a Picklist component on to the screen and fill in the following.

  • Label: What did you think of the video?
  • API Name: Video_Opinion
  • Data Type: Text
  • Choice: Rating_Values

Connect the YouTube Video element to the Rate The Video element and hit Save. If you hit Run, you should now be able to watch the video, click next and rate it out of 5.

So far we’ve watched a video, given it a rating and now it’s time to save that rating to the database. To do this, drag a Create Records element onto the canvas and fill in the following.

  • Label: Save Rating
  • API Name: Save_Rating
  • Description: Record the video rating of the user.
  • How Many Records to Create: One
  • How to Set the Record Fields: Use separate variables, resources, and literal values
  • Create a Record of This Object: Video Rating
  • Field 1: Video_Rating__c
  • Value 1: {!Video_Opinion}
  • Field 2: User__c
  • Value 2: {!Current_User}
  • Field 3: YouTube_Code__c
  • Value 3: {!YouTube_Code}

Connect the second Screen element to our newly configured Create Records, hit Save and we’re now ready to test the fully functional Flow!

This time though, instead of clicking Run, we’re going to click Debug. This will allow us to see what’s happening in the background and ensure the record is being created.

If all has gone to plan, after running the Flow in debug mode, you should see the following.

Congratulations! The Flow is now complete.

Next time we’ll add this to an app and get it in front of customers.