Create an Aura Component
In this project we walk through the process of creating an Aura component to use as an override on a standard action.
In the process, we'll accomplish the following:
- Create an 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 an Aura component context-aware.
Sound like fun? Let's get started!
Follow Along with Trail Together
Want to follow along with an expert as you work through this step? Take a look at this video, part of the Trail Together series.
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 the App Launcher () then 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.
- Click the Install a Package tab.
04t5e0000005VTginto the field.
- Click Install.
- 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.
- After the package installs, click the App Launcher () and select Dreamhouse Lightning.
- Click Data Import tab and then Initialize Sample Data. This imports data that you use within this project.
- Click Setup () and select Setup.
sessioninto the Quick Find box and select Session Settings.
- Scroll to the Caching section and uncheck Enable secure and persistent browser caching to improve performance.
- 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.
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 an 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.
- Click the App Launcher () and select Dreamhouse Lightning.
- Click Properties.
- 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.
- Click Cancel.
- Click Setup () and select Developer Console.
- In the Developer Console, choose File > New > Lightning Component.
- Give the component a name of
- 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
- In your new component, add the following between the
<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.
- Click File > Save to save the component.
- Switch back to your org and click Properties.
- Click any property name to navigate to its property record page.
- Click Setup () and select Edit Page.
- 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.
- Click Save.
- 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.
- Click Back () to exit the App Builder.
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.