Prepare to Be Object-Agnostic


As of the Spring ‘19 release (API version 45.0), you can build Lightning components using two programming models: the Lightning Web Components model and the original Aura Components model. Lightning web components and Aura components can coexist and interoperate on a page. This content covers Aura components.

For more information about Lightning web components, see the Build Lightning Web Components trail.


In this project, we help ZBS (Zippy Broadcasting Systems), a media distribution company, connect their awesome DJs, veejays, and podcast hosts with fans around the globe. We do this by building Lightning components that provide ZBS agents with a quick visual summary of complex information about shows, syndication, and other data in their Salesforce system. And we use custom metadata to allow ZBS to reuse these components in any object—without having to make any code changes!

What You'll Do in This Project:

  1. Work with custom metadata types to define a pattern of functionality.
  2. Create custom metadata records to link that pattern to business rules.
  3. Create an IndicatorBadges component that will appear in Lightning App Builder.
  4. Create an Apex-based controller and service class and use them in Lightning components.
  5. Work with base Lightning components.
  6. Work with Lightning Data Service to respond to record-level changes.
  7. Create controller and helper markup capable of complex communication patterns.
  8. Customize record home pages for several objects and use the same component for all.

Create a New Trailhead Playground

For this project, you need to create a new Trailhead Playground. Scroll to the bottom of this page, click the playground name, and then select Create Playground. It typically takes 3–4 minutes to create a new Trailhead Playground.


Yes, we really mean a brand-new Trailhead playground! If you use an existing org or playground, you can run into problems completing the challenges.

Install the Trailhead Package and Import Data

The first thing we need to do is understand the ZBS data model and import some sample data. If you see a tab in your org labeled Install a Package, great! Follow the steps below.

