Dynamics 365 eCommerce - Add module configuration fields to site builder

Recently our team has been working on the new eCommerce extensions. One of the things we figured out was how to add the module configuration fields in the page authoring tools of the site builder.

These configuration fields can be added to modules to allow page authors to take control of certain features of the module and determine how these features should render or behave on the site. Some examples include the alignment, position, layouts and adding customized text on contents of the modules.

 

Assuming you have your development environment setup, and have already created an extension module, open 'yourmodulename.definition.json' file and add a 'config' section if it does not exist. The config section of the module's definition file will contain all the fields that you want to expose and make usable in the page authoring tools of the site builder. Add your configuration fields in the config section.

{

    "$type": "contentModule",

    "friendlyName": "your module name",

    "name": "yourmodulename",

    "description": "your module description",

    "categories": [

        "Promotions",

        "Marketing"

    ],

    "config": {

        "anchor": {

            "friendlyName": "Widget Anchor",

            "description": "Sets the placement of the Widget popup",

            "type": "string",

            "enum": {

                "left": "Left",

                "center": "Center",

                "right": "Right"

            },

            "default": "center",

            "scope": "module"

        },

        "buttonText": {

            "friendlyName": "Button Text",

            "description": "Sets the text to be displayed on the button",

            "type": "string",

            "default" : "Submit a style"

        }

    }

}

You may set default values for each field  by setting your default text to the 'default' variable of the configuration field. A list of the supported data types for the module configurations can be found at https://docs.microsoft.com/en-us/dynamics365/commerce/e-commerce-extensibility/add-module-config-fields

 

Next, for local development and debugging you may set mock values to the configuration fields in 'yourmodulename.json' file. If this file does not exist, then create a 'mocks' folder inside your module folder i.e 'src/modules/yourmodulename/mocks' and add a 'yourmodulename.json' file in this 'mocks' folder.

Add a 'config' section to 'mocks/yourmodulename.json' file and set the mock values to the configuration fields you added earlier. 

{

    "id": "yourmodulename",

    "config": {

        "anchor" : "center",

        "buttonText": "Submit a style"

    },

    "typeName": "yourmodulename"

}

To access these configurations in the typescript 'yourmodulename.tsx' file of the module, extract the  'config' from the props and access your configuration fields directly from the .tsx file.

 

You may export this as view props and access the configuration fields directly from the view - 'yourmodulename.view.tsx' file allowing your module features, contents and styles to be directly configured by the author with page authoring tools from the site builder.

import * as React from 'react';

import { IyourmodulenamepopupProps } from './yourmodulenameprops.autogenerated';

import { getCurrentUrl } from './actions';

export interface IyourmodulenameViewProps extends IyourmodulenamepopupProps<{}> {

    buttonText?: string;

}

/*

 * yourmodulename component

*/

class yourmodulename extends React.PureComponent<IyourmodulenameProps<{}>> {

    public render(): JSX.Element | null {

        const { context, config } = this.props;

        // Extract configuration field values

        const buttonText = config.buttonText ? config.buttonText : '';

        const anchor = config.anchor ? config.anchor : '';

        console.log('anchor:', anchor)

        const yourmodulenameViewProps = {

            ...this.props,

            buttonText

        };

        return this.props.renderView(yourmodulenameViewProps) as React.ReactElement;

    }

}

Written by: Patrick Sharma, Developer, Microsoft Dynamics 365 F&O, Retail & Commerce