Skip to main content

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

Labels:

Comments

  1. AnonymousJanuary 22, 2021 at 9:19 AM

    Great blog. Continue with the amazing stuff.

    ReplyDelete
  2. AnonymousJuly 11, 2022 at 8:32 AM

    Very Helpful...Thanks.

    ReplyDelete

Post a Comment

Popular posts from this blog

Conditionally Hiding Menu Items in D365 FinOps Menus Without Using Feature Keys

In Microsoft Dynamics 365 Finance and Operations (D365 F&O), menu items are the links that can be clicked on to access forms, reports, classes, jobs, and queries. Feature keys are typically used to control the visibility of menu items based on user licenses. However, there are scenarios where you might want to hide menu items conditionally without relying on feature keys.  This can be accomplished by extending the 'SysMenuNavigationObjectFactory' class and modifying the checkAddSubMenu(...) method.  Suppose we want to hide the  Vendor payment journal menu item under Accounts payable > Payments > Vendor payment journal Steps 1. Create an extension of the SysMenuNavigationObjectFactory class [ ExtensionOf ( classStr (SysMenuNavigationObjectFactory))] internal final class SysMenuNavigationObjectFactory_PS_Extension { } 2. Create a Chain of Command (CoC) for the checkAddSubMenu method [ ExtensionOf ( classStr (SysMenuNavigationObjectFactory))] internal final...
Post a Comment
Read more

Electronic reporting (ER) - Create custom destinations

Electronic reporting (ER) is a configurable tool in Microsoft Dynamics 365 that helps create and maintain regulatory electronic reporting and payments. Configuration of reports can be done by business users with the use of Visual Editors without the need for developers. Refer to Electronic reporting (ER) overview - Finance & Operations | Dynamics 365 | Microsoft Docs for more information and detailed overview on ER. Destinations can be configured for each ER format configuration and its output component. Destinations can only be set up for ER configurations that have been imported into the current Finance instance, and for the formats that are available on the Electronic reporting configurations page. The functionality for ER destination management is available at Organization administration > Electronic reporting > Electronic reporting destination.  Microsoft Dynamics 365 for Operations version 1611 (November 2016) or later allows the use of  the following destinat...
Post a Comment
Read more

Dynamics 365 eCommerce - Setting up the Development Environment

Microsoft Dynamics 365 Commerce is an evolution of Dynamics 365 Retail, which launched with new and improved capabilities for e-commerce, content management. To begin development and extension on Dynamics 365 eCommerce we'll need to install the following tools on the development machine: VSCODE - https://code.visualstudio.com Node.js - https://nodejs.org   (Currently version 10.x is the main supported version and the MSI installer can be found here : https://nodejs.org/dist/latest-v10.x/   ) Yarn - https://legacy.yarnpkg.com Git - https://git-scm.com/downloads (Note that development on eCommerce is only supported on Windows (as at 18/06/20).) Create a folder in your local drive to hold the e-Commerce site code - 'C:\repos' Open CMD in administrator mode and go to the folder directory you just created and clone the  Microsoft eCommerce repository with the following command:  git clone https://github.com/microsoft/Msdyn365.Commerce.Online.git This may take a while....
1 comment
Read more