If not, from the App Launcher (App Launcher), find and select 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 on Trailhead Help.

  1. Click the Install a Package tab.
  2. Paste 04tB0000000M8Av into the field.
  3. Click Install.
  4. Select Install for Admins Only, then click Install. When the package is finished installing, you see a confirmation page and get an email to the address associated with your playground.
  5. After the package installs, we need to update one of the package files.
  6. Click the gear icon (Setup), then select Developer Console.
  7. In the Developer Console, select File > Open and select Classes > ZBSDataLoadController and click Open.
  8. Replace the code with this code:
    global with sharing class ZBSDataLoadController {
      global static void deleteAll() {
         // DELETE [SELECT ID FROM Account WHERE CreatedDate >= THIS_WEEK];    
         // DELETE [SELECT ID FROM property__c];    
         // DELETE [SELECT ID FROM broker__c];
         // DELETE [SELECT ID FROM bot_command__c];
  9. Save the file.
  10. From the App Launcher (App Launcher), find and select ZBSLightning.
  11. Click Load Data and then Initialize Sample Data to import the data that you use in this project.
  12. Click Setup, then select Setup.
  13. Enter Session in the Quick Find box and select Session Settings.
  14. Scroll to the Caching section and uncheck Enable secure and persistent browser caching to improve performance.
  15. Click Save.

Examine the Indicator Badge Custom Metadata Type

At the heart of the solution we're building for ZBS is the quick, visual summary we're calling an indicator badge. The beginnings of the custom metadata type that supports this indicator badge, and the basic shape of the Apex pattern we look at in a later step, come from an open-source solution called Weathervane built in Visualforce by the collaborative Big Thinks and now run by Bigger Boat Consulting. (Big thanks to Christian Carter and Beth Breisnes, the big brains behind Big Thinks!) The common theme for both Weathervane and ZBS's Indicator Badges is the ability to translate complex logic into a visual. We begin this transformation with custom metadata.

Custom metadata types have two key parts: the custom metadata type, and the records based on the custom metadata type. The relationship between custom metadata types and custom metadata records is like the relationship between a cupcake tin and the cupcakes baked in the tin. The shape of each cupcake is defined by the tin, but things like cake flavor, frosting color, and type of filling belong to each cupcake—not the tin.

The ZBS Starter Pack includes a custom metadata type called Indicator Badge. Let's check it out.

  1. From the Home tab in Setup, enter Custom Metadata Types in the Quick Find box, then click Custom Metadata Types.
  2. Select Indicator Badge from the list.
  3. The information on this page tells us about the pattern that will let us take values from different fields and objects in the ZBS Salesforce instance and create our visuals. In other words, this is our cupcake tin.
  4. An important part of creating a good pattern is choosing the right data types for the fields on the metadata type. How do you make sure you're allowing for enough flexibility that the pattern can be used across your instance, and that it can tolerate changes over time? How do you balance flexibility with giving users enough structure to avoid simple mistakes?
  5. Let's look at a couple key fields to see how our Indicator Badge metadata type answers these questions.

Examine the Indicator Badge Custom Fields

  1. From the Indicator Badge custom metadata detail page, scroll down to the Custom Fields section.
  2. Select the Object field.
  3. This field has a data type of Metadata Relationship, which means that we can link our Indicator Badge metadata type to other parts of the ZBS org metadata. In this case, as we see in the Metadata Relationship Options section, this field has a relationship to an Entity Definition, or in more familiar words, standard and custom objects in the ZBS Salesforce instance. When a user goes to make an Indicator Badge custom metadata record (which we'll do in a minute), the Object field will look like a picklist—with values matching the standard and custom objects available in the org. What other kinds of relationship fields can a custom metadata type have? Let's find out.
  4. Click Back to Indicator Badge at the top left of the page.
  5. From the Indicator Badge detail page, scroll down again to the Custom Fields section, and select Related Field.
  6. This field is also a relationship field, but when we look at the Metadata Relationship Options, we see this field has a different kind of relationship. Instead of linking to standard or custom objects, we're linking to standard and custom fields. We can also see that this custom field is controlled by our Object custom relationship field. This means that when a user decides to make an Indicator Badge record with Account as the value in the Object field, the Related Field will display a picklist of Account fields. So users don't have to remember (or spell!) API names perfectly in order to connect records with objects and fields. Using relationship fields instead of hard-coded strings also means that we can change the names of objects or fields, and our records stay in sync with any changes.
  7. The rest of the fields on our Indicator Badge custom metadata type help define the logic for whether or not a record should display an indicator, and what an indicator should look like when displayed. We're using a mix of text fields and picklist fields to achieve this pattern.
  8. One of our picklists isn't yet finished. Let's dive in and fix that before we move on.

Finish the Badge Color Picklist

  1. From the Custom Fields section of the Indicator Badge detail page, select the Badge Color picklist.
  2. Scroll down to the Values section and select New.
  3. Enter RosyBrown as a value.
  4. Click Save.
  5. Now that we understand the basic shape of our Indicator Badges and we've finished all the fields, let's build a list view for our custom metadata records to help us understand how we put this custom metadata type to work for ZBS.

Create a List View That Shows All Indicators

  1. From the top of the Indicator Badge metadata detail page, click the Manage Indicator Badges button.
  2. From the top of our Indicator Badges list home, select Create New View.
  3. Fill in the list view details.
    • View Name: All Indicators
    • View Unique Name: All_Indicators
  4. Scroll to Step 3. Select Fields to Displayand select the following fields and order:
    • Label
    • Indicator Badge Name
    • Object
    • Related Field
    • Comparison Type
    • Comparison Value
    • Badge Icon Name
    • Badge Color
  5. Click Save

Now we can actually see our custom fields, and see how we're filling the pattern that our Indicator Badge metadata type creates with business logic and details specific to ZBS. (For you food and simile fans, these are our delicious cupcakes!) We can see the Active Subscriber record is looking for Accounts with a value of 1 or more in the Active Subscriptions field. The Content Advocate record is looking for Contacts with a value of 2 or more in the Total Account Subscriptions field. The Active Syndication record is connected to a custom checkbox (or Boolean data type) field on the Syndication custom object. And each of these custom metadata records also defines what the icon shape and color users should see for a particular badge—once we build some components and Apex classes, that is.

Create Custom Metadata Records

We have one last bit of configuration to tackle before we can build our components and start working with code. ZBS has some additional kinds of indicators they would like to display, based on their business rules. We need to help them by creating some additional Indicator Badge custom metadata records.

  1. From the Home tab in Setup, enter Custom Metadata Types in the Quick Find box, then click Custom Metadata Types.
  2. Select Manage Records.
  3. Click New.
  4. Create a record with these values:
    • Label: Audience Favorite
    • Indicator Badge Name: Audience_Favorite
    • Object: Show
    • Related Field: Active Syndications
    • Comparison Type: Greater or Equal
    • Comparison Value: 3
    • Badge Icon Name: custom:custom97
    • Badge Color: Tomato
  5. Notice how the Badge Icon Name field has some help text, explaining how users should enter data in that field. In this way, custom metadata fields act just like regular object fields. Also like objects, you can create validation rules for a custom metadata type to ensure records follow expected behavior.
  6. The structure we're using for the Badge Icon Name field is based on the Salesforce Lightning Design System (SLDS), and the names of those icons. For the Audience Favorite badge, we're using the "custom97" icon from SLDS, which is a thermometer: SLDS Custom97 icon. The color of our badge will match the Badge Color field. Neat, right?
  7. Click Save & New. Create a record with these values:
    • Label: Needs Some Love
    • Indicator Badge Name: Needs_Some_Love
    • Object: Show
    • Related Field: Active Syndications
    • Comparison Type: Less or Equal
    • Comparison Value: 2
    • Badge Icon Name: custom:custom94
    • Badge Color: RosyBrown
  8. Click Save & New. Create a record with these values:
    • Label: Subscription Superpower
    • Indicator Badge Name: Subscription_Superpower
    • Object: Account
    • Related Field: Active Subscriptions
    • Comparison Type: Greater or Equal
    • Comparison Value: 3
    • Badge Icon Name: custom:custom1
    • Badge Color: DeepSkyBlue
  9. Click Save & New. Create a record with these values:
    • Label: Syndication Rockstar
    • Indicator Badge Name: Syndication_Rockstar
    • Object: Contact
    • Related Field: Active Syndications
    • Comparison Type: Greater or Equal
    • Comparison Value: 2
    • Badge Icon Name: standard:calibration
    • Badge Color: Red
  10. Click Save & New. Create a record with these values:
    • Label: Syndication Superpower
    • Indicator Badge Name: Syndication_Superpower
    • Object: Account
    • Related Field: Active Syndications
    • Comparison Type: Greater or Equal
    • Comparison Value: 3
    • Badge Icon Name: custom:custom49
    • Badge Color: DeepPink
  11. Click Save & New. Create a record with these values:
    • Label: Vlog
    • Indicator Badge Name: Vlog
    • Object: Show
    • Related Field: Format
    • Comparison Type: Contains
    • Comparison Value: Vlog
    • Badge Icon Name: custom:custom99
    • Badge Color: Violet
  12. Click Save.

Whew! Our data entry is done. Now, let's get on with developing some badges! (No pun intended. Well, maybe a little.)

Keep learning for
Sign up for an account to continue.
What’s in it for you?
  • Get personalized recommendations for your career goals
  • Practice your skills with hands-on challenges and quizzes
  • Track and share your progress with employers
  • Connect to mentorship and career opportunities