Build Your First Lightning Flow App – Part One

Introduction

It’s no secret that I’m a big fan of the Lightning platform. In fact, I probably start a lot of sentences off with that very statement, just to prove a point. The other non-secret is that I’m a huge fan of Flow. It’s an incredible tool that can bring development to the masses within a wonderful drag and drop interface. These two products within Salesforce joined forced with “Integrated Processes” and made a beautiful baby called Lightning Flow.

The way in which these three products fit together can probably be best explained with the following slide from my World Tour London presentation.

Each one of these products can sit on their own and do wonders for your business. When they work together as an integrated platform though, that’s when the magic happens.

In this series, I’ll take you through every step you need to:

  • create a developer org
  • build a Lightning Component that will talk to an external service
  • build a Flow to interact with the Lightning Component
  • build an App for your end users

Step One – Sign up to a Developer Org

First things first, we need a new Developer Org. These are free, easy to set up and a great way to experiment without risking your Production environment. To begin, head over to https://developer.salesforce.com/signup and fill out the form. Once you’ve completed the form, you’ll receive an email with a link to complete the registration and set a password (this bit is important as you’ll need your password to login – obviously). Luckily, I’ve previously created a Blazing Tips video that takes you through the whole process.

If all has gone well, you should now be logged into your brand new and empty Org. Take in that new car smell while you can, it won’t be there for long! In order to tap into the amazing world of Lightning Components, we’re going to need to set up a Custom Domain. This is a fairly easy task, but entirely irreversible. So pick your domain name wisely.

Step Two – Register My Domain

As with most of this tutorial, you’ll need to start in the Setup menu. If your screen looks like the following, then click on the cog at the top right of the screen and select Setup.

You should now see the Quick Find input box. Type my domain in there and select the first result. On this screen, you’ll be able to pick your domain name. Remember, this cannot be changed once you hit the Register Domain button

 Luckily before you get that far, you can hit Check Availability to see if it’s taken. If it’s free, go ahead and click that Register button. You’ll now have to wait a few minutes while the domain is being registered in the background. Once this is complete, you will receive an email and you can then return to the My Domain page. Here you’ll see two buttons, Log in and Deploy to Users. The first button will test that you can login to the new domain as the admin. This step is mandatory, but quite essential to ensure there’s no issues with logging in. The second button does exactly what it says and deploys the domain to your user base. Once you have passed this step, you have a shiny new Org with a registered domain.

As with Step One, I already have a Blazing Tips video to take you through the process every click of the way.

The final step in Part One is the creation of the Lightning Component. This is the only part of the entirely tutorial that requires coding and I’m going to give you every line.

Step Three – Creating a Lightning Component

The Lightning Component we’re going to create today will connect to an external service and allow us to interact with their data. In this specific instance, that service is going to be YouTube and the data will be a video. So long story short, we’re going to create a Lightning Component that allows us to show a YouTube video in Salesforce.

To begin, click the cog at the top right of the screen and click Developer Console. This will open up a new page that looks something like the following.

I know, it’s a blank file, it’s scary, confusing and you want to crawl back into bed. It’s fine, honestly. I’m here to hold your hand through the whole process.

Start by clicking File > New > Lightning Component. This will open a pop-up window where we need to give our Component a title. Let’s call it YouTube. Ignore the checkboxes for now (our code will actually worry about that for us) and click Submit.

You will now see a Component file with two lines of code, <aura:component > and </aura:component>. Select the whole thing and replace it with the following.

<aura:component implements="flexipage:availableForAllPageTypes,lightning:availableForFlowScreens">
    <aura:attribute name="videoCode" type="String" default="3nSO_DWvvZU"/>
    
    <iframe width="100%" height="300px" style="border: 0px"  src="{!'https://www.youtube.com/embed/' + v.videoCode}"></iframe>
    
</aura:component>

Click File > Save and then on the right hand side, click the menu item labelled Design. This will create an new almost blank file with <design:component> and </design:component>. As before, select the whole thing and replace it with the following.

<design:component>
		<design:attribute name="videoCode" label="Video Code" />
</design:component>

Click File > Save and you’ve just created your first Lighting Component. Congratulations! This Component is actually ready to be placed on an Lightning page, but we’re getting ahead of ourselves.

In the next part of this tutorial, we’re going to build out the data model to retrieve some useful information from the user as they’re watching the video and we’ll then build the Flow.