📢 Attention Salesforce Certified Trailblazers! Maintain your credentials and link your Trailhead and Webassessor accounts by April 19th. Learn more.
close
Start tracking your progress
Trailhead Home
Trailhead Home

Create a Lightning Component

Note

Note

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.

Lightning Bolt icon

Attention, Trailblazer!

Salesforce has two different desktop user interfaces: Lightning Experience and Salesforce Classic. This project is designed for Lightning Experience.

You can learn about switching between interfaces, enabling Lightning Experience, and more in the Lightning Experience Basics module here on Trailhead.

Introduction

In this project we walk through the process of creating a Lightning component to use as an override on a standard action.

In the process, we’ll accomplish the following:

  • Create a Lightning component.
  • Build a service component.
  • Leverage Lightning Data Service to create and edit records.
  • Investigate the implications of using Lightning components as overrides.
  • Make a Lightning component context-aware.

Sound like fun? Let's get started!

Install the Trailhead Package and Import Data

The first thing we do is install a package into your Trailhead Playground with the app and code that we work through in this project.

  1. Install this Trailhead Project package into your Trailhead Playground. Check the URL to make sure that you are installing into the correct org. You need your hands-on org username and password to install this package. If you're using a Trailhead Playground, this article shows you how to find your username and reset your password. If you have trouble installing a package or app from AppExchange, follow the steps in this article.
  2. After the package installs, click alt text: App Launcher icon and select Dreamhouse Lightning.
  3. Click Data Import tab and then Initialize Sample Data. This imports data that you use within this project.
  4. Click alt text: Setup Icon and select Setup.
  5. Enter Session into the Quick Find box and select Session Settings.
  6. Scroll to the Caching section and uncheck Enable secure and persistent browser caching to improve performance.
  7. Click Save.

My Domain Is Already On in Your Trailhead Playground

Do not attempt to turn on My Domain, or change its settings, in your Trailhead Playground. By default, My Domain is already active in every Trailhead Playground.

alt My Domain name highlighted in a Trailhead Playground URL

In your production org, My Domain lets you create a subdomain unique to your organization. With My Domain, you replace the instance URL that Salesforce assigns you, such as https://na17.lightning.force.com, with your chosen subdomain, for example, https://mydomainname.lightning.force.com.

My Domain is required to create custom Lightning components and set up single sign-on (SSO) in an org. To learn more about My Domain, check out this article. To learn how to activate it in your production org, see the User Authentication module.

Create a Lightning Component

In this project, we modify the DreamHouse app that we built for DreamHouse Realty, a Boston-based real estate company. DreamHouse Realty uses this app to manage its inventory of houses, brokers, and prospects. Each property record contains almost 20 fields, most of which are represented in the standard Create Property dialog. We’ve been asked to streamline the process of creating a property record, by overriding the standard New button, and display a simpler form with only a few necessary fields.

No problem! Let’s get going.

  1. Click alt text: App Launcher icon and select Dreamhouse Lightning.
  2. Click Properties.
  3. Click New.

    This is the form we’re going to override. For our new form, we’re only going to use the name field, which is actually the address as well, the price, number of bedrooms and bathrooms, and the status.

  4. Click Cancel.

  5. Click alt text: Setup Icon and select Developer Console.

  6. In the Developer Console, choose File > New > Lightning Component.

  7. Give the component a name of PropertyDialog.

  8. Under Component Configuration, select Lightning Record Page and click Submit.

    Are you wondering why we selected the Lightning Record Page for this component? Well, even though we’re going to use this component as an override, during development it’s helpful to add it on a page so that we can see it as we build it. Great. Now let’s move on to creating the form.

Create a Form

  1. In your new component, add the following between the <aura:component> tags:

    <lightning:input aura:id="propName" name="propName" label="Property Name" required="true" />
    <lightning:input aura:id="propBeds" name="propBeds" label="Beds" />
    <lightning:input aura:id="propBaths" name="propBaths" label="Baths" />
    <lightning:input aura:id="propPrice" name="propPrice" label="Price" />
    <lightning:select aura:id="propStatus" name="propStatus" label="Status">
            <option value="status">Status</option>
    </lightning:select>
    <lightning:button variant="neutral" label="Cancel" />
    <lightning:button variant="brand" label="Submit" />
    

    Base Lightning components were first introduced in Winter ’17, with more being added for each release. One of the coolest things about using them to build Lightning components is that they handle the creation of the corresponding HTML and CSS from the Salesforce Lightning Design System (SLDS) for us. The Name field is the only required field in a Property Record. Therefore, the input for Name uses the required="true" attribute. You can also specify a type for a <lightning:input>, such as number, email, or password. For a complete list of possible types, see the Lightning Components Developer Guide.

  2. Click File > Save to save the component.

  3. Switch back to your org and click Properties.

  4. Click any property name to navigate to its property record page.

  5. Click alt text: Setup Icon and select Edit Page.

  6. In Lightning App Builder, drag the PropertyDialog component onto the page, and place it at the top of the right-hand column.

    It doesn't matter where you put the component, because we’re only placing it on a page in order to be able to see it during development. We remove it from the page when we’re ready to use it as an override.

  7. Click Save.

  8. Activate the page by clicking Activate, App Default, and then Assign as App Default. Select Dreamhouse Lightning as the App, and click Next and then Save.

  9. Click Back to exit the App Builder.

alt text: Property record page with the Property Dialog component added.

You’re off to a great start! But sadly, your form doesn’t do anything, and it doesn’t look very good either. We need to wire it up so that it can save a new record and fix the styling, but before we do, we need to tackle the Status picklist.

retargeting