Work with Custom Lightning Components

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
  

Accessibility

This unit requires some additional instructions for screen reader users. To access a detailed screen reader version of this unit, click the link below:

Open Trailhead screen reader instructions.

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.

You can create a custom Lightning component using Lightning Web Components. See the module Lightning Web Components Basics.

Custom components in your org that are configured for use in the Lightning App Builder appear in the Lightning Components 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 configure the component and its component bundle so that they’re compatible with the Lightning App Builder and Lightning pages. See the Lightning Web Components Developer Guide for details.

The custom component we’re providing for this module has already been configured for the Lightning App Builder.

Install a Custom Lightning Component

You provided a custom Opportunity Alert Lightning component that you can add to your Lightning page. Now install it into your org.

Launch your Trailhead Playground by going to any unit with a hands-on challenge, scrolling to the bottom of the page, and clicking Launch. If you see a tab in your org labeled Install a Package, great! Follow the steps below.

If not, click the App Launcher icon to launch the App Launcher, then click Playground Starter and follow the steps. If you don’t see the Playground Starter app, copy this package installation link and check out Install a Package or App to Complete a Trailhead Challenge in Salesforce Help.

1. Click the Install a Package tab.
   
2. Paste 04t2E00000161fSQAQ into the field.
   
3. Click Install.
   
4. Select Install for Admins Only, then click Install.
   

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 that you created in the previous unit.
   
3. Add the Opportunity Alert 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. Deselect Has Open Tasks, then 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. Next, see what the page looks like now.

Test the Custom Component

Start by looking at it in the Salesforce mobile app first.

1. Open the app on your mobile device.
   
2. If necessary, log in using your Trailhead Playground credentials.
   
3. Go to the Top Accounts and Opportunities page in the Sales app and scroll down until you see the new component. You might have to refresh the screen to see your changes. 
   

Go back to your 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.

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!

Resources

• Lightning Web Components Developer Guide
• Lightning Web Components Developer Guide: Configure a Component for Lightning App Builder
• Salesforce Help: Custom Lightning Page Components