Lightning ページと Lightning アプリケーションビルダーのコンポーネントの設定

1.組織で [私のドメイン] をリリースする

Lightning コンポーネントを Lightning タブや Lightning ページで使用する場合や、カスタム Lightning ページテンプレートまたはスタンドアロンアプリケーションとして使用する場合は、組織で [私のドメイン] をリリースする必要があります。

[私のドメイン] についての詳細は、Salesforce ヘルプを参照してください。

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

コンポーネントを Lightning アプリケーションビルダーまたは Lightning ページに表示するには、コンポーネントに次のいずれかのインターフェースを実装する必要があります。

1<aura:component implements="flexipage:availableForAllPageTypes" access="global">
2    <aura:attribute name="greeting" type="String" default="Hello" access="global" />
3    <aura:attribute name="subject" type="String" default="World" access="global" />
4
5    <div style="box">
6      <span class="greeting">{!v.greeting}</span>, {!v.subject}!
7    </div>
8</aura:component>

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

デザインリソースを使用して、Lightning アプリケーションビルダーなどのビルダーツールに公開する属性を制御します。デザインリソースは .cmp リソースと同じフォルダに存在します。このリソースには、Lightning コンポーネントの設計時の動作 (ページまたはアプリケーションでコンポーネントを表示するためにビジュアルツールが必要とする情報) が記述されます。

たとえば、コンポーネントを 1 つ以上のオブジェクトに制限したり、属性のデフォルト値を設定したり、Lightning コンポーネントの属性をシステム管理者が Lightning アプリケーションビルダーで編集できるようにしたりするには、コンポーネントバンドルのデザインリソースが必要です。

1<design:component label="Hello World">
2    <design:attribute name="subject" label="Subject" description="Name of the person you want to greet" />
3    <design:attribute name="greeting" label="Greeting" />
4</design:component>

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

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

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

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