エクスペリエンスビルダーのコンポーネントの設定

カスタム Lightning Web コンポーネントをエクスペリエンスビルダーで使用できるようにし、ユーザーがコンポーネントをページに追加できるようにします。コンポーネントを設定すると、そのコンポーネントは、組織のすべてエクスペリエンスビルダーサイトで使用できるようになります。

コンポーネントのプロジェクトフォルダーには、コンポーネントのメタデータ値を定義する設定ファイル (componentName.js-meta.xml ファイル) を含める必要があります。コンポーネントをエクスペリエンスビルダーで使用するには、ファイルを編集してコンポーネントのデザイン設定値を定義します。

  • コンポーネントをエクスペリエンスビルダーで使用できるようにするには、isExposedtrue に設定します。続いて、targets で次のいずれかの値を target として追加します。
    • [コンポーネント] パネルに表示されるドラッグアンドドロップコンポーネントを作成するには lightningCommunity__Page を追加します。
    • コンテンツレイアウトウィンドウに表示される LWR サイトのページレイアウトコンポーネントを作成するには lightningCommunity__Page_Layout を追加します。
    • [テーマ] 領域の [設定] に表示される LWR サイトのテーマレイアウトコンポーネントを作成するには lightningCommunity__Theme_Layout を追加します。
  • エクスペリエンスビルダーでコンポーネントが選択されたときに編集可能なプロパティを含めるには、targetslightningCommunity__Default を定義し、targetConfigs でプロパティを定義します。エクスペリエンスビルダーで編集できるのは lightningCommunity__Page または lightningCommunity__Page_Layout の対象に定義されたプロパティのみです。
  • 拡張 LWR Experience Cloud サイトの場合、コンポーネントの整数または文字列プロパティをスクリーンサイズに対応させます。screenResponsive 属性の値を true に、exposedTo 属性の値を css にして両方を宣言します。次に、画面サイズごとに CSS 変数でメディアクエリを定義し、エクスペリエンスビルダーを使用してビューモードごとにプロパティ値を指定する必要があります。詳細は、「Make a Custom LWR Component Screen-Size Responsive (カスタム LWR コンポーネントを画面サイズに対応させる)」を参照してください。

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

編集可能なプロパティを含むシンプルなドラッグアンドドロップ Hello World コンポーネントのサンプルコードを次に示します。

ドラッグアンドドロップコンポーネントのカスタムアイコンを定義するには、コンポーネントのフォルダーに SVG リソースを追加します。SVG リソースを含めないと、[コンポーネント] パネルでデフォルトのアイコン (Lightning) が使用されます。

エクスペリエンスビルダーのコンポーネントパネル

SVG リソースの名前は componentName.svg にする必要があります。フォルダーあたりの SVG の数は 1 つのみです。

「Hello World」コンポーネントと一緒に表示するシンプルな赤い円の SVG リソースの例を次に示します。

新しいサイトの場合、エクスペリエンスビルダーでは [厳格な CSP] がデフォルトのセキュリティレベルとして設定されます。Lightning Web コンポーネントがサードパーティのリソースを参照する場合は、エクスペリエンスビルダーでセキュリティレベルを設定し、適切なホストを許可リストに登録する必要があります。

lightningCommunity__RelaxedCSP タグで設定されていない管理パッケージ内の Lightning Web コンポーネントは、Lightning Locker が無効なサイトにおいてエクスペリエンスビルダーの [コンポーネント] パネルで無効になります。詳細は、「XML 設定ファイルの要素」を参照してください。

関連トピック