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

この記事では、サイト作成者がビジュアル ページ ビルダー、つまり 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	フィールドからテキストをクリアされると表示されるテキスト。	文字列
無効	サイト ビルダーでのファイルの編集を有効または無効にするフラグ。	文字列

追加リソース

要求プロパティ オブジェクト

アプリ設定

プラットフォーム設定ファイル

モジュール定義ファイルの拡張

Cookie API の概要

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

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

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

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

モジュールで動作

フラグメントで動作