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

Lightning アプリケーションビルダーで Lightning ページのカスタム Lightning Web コンポーネントを使用するには、事前にいくつかのステップを実行します。

1.設定ファイルでコンポーネントのメタデータを定義する

componentName.js-meta.xml ファイルは、Lightning アプリケーションビルダーで使用することを目的としたコンポーネントのデザイン設定などのコンポーネントのメタデータ値を定義します。設定ファイルを編集して次を行います。

コンポーネントを Lightning アプリケーションビルダーと管理パッケージで使用できるようにする。
コンポーネントを使用できる Lightning ページの種別を定義する。
コンポーネントのプロパティを設定する。
コンポーネントのサポートされるオブジェクトを設定する。

「XML 設定ファイルの要素」の完全なリストを参照してください。

このサンプル設定ファイルは、全種別の Lightning ページでコンポーネントを使用可能にしますが、レコードページでのサポートは取引先、商談、および倉庫オブジェクトのみに制限しています。このコンポーネントには、レコードページ用にアプリケーションページおよびホームページとは異なるプロパティセットが定義されています。

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3  <apiVersion>47.0</apiVersion>
4  <isExposed>true</isExposed>
5  <masterLabel>Best Component Ever</masterLabel>
6  <description>This is a demo component.</description>
7  <targets>
8    <target>lightning__RecordPage</target>
9    <target>lightning__AppPage</target>
10    <target>lightning__HomePage</target>
11  </targets>
12  <targetConfigs>
13    <targetConfig targets="lightning__RecordPage">
14      <property name="prop1" type="String" />
15      <objects>
16        <object>Account</object>
17        <object>Opportunity</object>
18        <object>Warehouse__c</object>
19      </objects>
20    </targetConfig>
21    <targetConfig targets="lightning__AppPage, lightning__HomePage">
22      <property name="prop2" type="Boolean" />
23    </targetConfig>
24  </targetConfigs>
25</LightningComponentBundle>

コンポーネントプロパティを定義する場合は、.js ファイルと設定ファイルで同じ種別 (String、Integer、Boolean) が割り当てられていることを確認してください。割り当て種別が一致しない場合は、設定ファイルの種別の割り当てが優先されます。

Note

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

Lightning アプリケーションビルダーに表示されるコンポーネントのカスタムアイコンとして SVG リソースを含めるには、コンポーネントのフォルダに SVG リソースを追加します。その名前は componentName.svg にする必要があります。SVG は 1 つのフォルダに 1 つだけ追加できます。

関連トピック

The Japanese Summer '24 guide is now live

日本語の Summer '24 ガイドが公開されました! 「Component Reference (コンポーネントリファレンス)」は、以前と同様にコンポーネントライブラリにあります。