Create a Lightning Component
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.
- 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.
- After the package installs, click and select Dreamhouse Lightning.
- Click Data Import tab and then Initialize Sample Data. This imports data that you use within this project.
- Click and select Setup.
- Enter Session into 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 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.
- Click and select Dreamhouse Lightning.
- Click Properties.
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 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 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.
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 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.
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.
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.