Lightning Components Developer’s Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
PDF

Newer Version Available

This content describes an older version of this product. View Latest

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.

The Lightning App Builder is currently available to select customers through a pilot program. To be nominated to join this pilot program, contact Salesforce. Additional terms and conditions may apply to participate in the pilot program. Please note that pilot programs are subject to change, and as such, we cannot guarantee acceptance into this pilot program or a particular time frame in which this feature can be enabled. Any unreleased services or features referenced in this document, press releases, or public statements are not currently available and may not be delivered on time or at all. Customers who purchase our services should make their purchase decisions based upon features that are currently available.

Note

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");<aura:component implements="flexipage:availableForAllPageTypes">
2    <aura:attribute name="greeting" type="String" default="Hello" />
3    <aura:attribute name="subject" type="String" default="World" />
4
5    <div style="box">
6      <span class="greeting">{!v.greeting}</span>, {!v.subject}!
7    </div>
8</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");<design:component>
2    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
3    <design:attribute name="greeting" label="Greeting" type="text" />
4</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. 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-2", "9");<?xml version="1.0"?>
2<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
3  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
4 
5<svg xmlns="http://www.w3.org/2000/svg"
6     width="400" height="400">
7  <circle cx="100" cy="100" r="50" stroke="black"
8    stroke-width="5" fill="red" />
9</svg>

SVG resources must be named componentName.svg.