Configure Components for Lightning Pages and the Lightning App Builder

There are two adjustments you must make before you can use your custom Lightning components in either Lightning Pages or the Lightning App Builder.

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.

1swfobject.registerObject("clippy.codeblock-0", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<aura:component implements="flexipage:availableForAllPageTypes">
18    <aura:attribute name="greeting" type="String" default="Hello" />
19    <aura:attribute name="subject" type="String" default="World" />
20
21    <div style="box">
22      <span class="greeting">{!v.greeting}</span>, {!v.subject}!
23    </div>
24</aura:component>

Add a Design Resource to Your Component Bundle

You must include a design resource in the component bundle to make your Lightning component usable in Lightning Pages and the Lightning App Builder. A design resource describes the design-time behavior of a Lightning component—information that visual tools need to allow adding the component to a page or app.

To make a Lightning component attribute available for administrators to edit in the Lightning App Builder, add a design:attribute node for the attribute into the design resource.

An attribute marked as required in the component definition automatically appears for users in the Lightning App Builder, unless it has a default value assigned to it. Required attributes with default values and attributes not marked as required in the component definition must be specified in the design resource or they won’t appear for users.

Here’s the design resource that goes in the bundle with the “Hello World” component.

1swfobject.registerObject("clippy.codeblock-1", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<design:component label="Hello World">
18    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
19    <design:attribute name="greeting" label="Greeting" />
20</design:component>

To render a field as a picklist, add a datasource onto the attribute in the design resource, like this:

1swfobject.registerObject("clippy.codeblock-2", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<design:attribute name="Name" datasource="value1,value2,value3" />

Any string attribute with a datasource in a design resource is treated as a picklist. How the Lightning App Builder renders it depends on the data type that you define in the component. For example:

<aura:attribute name="Name" type="String" /> renders as a picklist
<aura:attribute name="Name" type="String[]" /> renders as a multi-select picklist

A design resource supports only attributes of type int, string, or boolean.

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. Just include it in the component bundle.

Here’s a simple red circle SVG resource to go with the “Hello World” component.

1swfobject.registerObject("clippy.codeblock-3", "9");
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<?xml version="1.0"?>
18<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
19  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
20 
21<svg xmlns="http://www.w3.org/2000/svg"
22     width="400" height="400">
23  <circle cx="100" cy="100" r="50" stroke="black"
24    stroke-width="5" fill="red" />
25</svg>

SVG resources must be named componentName.svg.

Lightning Components Developer’s Guide

Configure Components for Lightning Pages and the Lightning App Builder

Add a New Interface to Your Component

Add a Design Resource to Your Component Bundle

Optional: Add an SVG Resource to Your Component Bundle

See Also: