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

User Security Governance (Preview) feature in D365 FO

Let's take a first look at User security governance . It is the latest set of features in the D365F&O 10.0.43 update which provides useful tools to System administrators for role management, licenses auditing, enhanced audit trails and versioning, supported with some useful very useful reports around license usage, separation of duties violations etc. Key aspects of this feature include: Role Management: Improved tools for creating, modifying, and managing user roles. Audit Trails: Enhanced tracking of changes made to security settings, helping administrators monitor and review security configurations. Compliance: Tools to ensure that security settings comply with organizational policies and regulatory requirements. Feature management A new feature called (Preview) User security governance has been added to Feature management to control the overall functionality. Navigate to System administration > Security > Security governance to explore all the features. Security analy...
Post a Comment
Read more

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