Lightning ページと Lightning App Builder のコンポーネントの設定

新規インターフェースをコンポーネントに追加する

コンポーネントを Lightning App Builder または Lightning ページに表示するには、コンポーネントに flexipage:availableForAllPageTypes インターフェースを実装する必要があります。

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>

デザインリソースをコンポーネントバンドルに追加する

Lightning コンポーネントを Lightning ページおよび Lightning App Builder で使用できるようにするには、コンポーネントバンドルにデザインリソースを含める必要があります。デザインリソースには、Lightning コンポーネントの設計時の動作 (ページまたはアプリケーションへのコンポーネントの追加を可能にするためにビジュアルツールが必要とする情報) が記述されます。

Lightning コンポーネントの属性をシステム管理者が Lightning App Builder で編集できるようにするには、属性の design:attribute ノードをデザインリソースに追加します。

コンポーネント定義で必須とマークされた属性は、デフォルト値が割り当てられている場合を除き、Lightning App Builder で自動的にユーザに表示されます。コンポーネント定義内のデフォルト値が設定された必須属性と必須とマークされていない属性は、デザインリソースで指定する必要があります。指定しないとユーザには表示されません。

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>

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" />

デザインリソースの名前は、componentName.design にする必要があります。

省略可能: SVG リソースをコンポーネントバンドルに追加する

SVG リソースを使用して、コンポーネントが Lightning App Builder のコンポーネントペインに表示されるときのカスタムアイコンを定義できます。リソースをコンポーネントバンドルに追加するだけです。

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 リソースの名前は componentName.svg にする必要があります。