Learning Objectives

After completing this unit, you’ll be able to:
  • Install a custom Lightning component
  • Use your mobile device to preview your app in the Salesforce mobile app

Custom Lightning Components in the Lightning App Builder

Creating a custom Lightning component requires programming skills. Or, you can install an existing Lightning component from the AppExchange.



Point-and-click admins, you can do this unit! We’re providing you with a custom component that’s already configured. So don’t worry. You don’t need programming skills to earn this badge.

To learn how to create a custom Lightning component, see the Lightning Components module.

Custom components in your org that are configured for use in the Lightning App Builder appear in the Lightning Components pane.

Lightning App Builder component pane

Your custom Lightning components don’t automatically work on Lightning pages or in the Lightning App Builder. To make a custom component usable in both, you need to:
  1. Configure the component and its component bundle so that they’re compatible with the Lightning App Builder and Lightning pages. For details, see the Lightning Components Developer’s Guide.
  2. Deploy My Domain in your org.

The custom component we’re providing for this module has already been configured for the Lightning App Builder. Before you can use it, however, you need to take care of step 2.

Enable My Domain in Your Org

Before we get to the heart of creating Lightning components, let’s use Salesforce My Domain to set up a subdomain. Is setting a My Domain a requirement? Yes, if you want to use Lightning components in Lightning tabs, Lightning pages, or as standalone apps. Salesforce requires My Domain as a security measure to help prevent malicious attacks—just in case a security hole lies hidden deep within a third-party or custom component.

If you already have My Domain enabled in your DE org or use a Trailhead Playground org, skip this section and the next one. You already have My Domain set up.

If you don’t have a subdomain yet, it’s easy to set one up.

Every Salesforce org is set up within the salesforce.com domain with a URL like https://na30.salesforce.com. With My Domain, you define your own domain, or a subdomain, within the salesforce.com domain. Your new URL looks something like: https://yourDomain.my.salesforce.com.

Use the My Domain wizard to create a subdomain. My Domain wizard

  1. From Setup, enter My Domain in the Quick Find box, then select My Domain.
  2. Enter the name for your subdomain after https:// and click Check Availability. Typically, a subdomain is your company name, but you can use any name as long as it’s unique. If this name is already taken, choose another one.
  3. Click Register Domain.

Salesforce updates its domain registries with your new subdomain. When it’s done, you receive an email with a subject like, “Your Developer Edition domain ready for testing.” It takes just a few minutes.



Did you catch that last part? It can take a few minutes before your domain is available. You can’t move to the next step until you get the activation email.

Roll Out My Domain to Your Org

Did you get your activation email? From the email, click the link to get back to the My Domain wizard. It takes you to Step 3, where you test the links to your subdomain URLs before rolling out the subdomain to your org. Even though you don’t have users to deploy it to in your DE org, you must still roll out My Domain to make your custom Lightning components available in Lightning pages, in the Lightning App Builder, and for standalone apps.
My Domain Wizard
  1. Click the link in the activation email to log in to your Salesforce subdomain. It takes you to your Salesforce org.
    Notice that the URL in the browser address bar shows your new subdomain name. Right now, you’re the only one who has this URL. URL of subdomain
  2. Click around your org to make sure that links point to your new domain. You probably haven’t created links in your DE org, so we can go on. (When creating a domain in a production org, this important step is easily overlooked.)
  3. From the My Domain page, click Deploy to Users, and then click OK. Deploying a subdomain rolls out the new subdomain URL throughout your org. Now all your users see the subdomain URL in the browser address bar.
  4. Step 4 of the wizard displays configuration options, which we can ignore for now.
Congratulations, you’ve set up My Domain! When setting up My Domain in a production org, you have a few more steps. Learn more by completing the My Domain unit of the User Authentication module. Now that you’ve protected—and branded—your org with a subdomain, let’s go on.

Install a Custom Lightning Component

We’ve provided a custom Opportunity Alert Lightning component that you can add to your Lightning page. Let’s install it into your org.

  1. Copy and paste https://login.salesforce.com/packaging/installPackage.apexp?p0=04tj0000001mMYP into the navigation bar of your browser, and then press ENTER.
  2. Click Install.
    The installation takes a few moments.
  3. Click Done.

After the installation completes, it’s time to add the component to your page.

Add the Custom Lightning Component to Your App Page

  1. From Setup, enter App Builder into the Quick Find box, and then click Lightning App Builder.
  2. Click Edit next to the Top Accounts and Opportunities page.
  3. Add the OpportunityAlert component above the List View component.
  4. In the properties pane, change Days Since Last Modified to 6.
    Did you notice that the text inside the component changed to match the new field value?
  5. Click Save.


    Because you activated the page previously, you don’t have to activate it again.

All right! The changes you made are immediately available in Lightning Experience and the mobile app. Let’s see what the page looks like now.

Test the Custom Component

We’ll look at it in the Salesforce mobile app first.
  1. Open the app on your mobile device.
  2. If necessary, log in using your Developer Edition credentials.
  3. Go to the Top Accounts and Opportunities page.
    Test Your Custom Component in Salesforce1
  4. Go back to your DE org and view the Top Accounts and Opportunities page in Lightning Experience.
    Because you created the page using the Two Columns template, it uses the two-column format when you view it on the desktop or a tablet.
    Test Your Custom Component in Lightning Experience
Congratulations! You used the Lightning App Builder to create an app page, personalize your Lightning Experience Home page, and customize a Lightning Experience record page.

You’ve got the skills now to make the Salesforce mobile app and Lightning Experience handier and more powerful for your users. Go forth and customize!