Configure Components for Lightning Pages and the Lightning App Builder

There are three steps you must take before you can use your custom Lightning components in either Lightning Pages or the Lightning App Builder.

1. Deploy My Domain in Your Org

You must deploy My Domain in your org if you want to use Lightning components in Lightning tabs, Lightning Pages, or as standalone apps.

For more information about My Domain, see the Salesforce Help.

2. Add a New Interface to Your Component

To appear in the Lightning App Builder or a Lightning Page, a component must implement the flexipage:availableForAllPageTypes interface.

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>
Note

Note

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 a Community Builder user in another org.

3. Add a Design Resource to Your Component Bundle

Include a design resource in the component bundle to make your Lightning component usable in Lightning Pages and the Lightning App Builder. Use a design resource to control which attributes are exposed to the Lightning App Builder. A design resource lives in the same folder as your .cmp resource, and describes the design-time behavior of the Lightning component—information that visual tools need to allow adding the component to a page or app.

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.