LWC コンテナ

概要

The LWC コンテナ コンポーネントは、開発者が作成したカスタム Lightning Web Components（LWC）を、Avonni Dynamic Component のキャンバスに直接統合できるようにします。この強力な機能により、ノーコードのページ設計の柔軟性と、カスタムコード化された LWC の特化した機能性を組み合わせることが可能になります。

主な目的は次のとおりです:

LWC へのデータ受け渡し: Dynamic Component のリソース（変数、定数、数式、または他の Avonni コンポーネントの属性）から、公開された @api カスタム LWC のプロパティへ動的にデータを送信します。
カスタム機能の活用: LWC 内で構築されたユニークな UI 要素、複雑なビジネスロジック、または統合機能を、ノーコード設計の中に取り入れます。

適切な LWC コンテナの選択: Avonni データ LWC コンテナ vs. LWC コンテナ

次のデータ LWC コンテナコンポーネントとは異なり、この LWC コンテナには、データのクエリ、フィルタリング、検索、ページネーションの機能は組み込まれていません。これは単に LWC のためのコンテナであり、データ処理は LWC 内で行うか、Dynamic Component から入力プロパティを通じて渡されます。

LWC 内で Avonni のデータクエリや検索機能を使用したい場合は、代わりに Avonni データ LWC コンテナコンポーネントの使用を検討してください。

LWC コンテナコンポーネントの追加

コンポーネントライブラリ（左パネル）から「LWC コンテナ」コンポーネントを見つけ、キャンバスにドラッグします。

構成

キャンバス上の LWC コンテナコンポーネントを選択し、プロパティパネルでそのプロパティにアクセスします。

基本プロパティ

API 名： （テキスト）この LWC コンテナインスタンスの一意の識別子（例: MyCustomLwcHolder).

LWC の選択

ホストされている画像の カスタム Lightning Web Component（通常は開発者が作成）の 正確な API 名 を埋め込みます。名前は次の形式に従う必要があります （例: namespace/componentName c/myCustomCardList デフォルトの「c」名前空間の場合、または yourNamespace/specialDisplay

特定の名前空間の一部である場合）。

LWC へのデータ受け渡し（属性） カスタム LWC では、正しく動作するためにデータが必要なことがよくあります。例えば や @api recordIdや LWC コンテナ @api config です。 @api を使うと、Dynamic Component からそれらの

プロパティ @api へ直接値を送信でき、LWC をダイナミックかつコンテキスト認識にします。 LWC 内の や プロパティを 入力ソケット

だと考え、Dynamic Component からの値を

電源やデータケーブル

として挿し込むイメージです。

データの渡し方

どのデータを LWC のどの入力に入れるかは、
プロパティパネル内の

Attributes

セクションで定義します。 ステップバイステップの例
開発者から、次を期待する LWC を渡されたとします:
- @api recordId;@api configOptions; @api これに適切なデータを供給する方法は次のとおりです: 「入力プロパティを追加」をクリック).
- ValueLWC コンテナの設定で。
  - 各プロパティについて: 変数（例: LWC プロパティ API 名)
  - 各プロパティについて: ：次の （例: 入力の名前を入力します（例:)
  - 各プロパティについて: 数式（Formula）
  - 各プロパティについて: recordId （例: マッピングされた値)
  - 各プロパティについて: ：Dynamic Component から送るデータを選択します。次から選べます: 変数 selectedAccountId)

定数

シナリオ"standard-view" コンポーネント属性@MyDataTable.firstSelectedRow.Id 「入力プロパティを追加」をクリック グローバル変数

（例:

Name

Value

$Component.recordId

「入力プロパティを追加」をクリック

selectedAccountId

実例

：次のページを設計しているとします

取引先（Account）レコード で、現在の

を必要とするカスタムのタイムライン LWC を表示したい。

といった設定も必要です。

行うことは次のとおりです:
動作内容

現在のレコードの ID を LWC に送信します configOptions

{timelineConfigJson}

Name （変数） @api テキスト変数に保存されたカスタム JSON 文字列を送信します
これでページが読み込まれると、LWC は次を受け取ります:
正しい取引先レコードの ID と、 表示用の設定一式。 そしてコードを
変更することなく

動的に機能します。

ベストプラクティスは、 LWC のコード内の 名前と完全に一致 していなければなりません（大文字小文字を区別）。

マッピングされた値を使って、有効な Dynamic Component のリソース（変数、定数、数式、コンポーネント属性、グローバル変数）を選択してください。

値の

