You must deploy My Domain in your org if you want to use Lightning components in Lightning tabs, Lightning pages, as custom Lightning page templates, or as standalone apps.
For more information about My Domain, see the Salesforce Help.
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 Lightning for Outlook or Lightning for Gmail. |
<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>{!v.greeting}</span>, {!v.subject}! </div> </aura:component>
Use a design resource to control which attributes are exposed to builder tools like the Lightning App Builder, Community Builder, or Cloud Flow Designer. 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 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 a Lightning component attribute available for administrators to edit in the Lightning App Builder, you need a design resource in your component bundle.
<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.
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.
<?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.