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

Process automation in Microsoft dynamics 365 Finance and Operations

Process automation in Microsoft Dynamics 365 Finance and Operations (D365FO) is a powerful feature that allows you to schedule processes to be executed by the batch server automatically. It simplifies the creation of batch jobs, thanks to the built-in wizards within the Process Automation setup. The updated calendar view of the scheduled work allows end users to view and take action on scheduled and completed work.  The central administration page for all process automations is found in the System Administration module under the Setup menu. This page will list all automated processes (series) that are set up in the system. It will also allow you to add new process automations directly from this page. After a series is set up, you can manage each series from this list. You can choose to edit the entire series, delete it, view all occurrences in a list view, or disable the series if you would like to pause the scheduled work for a while. For more information about process automa...
Post a Comment
Read more