データ型が適合している
ことを確認してください（例: 真偽値入力にテキストを送らない）。 インタラクション 必要に応じて複数項目を追加することで、いくつでもプロパティを渡せます
カスタムイベントの統合 LWC コンテナは、 （例: カスタムイベント, をサポートし、).
ビルダーで定義された インタラクション, をトリガーします。これにより、LWC とビジュアルキャンバス間の双方向コミュニケーションが可能になります。, 仕組みビルダー内で

LWC コンテナを選択します。 次へ移動:

パネル。

次のトリガーでインタラクションを追加: カスタムイベント名 refreshTimeline

showFormModal

アクションを選択（例: navigateモーダルを表示

{timelineConfigJson}

レコードを更新 など）。 あなたの LWC 内
次を使ってイベントをディスパッチします this.dispatchEvent(new CustomEvent('myCustomEventName'));.
イベント名は

ビルダーで設定されたものと

完全一致 @api しなければなりません（大文字小文字を区別）。

次に何が起きるか LWC コンテナはイベントをリッスンし、捕捉して、 マップされたインタラクション を実行します—追加の設定は不要です。 次を使用 衝突を避けるため、記述的で一意な
- イベント名を使ってください。
- 常に名前を
大文字小文字を区別して LWC コンテナはイベントをリッスンし、捕捉して、 マップされたインタラクション を実行します—追加の設定は不要です。 一致させてください。 期待されるイベントをドキュメント化し、ビルダーが適切なインタラクションを設定できるようにします。 ビルダーおよびプレビューモードの扱い
- LWC コンテナは、埋め込まれた LWC に 2 つの真偽値属性を自動的に渡します。これらは次のように
- プロパティとして宣言できます:

isBuilder

（真偽値）:

この属性は、 true
になります。次の場合: あなたの LWC が: Avonni Dynamic Component Builder

：最大値。

内に表示されているとき。このモードでは、LWC は完全にはインタラクティブではありません。開発者はこのフラグを使用して次のことができます:

シナリオ完全で複雑なコンテンツをレンダリングする代わりに、簡易なプレースホルダーまたはデザイン時の表現を表示する。 デザイン時に不要なデータ取得、API リクエスト、複雑な計算を防止する。isPreview 次の場合にtrue になります: あなたの LWC がAvonni Dynamic Component のプレビューモード で表示されているとき（Dynamic Component が公開される前、または Salesforce ページで本番使用される前）。開発者はこのフラグを使用して次のことができます: コンポーネントの簡易版またはサンプルデータ版を表示する。 プレビュー中に意図しない本番 API 呼び出しやデータベースクエリの実行を回避する。 スタイリングと可視性（コンテナ用） @api.

これらの設定は LWC コンテナ自体に適用され、内部の LWC のスタイリングには適用されません（内部は LWC 自身の CSS によって制御されます）。 プレビュー中に意図しない本番 API 呼び出しやデータベースクエリの実行を回避する。 マージン、パディング:

標準の Avonni スタイリングオプションで、コンテナ枠の余白や寸法を制御します。

コンポーネントの可視性を設定

LWC コンテナ全体（したがって埋め込まれた LWC）を表示するかどうかを制御します。動的な可視性には真偽値リソースにバインドします。 選択した製品の在庫情報を表示
：ページ内の別の場所（例えば データテーブル:
- 実際の: 、
- フォームフィールド: 、または
計算された数式や）で選択した製品の在庫情報を表示したい。開発者は productStockViewer:
- Name: プレビュー中に意図しない本番 API 呼び出しやデータベースクエリの実行を回避する。
- Value:
  - というカスタム LWC を提供し、 productId,
  - を

経由で受け付けます。

Name

Value

$Component.recordId

プレビュー中に意図しない本番 API 呼び出しやデータベースクエリの実行を回避する。

productId

この

を LWC コンテナの Attributes セクションを使って動的に渡します。

Avonni Dynamic Component における LWC 設定 `で表示されているとき（Dynamic Component が公開される前、または Salesforce ページで本番使用される前）。開発者はこのフラグを使用して次のことができます:` Dynamic Component 内（例: 製品関連のページ）で:

LWC コンテナを追加

キャンバスに配置します。 プレビュー中に意図しない本番 API 呼び出しやデータベースクエリの実行を回避する。 スタイリングと可視性（コンテナ用） @api,
次の値を
プロパティパネル

Flow の変数や判定とシームレスに連携します。 で設定します

