Start tracking your progress
Trailhead Home
Trailhead Home

Create an Aura Component

Note

Note

As of the Spring ‘19 release (API version 45.0), you can build Aura 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.

Introduction

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

In the process, we’ll accomplish the following:

  • Create a Aura component.
  • Build a service component.
  • Leverage Lightning Data Service to create and edit records.
  • Investigate the implications of using Aura components as overrides.
  • Make a Aura 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.

Launch your Trailhead Playground by 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 alt text: 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 on Trailhead Help.

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

When your app is finished installing, you see a confirmation page and get an email to the address associated with your playground.

  1. After the package installs, click alt text: App Launcher icon and select Dreamhouse Lightning.
  2. Click Data Import tab and then Initialize Sample Data. This imports data that you use within this project.
  3. Click alt text: Setup and select Setup.
  4. Enter Session into the Quick Find box and select Session Settings.
  5. Scroll to the Caching section and uncheck Enable secure and persistent browser caching to improve performance.
  6. 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 Aura 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 Aura 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 Aura components were first introduced in Winter ’17, with more being added for each release. One of the coolest things about using them to build Aura 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 Aura 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, 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.