レイアウトコンテナーモジュールの作成

[アーティクル]
03/08/2023

この記事では、レイアウトコンテナーモジュールの作成、テストおよびプレビュー方法をについて説明します。

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 start
```
Web ブラウザーで、次の URL を開き、モジュールを表示します: https://localhost:4000/page?mock=campaign-containerMock。 mock= クエリ文字列パラメーターのページモックの名前に注意してください。