異なるフォーム要素に合わせたコンポーネントの設定

Lightning アプリケーションページをデスクトップ形式 (Large)、電話形式 (Small)、またはその両方の形式で表示する場合にページに表示するコンポーネントを設定します。

コンポーネントの設定ファイルの <targetConfigs> セクションで、<supportedFormFactors> タグセットを使用して、ページ種別についてコンポーネントがサポートするフォーム要素を宣言します。

<supportedFormFactors> を定義しない場合は、ページ種別がサポートするフォーム要素がサポートされます。ただし、ページ種別ごとに <supportedFormFactors> を定義することをお勧めします。

アプリケーションページとレコードページでは、Large と Small のフォーム要素がサポートされます。ホームページでは、Large のフォーム要素のみがサポートされます。

アプリケーションページとレコードページでは電話とデスクトップの両方がサポートされるため、これらのページ上のコンポーネントは電話でもデスクトップでも表示できます。ホームページではデスクトップのみがサポートされるため、ホームページ上のコンポーネントはデスクトップのみで表示できます。

このサンプルコンポーネントがサポートされるページ種別は、アプリケーション、レコード、ホームの 3 つです。アプリケーションページでは、Small フォーム要素を持つデバイスのみに表示されるように設定されています。ユーザが Large フォーム要素を持つデバイスでアプリケーションページを参照すると、コンポーネントは表示されません。

1<?xml version="1.0" encoding="UTF-8"?>
2<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3    <apiVersion>42.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__AppPage">
14            <property name="prop2" type="Boolean" />
15            <supportedFormFactors>
16                <supportedFormFactor type="Small" />
17            </supportedFormFactors>
18        </targetConfig>
19        <targetConfig targets="lightning__RecordPage">
20            <property name="prop1" type="String" />
21            <supportedFormFactors>
22                <supportedFormFactor type="Large" />
23            </supportedFormFactors>
24        </targetConfig>
25        <targetConfig targets="lightning__HomePage">
26            <property name="prop3" type="Integer" />
27            <supportedFormFactors>
28                <supportedFormFactor type="Large" />
29            </supportedFormFactors>
30        </targetConfig>
31    </targetConfigs>
32</LightningComponentBundle>

コンポーネントが一度 Lightning ページで使用されると、サポートされるフォーム要素を増やすことはできますが、減らすことはできなくなります。

Note

関連トピック

The Japanese Summer '24 guide is now live

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