対話型コンポーネントの概要

[アーティクル]
2024/07/26

この記事では、サイト作成者がビジュアルページビルダー、つまり Microsoft Dynamics 365 Commerce サイトビルダーの見たとおりのものが結果に反映される (WYSIWYG) プレビューキャンバスでテキスト、リッチテキスト、リンク、画像、およびビデオのフィールドを直接編集できる対話型コンポーネントについて説明します。

Commerce サイトビルダーでは、ページまたはフラグメント作成者が対話型コンポーネントを使用して、ビジュアルページビルダーで直接テキスト、リッチテキスト、リンク、画像、およびビデオのフィールドを編集できます。対話型コンポーネントは、Commerce オンラインソフトウェア開発キット (SDK) と共にリリースされ、テキスト用の msd msdec365.Text、リッチテキスト用の Msdyn365.RichTextComponent、リンク用の Msdyn365.Links、画像用の Msdyn365.Image、ビデオ用の Msdyn365.Video が含まれています。対話型コンポーネントが実装された後、サイトビルダーはテキストのインライン編集を許可し、リンク、画像、およびビデオ用の選択ウィンドウが開きます。

最適な作成エクスペリエンスのために、モジュール開発者は構成フィールドを表示する際に対話型コンポーネントを使用して、インライン編集を許可する必要があります。どのコンポーネントのカスタム実装も、EditableField 上位注文コンポーネント (HOC) のコンポーネントをラッピングして対話型にできます。この記事のガイドラインに従って、カスタムモジュール内の対話型コンポーネントをサポートします。

対話型コンポーネントはどのように機能するか

対話型コンポーネントは、必要な特定の構成フィールドの設定を行うコンポーネントにイベントハンドラーをフックします。

次の例では、テキスト構成フィールドで対話型コンポーネントを使用してテキストのインライン編集を可能にする方法を示します。 productTitle コンフィギュレーション値がモジュール定義ファイルの config セクションで指定されます。

...
    "config": {
        "productTitle": {
            "type": "string",
            "friendlyName": "Product Title",
            "description": "Product placement title"
        },
    }
...

対話型キャンバスエクスペリエンスをサポートするために、モジュールは Msd msd365.Text 対話型コンポーネントを使用します。この対話型コンポーネントは構成値を設定する handleTextChange イベントハンドラーを指定します。

public handleTextChange = (event: Msdyn365.ContentEditableEvent) => this.props.config.productTitle!.text = event.target.value;

<Msdyn365.Text
    className={'product-title'}
    tag={'h2'}
    text={this.props.config.productTitle}
    editProps={{ onEdit: this.handleTextChange, requestContext: this.props.context.request }}
/>

対話型コンポーネントの参照

テキストコンポーネント

実装すると、テキストコンポーネントはサイト作成者がビジュアルページビルダーで直接テキストをインライン編集できるようにします。

テキストコンポーネントの構文

<Msdyn365.Text />

テキストコンポーネントの例

<Msdyn365.Text
    text={heading.text || ''}
    tag={'h2'}
    className={'display-4'}
    editProps={{ onEdit: this.handleTextChange, requestContext: this.props.context.request }}
/>

public handleTextChange = (event: Msdyn365.ContentEditableEvent) => this.props.config.heading!.text = event.target.value;

利用可能なプロパティ

プロパティ	Description	型
テキスト	表示するテキスト。	文字列
タグ	テキストの表示に使用する HTML タグ (例えば、DIV または H2)。	文字列
className	カスケードスタイルシート (CSS) クラス名。	文字列
editProps	サイトビルダーでの対話を有効にするには必要なプロパティ。	ITextEditProps

ITextEditProps のプロパティ

プロパティ	Description	型
onEdit	テキスト変更イベントを処理する関数ハンドラー。	関数
requestContext	要求コンテキストのオブジェクト。	IRequestContext

リッチテキストコンポーネント

実装すると、リッチテキストコンポーネントはサイト作成者がビジュアルページビルダーで直接リッチテキストをインライン編集できるようにします。

リッチテキストコンポーネントの構文

<Msdyn365.RichTextComponent />

リッチテキストコンポーネントの例

<Msdyn365.RichTextComponent
    text={`<p className='d-none d-lg-block'>${paragraph}</p>`}
    editProps={{ onEdit: this.handleParagraphChange, requestContext: this.props.context.request }}
/>

利用可能なプロパティ

プロパティ	Description	型
テキスト	表示する HTML テキスト。	文字列
editProps	サイトビルダーでの対話を有効にするには必要なプロパティ。	ITextEditProps

ITextEditProps のプロパティ