<template>
    stockViewerContainer
        LWC 名
            c/productStockViewer
                次に、
                セクションで、
                    「項目を追加」をクリック
                </template>
                データテーブルから:
                    $Component.ProductTable.selectedRow.productId
                </template>
            </template>
            または、必要に応じて変数や数式から。
                属性マッピングの例テーブル
            </template>
        選択された製品の ID をカスタム LWC に送信します
    💡 他の任意の動的ソース（フォームフィールド、変数、数式）を渡すこともできます。
</template>

Flow の変数や判定とシームレスに連携します。 完全なコード:

LWC

このサンプル LWC は次を行います:
    リアクティブに
    を受け取り、

    @api
    非同期の在庫参照をシミュレートし、
        動的な在庫情報またはローディング UI を表示します。
        productStockViewer.html
        <lightning-card title="Stock Info" icon-name="utility:info">
            <div class="slds-p-around_medium">
        }
    }

    <template if:true={productId}>
        <p>Product ID: <strong>{productId}</strong></p>
    }

    <template if:true={stock}>
        <p>📦 Stock: <strong>{stock}</strong></p>
        <template if:false={stock}>
            <p>⏳ Loading stock data...</p>
        }, 1000);
    }
}

Flow の変数や判定とシームレスに連携します。 <template if:false={productId}>

<p>No product selected</p>
</div>
    </lightning-card>
    productStockViewer.js
    import { LightningElement, api } from 'lwc';
        export default class ProductStockViewer extends LightningElement {
        _productId;
        stock = null;
    set productId(value) {
this._productId = value;

this.stock = null; `@api` if (value) {

this.fetchStockData(value);

get productId() { 値を参照するフィルターを追加します： return this._productId; fetchStockData(productId) {
// 疑似的な非同期呼び出し（必要に応じて実際の API に置き換えてください） setTimeout(() => {
this.stock = Math.floor(Math.random() * 100);productStockViewer.js-meta.xml<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

LWC

<apiVersion>63.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
    <target>lightning__RecordPage</target>

    <target>lightning__AppPage</target>
        <target>lightning__HomePage</target>
    }
}

</targets>

<template>
    </LightningComponentBundle>
        カスタム LWC の使用
    選択された製品の ID をカスタム LWC に送信します
    入力とインタラクション
        この例は、次を使用する最小構成のカスタム LWC を示します:
    選択された製品の ID をカスタム LWC に送信します
    @api isBuilder
        @api isPreview
            でデザイン/プレビューの挙動を制御し、
        選択された製品の ID をカスタム LWC に送信します
        @api value
        で動的コンテンツを受け取り、
        カスタムイベント（
            showtoast
            ）で Avonni のインタラクションをトリガーします。
        customLwcComponent.js
    選択された製品の ID をカスタム LWC に送信します
</template>

変数が更新され、それらの値を使用してデータテーブルをフィルタリングできます。

export default class LwcComponent extends LightningElement { @api isBuilder;
@api isPreview; @api value; 各 handleButtonClick() { this.dispatchEvent(new CustomEvent('showtoast')); customLwcComponent.html
<div lwc:if={isBuilder} class="slds-text-align_center slds-text-title_caps slds-p-around_large"> これはビルダーモード用のプレースホルダーです。
<div lwc:elseif={isPreview} class="slds-text-align_center slds-text-title_caps slds-p-around_large"> これはプレビューモード用のプレースホルダーです。

まとめると

最終更新 4 か月前

役に立ちましたか？

概要

適切な LWC コンテナの選択: Avonni データ LWC コンテナ vs. LWC コンテナ

LWC コンテナ コンポーネントの追加

構成

基本プロパティ

LWC の選択

特定の名前空間の一部である場合）。

だと考え、Dynamic Component からの値を

定数

{timelineConfigJson}

動的に機能します。

マッピングされた値を使って、有効な Dynamic Component のリソース（変数、定数、数式、コンポーネント属性、グローバル変数）を選択してください。

showFormModal

{timelineConfigJson}

ビルダーで設定されたものと

isBuilder

：最大値。

内に表示されているとき。 このモードでは、LWC は完全にはインタラクティブではありません。開発者はこのフラグを使用して次のことができます:

標準の Avonni スタイリングオプションで、コンテナ枠の余白や寸法を制御します。

経由で受け付けます。

this.stock = null; @api if (value) {

変数が更新され、それらの値を使用してデータテーブルをフィルタリングできます。

まとめると

LWC コンテナコンポーネントの追加

内に表示されているとき。このモードでは、LWC は完全にはインタラクティブではありません。開発者はこのフラグを使用して次のことができます:

this.stock = null; `@api` if (value) {