Create a layout container module

Artikel
12/08/2023

This article describes how to create, test, and preview a layout container module.

The Microsoft Dynamics 365 Commerce online software development kit (SDK) provides an add-module command-line interface (CLI) command that you can use to create a new layout container module. To create the module, first run the command with the new module name, and then change the $type value in the new module's definition file to containerModule.

Examples

The following example shows how to create a container module that is named campaign-container.

yarn msdyn365 add-module campaign-container

After the command finishes running, open the new module's definition file, campaignContainer.definition.json, and change the $type value to containerModule.

The following example shows the addition of a slots section that contains two slots for this container. Notice that each slot lets you define allowedTypes to limit the types of modules that are allowed inside that slot. You can also specify the maximum and minimum number of modules that can be inserted into the slot.

{
    "$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
        }
    }
}

The following example shows the module's React view file, campaignContainer.view.tsx, which uses the slots for the container. This example uses a single React/View file, and that the campaignContainer.tsx can be deleted.

import * as React from 'react';
import { ICampaignContainerData } from './campaign-container.data';
import { ICampaignContainerProps } from './campaign-container.props.autogenerated';

const CampaignContainerView: React.FC<ICampaignContainerProps<ICampaignContainerData>> = props => {
    return (
        <div {...props.renderModuleAttributes(props)} id={props.id}>
            <div className='row'>
                {props.slots.slot1[0]}
                {props.slots.slot2[0]}
            </div>
        </div>
    );
};

export default CampaignContainerView;

Test a layout container module

To test a container module in a local development environment, you must use a page mock.

The following example shows a sample page mock, campaign-containerMock.json, that you can use for testing. The file is saved in the \src\pageMocks directory.

{
    "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": [
                                        {
                                            "typeName": "content-block",
                                            "id": "ContentBlock__0",
                                            "friendlyName": "Content block",
                                            "platform": {
                                                "layout": "slim-hero-small"
                                            },
                                            "config": {
                                                "msdyn365__moduleLayout": "slim-hero-small",
                                                "heading": {
                                                    "text": "",
                                                    "tag": "h2"
                                                },
                                                "image": {
                                                    "$type": "image",
                                                    "src": "https://bit.ly/33cMGxr",
                                                    "altText": "Retro Horn Rimmed Keyhole Nose Bridge Round Sunglasses",
                                                    "title": "Retro Horn Rimmed Keyhole Nose Bridge Round Sunglasses",
                                                    "imageSettings": {
                                                        "quality": 80,
                                                        "disableLazyLoad": true,
                                                        "lazyload": true
                                                    }
                                                },
                                                "paragraph": "Retro Horn Rimmed Keyhole Nose Bridge Round Sunglasses",
                                                "imagePlacement": "imageLeft"
                                            },
                                            "data": {}
                                        }
                                    ],
                                    "slot2": [
                                        {
                                            "typeName": "text-block",
                                            "id": "TextBlock__0",
                                            "friendlyName": "Text block",
                                            "config": {
                                                "paragraph": "High-quality and pioneered with the perfect blend of timeless classic and modern technology with hint of old school glamor."
                                            }
                                        }
                                    ]
                                }
                            }
                        ]
                    }
                }
            ]
        }
    },
    "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
}

Preview the page

To preview the page in a local web browser, follow these steps.

At a command prompt, go to your root SDK folder and run the yarn start command, as shown in the following example.
```
c:\repos\Msdyn365.Commerce.Online\yarn start
```
In a web browser, open the following URL to view the module: https://localhost:4000/page?mock=campaign-containerMock. Notice the name of the page mock in the mock= query string parameter.