レイアウト コンテナー モジュールの作成
この記事では、レイアウト コンテナー モジュールの作成、テストおよびプレビュー方法をについて説明します。
Microsoft Dynamics 365 Commerce オンライン ソフトウェア開発キット (SDK) では、新しいレイアウト コンテナー モジュールを作成するために使用できる 追加モジュールコマンドライン インターフェイス (CLI) コマンドを提供します。 モジュールを作成するには、始めに新しいモジュール名でコマンドを実行し、新しいモジュールの定義ファイルの $type 値を containerModule に変更します。
例
次例では、campaign-container という名前のコンテナー モジュールの作成方法について表示します。
yarn msdyn365 add-module campaign-container
コマンドの実行を終了したら、新しいモジュールの定義ファイル campaignContainer.definition.json を開き、$type 値を containerModule に変更します。
次の例では、コンテナー用の 2 つスロットを含むスロットセクションの追加を表示します。 各スロットで、allowedTypes を定義して、そのスロット内で許可されるモジュールのタイプを制限することができます。 スロットに挿入できるモジュールの最大数と最小数を指定することもできます。
{
"$type": "containerModule",
"friendlyName": "Sample Container",
"name": "campaign-container",
"description": "Sample container module",
"categories": ["container"],
"tags": [""],
"config": {
},
"slots": {
"slot1": {
"friendlyName": "Content Slot 1",
"description": "Content to be rendered in container. Max 2",
"allowedTypes": "*",
"max": 2,
"min": 0
},
"slot2": {
"friendlyName": "Content Slot 2",
"description": "Content to be rendered in container. Max 2",
"allowedTypes": "*",
"max": 2,
"min": 0
}
}
}
次の例では、コンテナーの移動を使用するモジュールの反応ビュー ファイルである campaignContainer.view.tsx を示します。 この例では、単一の反応/表示ファイルを使用し、campaignContainer.tsx を削除できます。
import * as React from 'react';
import { ICampaignContainerData } from './campaignContainer.data';
import { ICampaignContainerProps } from './campaignContainer.props.autogenerated';
const CampaignContainerView: React.FC<ICampaignContainerViewProps> = props => {
return (
<div {...this.props.renderModuleAttributes(this.props)} id={this.props.id}>
<div className='row'>
{slots.slot1[0]}
{slots.slot2[0]}
</div>
</div>
);
};
export default CampaignContainer;
レイアウト コンテナー モジュールのテスト
ローカルの開発環境でページ コンテナー モジュールをテストするには、ページ モックを使用する必要があります。
次の例では、テストに使用できるサンプル ページ アクセスである campaign-containerMock.json を示します。 ファイルは \s\pageMocks ディレクトリに保存されます。
{
"exception": null,
"pageRoot": {
"id": "core-root_0",
"typeName": "core-root",
"modules": {
"body": [
{
"id": "default-page_0",
"typeName": "default-page",
"modules": {
"primary": [
{
"id": "primaryArea__0",
"typeName": "campaign-container",
"modules": {
"slot1": [
{
"id": "ProductFeature__0",
"typeName": "productFeature",
"config": {
"imageAlignment": "left",
"productTitle": "Retro Horn Rimmed Keyhole Nose Bridge Round Sunglasses",
"productDetails": "High-quality and pioneered with the perfect blend of timeless classic and modern technology with hint of old school glamor.",
"productImage": {
"src": "https://bit.ly/33cMGxr",
"altText": "Retro Horn Rimmed Keyhole Nose Bridge Round Sunglasses"
},
"buttonText": "Buy Now",
"productIds": "68719498121"
}
}
],
"slot2": [
{
"id": "ProductFeature__1",
"typeName": "productFeature",
"config": {
"imageAlignment": "right",
"productIds": "22565430170",
"buttonText": "Buy Now"
}
}
]
}
}
]
}
}
]
}
},
"renderingContext": {
"gridSettings": {
"xs": {
"w":767
},
"sm": {
"w":991
},
"md": {
"w":1199
},
"lg": {
"w":1599
},
"xl": {
"w":1600
}
},
"staticContext": {
"staticCdnUrl": "/_scnr/"
},
"locale": "en-us"
},
"statusCode": 200
}
ページをプレビューする
ローカルの Web ブラウザーでページをプレビューするには、以下の手順を実行します。
コマンド プロンプトで、ルート SDK フォルダーに移動し、yarn 開始コマンドを実行します。 次に例を示します。
c:\repos\Msdyn365.Commerce.Online\yarn startWeb ブラウザーで、次の URL を開き、モジュールを表示します:
https://localhost:4000/page?mock=campaign-containerMock。 mock= クエリ文字列パラメーターのページ モックの名前に注意してください。