Lightning Aura Components Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Introducing Aura Components
Quick Start
Creating Components
Using Components
Aura Component Bundle Design Resources
Use Aura Components in Lightning Experience and the Salesforce Mobile App
Navigate Across Your Apps with Page References
Get Your Aura Components Ready to Use on Lightning Pages
Configure Components for Lightning Pages and the Lightning App Builder
Configure Components for Lightning Experience Record Pages
Create Components for the Outlook and Gmail Integrations
Create Components for Forecast Pages
Create Dynamic Picklists for Your Custom Components
Create a Custom Lightning Page Template Component
Lightning Page Template Component Best Practices
Make Your Lightning Page Components Width-Aware with lightning:flexipageRegionInfo
Tips and Considerations for Configuring Components for Lightning Pages and the Lightning App Builder
Use Aura Components in Experience Builder
Use Aura Components with Flows
Add Components to Apps
Integrate Your Custom Apps into the Chatter Publisher
Using Background Utility Items
Use Lightning Components in Visualforce Pages
Use Aura and Lightning Web Components Outside of Salesforce with Lightning Out (Beta)
Lightning Container
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Configure Components for Lightning Pages and the Lightning App Builder

There are a few steps to take before you can use your custom Aura components in either Lightning pages or the Lightning App Builder.

1. Add a New Interface to Your Component

To appear in the Lightning App Builder or on a Lightning page, a component must implement one of these interfaces.

Interface Description
flexipage:availableForAllPageTypes Makes your component available for record pages and any other type of page, including a Lightning app’s utility bar.
flexipage:availableForRecordHome If your component is designed for record pages only, implement this interface instead of flexipage:availableForAllPageTypes.
clients:availableForMailAppAppPage Enables your component to appear on a Mail App Lightning page in the Lightning App Builder and in the Outlook and Gmail integrations.
lightning:availableForForecastingPage Makes your component available for the forecasts page in Lightning.
Here’s the sample code for a simple “Hello World” component.
<aura:component implements="flexipage:availableForAllPageTypes" access="global">
    <aura:attribute name="greeting" type="String" default="Hello" access="global" />
    <aura:attribute name="subject" type="String" default="World" access="global" />

    <div style="box">
      <span class="greeting">{!v.greeting}</span>, {!v.subject}!
    </div>
</aura:component>

Mark your resources, such as a component, with access="global" to make the resource usable outside of your own org. For example, if you want a component to be usable in an installed package or by a Lightning App Builder user or an Experience Builder user in another org.

Note

2. Add a Design Resource to Your Component Bundle

Use a design resource to control which attributes are exposed to builder tools like the Lightning App Builder, Experience Builder, or Flow Builder. A design resource lives in the same folder as your .cmp resource, and describes the design-time behavior of the Aura component—information that visual tools need to display the component in a page or app.

For example, if you want to restrict a component to one or more objects, set a default value on an attribute, or make an Aura component attribute available for administrators to edit in the Lightning App Builder, you need a design resource in your component bundle.

Here’s the design resource that goes in the bundle with the “Hello World” component.
<design:component label="Hello World">
    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
    <design:attribute name="greeting" label="Greeting" />
</design:component>

Design resources must be named componentName.design.

Optional: Add an SVG Resource to Your Component Bundle

You can use an SVG resource to define a custom icon for your component when it appears in the Lightning App Builder’s component pane. Include it in the component bundle.

Here’s a simple red circle SVG resource to go with the “Hello World” component.
<?xml version="1.0"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
 
<svg xmlns="http://www.w3.org/2000/svg"
     width="400" height="400">
  <circle cx="100" cy="100" r="50" stroke="black"
    stroke-width="5" fill="red" />
</svg>

SVG resources must be named componentName.svg.