プロパティ	Description	型
onEdit	テキスト変更イベントを処理する関数ハンドラー。	関数
requestContext	要求コンテキストのオブジェクト。	IRequestContext

リンクコンポーネント

実装すると、リンクコンポーネントはサイト作成者がビジュアルページビルダーでリンクの配列を編集できるようにします。

リンクコンポーネントの構文

<Msdyn365.Links />

リンクコンポーネントの例

<Msdyn365.Links
    links={config.links}
    editProps={{ onTextChange: this.handleLinkTextChange, requestContext: this.props.context.request }}
/>

利用可能なプロパティ

プロパティ	Description	型
リンク	表示するリンクデータの配列。	ILinksData[]
editProps	サイトビルダーでの対話を有効にするには必要なプロパティ。	ITLinkEditProps

ILinksData のプロパティ

プロパティ	Description	型
linkText	リンクとして表示するテキスト。	文字列
linkUrl	開く URL。	文字列
openInNewTab	リンクを新しいタブで開く必要があるかどうかを示すフラグ。	ブール値
ariaLabel	アクセシビリティの Accessible Rich Internet Applications (ARIA) ラベル。	文字列
className	CSS クラスの名前。	文字列
キー	React のキー。	文字列
role	アンカータグのロール (例えば、ボタン)。	文字列
additionalProperties	要素に追加する追加のプロパティのディクショナリ。	[x: 文字列]: 文字列
linkTag	リンクの表示に使用する HTML タグ。	文字列
innerClassName	アンカータグの内部コンポーネントの CSS クラス名。	文字列
onClick	リンククリックイベントを処理するクリックハンドラー。	関数

ILinkEditProps のプロパティ

プロパティ	Description	型
onTextChange	リンクテキスト変更イベントを処理する関数ハンドラー。	関数
requestContext	要求コンテキストのオブジェクト。	IRequestContext

単一リンクコンポーネント

実装すると、リンクコンポーネントはサイト作成者がビジュアルページビルダーで単一のリンクを編集できるようにします。

単一リンクコンポーネントの構文

<Msdyn365.Link />

単一リンクコンポーネントの例

<Msdyn365.Link
    link={config.links[1]}
    editProps={{ onTextChange: this.handleLinkTextChange(1), requestContext: this.props.context.request }}
/>

利用可能なプロパティ

プロパティ	Description	型
リンク	表示するリンクデータ。	ILinksData
editProps	サイトビルダーでの対話を有効にするには必要なプロパティ。	ILinkItemEditProps

ILinksData のプロパティ

プロパティ	Description	型
linkText	リンクとして表示するテキスト。	文字列
linkUrl	開く URL。	文字列
openInNewTab	リンクを新しいタブで開く必要があるかどうかを示すフラグ。	ブール値
ariaLabel	アクセシビリティの ARIA ラベル。	文字列
className	CSS クラスの名前。	文字列
キー	React のキー。	文字列
role	アンカータグのロール (例えば、ボタン)。	文字列
additionalProperties	要素に追加する追加のプロパティのディクショナリ。	[x: 文字列]: 文字列
linkTag	リンクの表示に使用する HTML タグ。	文字列
innerClassName	アンカータグの内部コンポーネントの CSS クラス名。	文字列
onClick	リンククリックイベントを処理するクリックハンドラー。	関数

ILinkItemEditProps のプロパティ

プロパティ	Description	型
onTextChange	リンクテキスト変更イベントを処理する関数ハンドラー。	関数
requestContext	要求コンテキストのオブジェクト。	IRequestContext

画像のコンポーネント

実装すると、画像コンポーネントはサイト作成者がビジュアルページビルダーで直接画像を編集できるようにします。

画像コンポーネントの構文

<Msdyn365.Image />

画像コンポーネントの例

<Msdyn365.Image
    editProps={{ key: this.props.config.image || {}, requestContext: this.props.context.request }}
    {...config.image}
    {...imageProps}
/>

利用可能なプロパティ

プロパティ	Description	型
src	画像ソースの URL。	文字列
fallBackSrc	画像を読み込めない場合のフォールバック URL。	文字列
altText	画像の代替テキスト。	文字列
caption	画像のキャプション文字列。	文字列
タイトル	画像のタイトル。	文字列
width	画像の幅。	番号
height	画像の高さ。	番号
imageSettings	画像の設定。	ImageSettings
additionalProperties	要素に追加する追加のプロパティのディクショナリ。	[x: 文字列]: 文字列
editProps	サイトビルダーでの対話を有効にするには必要なプロパティ。	IEditProps

IEditProps のプロパティ

プロパティ	Description	型
キー	モジュール定義ファイルの、config セクションの画像プロパティのパス。	オブジェクト
requestContext	要求コンテキストのオブジェクト。	IRequestContext

ビデオコンポーネント

実装すると、ビデオコンポーネントはサイト作成者がビジュアルページビルダーで直接ビデオを編集できるようにします。

ビデオコンポーネントの構文

<MsDyn365.Video></MsDyn365.Video>

ビデオコンポーネントの例

<MsDyn365.Video>
    <Player playerData={videoPlayerData} />
</MsDyn365.Video>

利用可能なプロパティ

プロパティ	Description	型
className	CSS クラスの名前。	文字列
editProps	サイトビルダーでの対話を有効にするには必要なプロパティ。	IEditProps

IEditProps のプロパティ

プロパティ	Description	型
キー	モジュール定義ファイルの、config セクションのプロパティのパス。	オブジェクト
requestContext	要求コンテキストのオブジェクト。	IRequestContext

一般的な編集可能 HOC

一般的な編集可能フィールドコンポーネントは、カスタムコンポーネントをラップし、サイトビルダーのコンテキストで相互作用を有効にします。

一般的な編集可能 HOC の構文

<EditableField />

一般的な編集可能 HOC の例

<EditableField
    onChange={this.props.editProps ? this.props.editProps.onEdit : this.onEdit} // handle innerHTML change
    requestContext={this.props.editProps?.requestContext}
    fieldProps={{
        text: this.props.text,
        tag: this.props.tag,
        className: this.props.className
    }}
    type={FieldType.Text}
/>

利用可能なプロパティ

プロパティ	Description	型
fieldProps	フィールドプロパティ。	[x: 文字列]: 文字列
タイプ	フィールドのタイプ (テキスト、画像、ビデオ、またはリンク)。	FieldType
requestContext	要求コンテキストのオブジェクト。	IRequestContext
Onchange	onChange イベントのイベントハンドラー。	関数
onMouseOver	onMouseover イベントのイベントハンドラー。	関数
onMouseOut	onMouseout イベントのイベントハンドラー。	関数
onFocus	onFocus イベントのイベントハンドラー。	関数
onBlur	onBlur イベントのイベントハンドラー。	関数
placeHolderText	フィールドからテキストをクリアされると表示されるテキスト。	文字列
無効	サイトビルダーでのファイルの編集を有効または無効にするフラグ。	文字列

追加リソース

ローカル開発中にサインイン状態をモックする

コンテキストに基づいてモジュールプロパティを表示するように構成する

CultureInfoFormatter クラスを使用したグローバライズモジュール

Azure Key Vault を使用してキー管理のセキュリティを強化する

モジュールで動作

フラグメントで動作

次の方法で共有

対話型コンポーネントの概要

対話型コンポーネントはどのように機能するか

対話型コンポーネントの参照

テキスト コンポーネント

テキスト コンポーネントの構文

テキスト コンポーネントの例

利用可能なプロパティ

ITextEditProps のプロパティ

リッチ テキスト コンポーネント

リッチ テキスト コンポーネントの構文

リッチ テキスト コンポーネントの例

利用可能なプロパティ

ITextEditProps のプロパティ

リンク コンポーネント

リンク コンポーネントの構文

リンク コンポーネントの例

利用可能なプロパティ

ILinksData のプロパティ

ILinkEditProps のプロパティ

単一リンク コンポーネント

単一リンク コンポーネントの構文

単一リンク コンポーネントの例

利用可能なプロパティ

ILinksData のプロパティ

ILinkItemEditProps のプロパティ

画像のコンポーネント

画像コンポーネントの構文

画像コンポーネントの例

利用可能なプロパティ

IEditProps のプロパティ

ビデオ コンポーネント

ビデオ コンポーネントの構文

ビデオ コンポーネントの例

利用可能なプロパティ

IEditProps のプロパティ

一般的な編集可能 HOC

一般的な編集可能 HOC の構文

一般的な編集可能 HOC の例

利用可能なプロパティ

追加リソース

フィードバック

その他のリソース

テキストコンポーネント

テキストコンポーネントの構文

テキストコンポーネントの例

リッチテキストコンポーネント

リッチテキストコンポーネントの構文

リッチテキストコンポーネントの例

リンクコンポーネント

リンクコンポーネントの構文

リンクコンポーネントの例

単一リンクコンポーネント

単一リンクコンポーネントの構文

単一リンクコンポーネントの例

ビデオコンポーネント

ビデオコンポーネントの構文

ビデオコンポーネントの例