Enhancing User Interaction in Dynamics 365 CE: Creating and Customizing Dialog Boxes
Introduction
Custom dialog boxes in Dynamics 365 CE provide a powerful tool for enhancing user interaction by creating tailored experiences within the Unified Client Interface (UCI). This blog delves into the process of creating and customizing these dialog boxes.
Basics of Custom Dialogs
Custom dialogs in Dynamics 365 are defined within the Customizations.xml file. This involves creating new fields specific to the dialog, such as Option Sets, Status, or Description fields, ensuring that the data types align with Dynamics 365 specifications.
Creating a Simple Custom Dialog
Defining the Dialog
Start by defining the dialog within the Dialogs element in Customizations.xml. For instance, creating a custom dialog for withdrawing any request may look like this:
XML
<Dialogs>
<Dialog>
<LocalizedNames>
<LocalizedName description="Custom Dialog" languagecode="1033" />
</LocalizedNames>
<Descriptions>
<Description description="Shows the custom dialog process." languagecode="1033" />
</Descriptions>
<FormId>{22222222 - 2222 - 2222 - 2222 - 222222222222}</FormId>
<UniqueName>CustomDialog</UniqueName>
<IsCustomizable>1</IsCustomizable>
<IntroducedVersion>1.0.0.0</IntroducedVersion>
<IsTabletEnabled>1</IsTabletEnabled>
<CanBeDeleted>1</CanBeDeleted>
<FormXml>
<forms type="dialog">
<form>
<formparameters>
<querystringparameter name="my_guid" type="SafeString" />
</formparameters>
<header id="{20A88883-CFD3-49AC-A0AC-7A5A5916B494}">
<rows>
<row>
<cell id="{B65D2006-F3EF-4A95-BAAC-AAA10F4CB370}">
<labels>
<label description="Withdraw Request" languagecode="1033" />
</labels>
<control id="FormHeader" classid="{39354e4a-5015-4d74-8031-ea9eb73a1322}" isunbound="true">
<parameters>
<IsTitle>true</IsTitle>
</parameters>
</control>
</cell>
</row>
</rows>
</header>
<tabs>
<tab id="{4096ED0D-B54B-4A90-8E14-6DE2F97EE1DF}" verticallayout="true" name="Tab">
<labels>
<label description="Tab" languagecode="1033" />
</labels>
<tabfooter id="{303f1bb7-3f05-423b-8b27-135b552b8375}">
<rows>
<row>
<cell id="{2535464d-171f-4833-9cfa-06e6c971bce3}">
<labels>
<label description="OK" languagecode="1033" />
</labels>
<control id="tab1footerok" classid="{00ad73da-bd4d-49c6-88a8-2f4f4cad4a20}" isunbound="true" />
</cell>
<cell id="{7B9024DA-67E3-48F6-A29D-90675D51A66D}">
<labels>
<label description="Cancel" languagecode="1033" />
</labels>
<control id="tab1footercancel" classid="{00ad73da-bd4d-49c6-88a8-2f4f4cad4a20}" isunbound="true" />
</cell>
</row>
</rows>
</tabfooter>
<columns>
<column width="100%">
<sections>
<section id="{EB813F55-D4A8-4A95-AF10-162655D9FB91}" showbar="false" columns="1" name="Section">
<labels>
<label description="Select a Reason for Withdrawal" languagecode="1033" />
</labels>
<rows>
<row>
<cell id="{28AB7101-C235-4DEF-A3A9-5B3915AE153A}">
<labels>
<label description="Status:" languagecode="1033" />
</labels>
<control id="new_statuscode" classid="{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}" isunbound="true">
<parameters>
<OptionSetName>new_statuscode</OptionSetName>
</parameters>
</control>
</cell>
</row>
<row>
<cell id="{28AB7101-C235-4DEF-A3A9-5B3915AE153B}">
<labels>
<label description="Reason:" languagecode="1033" />
</labels>
<control id="my_withdrawReason" classid="{3EF39988-22BB-4f0b-BBBE-64B5A3748AEE}" isunbound="true">
<parameters>
<OptionSetName>new_reasonsforwithdrawal</OptionSetName>
</parameters>
</control>
</cell>
</row>
</rows>
</section>
</sections>
</column>
</columns>
</tab>
</tabs>
<events>
<event name="onclick" application="false" active="false" attribute="tab1footerok">
<Handlers>
<Handler functionName="onClick_OK" libraryName="my_CustomDialog_Library.js" handlerUniqueId="{ADC7E877-6FDC-4404-8744-A85F607A5095}" enabled="true" parameters="" passExecutionContext="false" />
</Handlers>
</event>
<event name="onclick" application="false" active="false" attribute="tab1footercancel">
<Handlers>
<Handler functionName="onClick_Cancel" libraryName="my_CustomDialog_Library.js" handlerUniqueId="{124A0213-CE38-4F33-93C9-7D2B2BD83006}" enabled="true" parameters="" passExecutionContext="false" />
</Handlers>
</event>
</events>
<clientresources>
<isvresources>
<clientincludes>
<webresource type="jscript" path="$webresource:my_CustomDialog_Library.js" />
</clientincludes>
</isvresources>
</clientresources>
</form>
</forms>
</FormXml>
</Dialog>
</Dialogs>
Creating Option Sets
Define global option sets used in the dialog:
领英推荐
XML
<optionsets>
<optionset Name="new_statuscode" localizedName="Custom Status Code">
<OptionSetType>picklist</OptionSetType>
<IsGlobal>1</IsGlobal>
<IntroducedVersion>1.0.0.0</IntroducedVersion>
<IsCustomizable>1</IsCustomizable>
<ExternalTypeName></ExternalTypeName>
<displaynames>
<displayname description="Custom Status Code" languagecode="1033" />
</displaynames>
<Descriptions>
<Description description="" languagecode="1033" />
</Descriptions>
<options>
<option value="1" ExternalValue="" Color="#0000ff">
<labels>
<label description="Closed" languagecode="1033" />
</labels>
<Descriptions>
<Description description="" languagecode="1033" />
</Descriptions>
</option>
<option value="2" ExternalValue="" Color="#0000ff">
<labels>
<label description="Resolved" languagecode="1033" />
</labels>
<Descriptions>
<Description description="" languagecode="1033" />
</Descriptions>
</option>
</options>
</optionset>
</optionsets>
Advanced Customization
Implementing the Dialog with JavaScript
To handle the interaction, a TypeScript (or JavaScript) library is essential. This example demonstrates how to open and manage the dialog:
function OpenDialog() {
var options = {
// 'dialogName' is not a valid property. 'height' and 'width' are typically used.
height: 350, // specify height of the dialog
width: 600 // specify width of the dialog
};
var data = {
my_guid: (Xrm.Page.data.entity.getId()).replace(/[{}]/g, ''),
};
Xrm.Navigation.openDialog("CustomDialog", options, data).then(
function success() {
Xrm.Page.data.refresh(true);
},
function error(error) {
// console.error(error.message); // Log the error message to the console
alert("An error occurred: " + error.message); // Provide a user-friendly error message
}
);
}
function onClick_Cancel() {
Xrm.Page.ui.close();
}
function onClick_OK() {
return __awaiter(this, void 0, void 0, function* () {
debugger;
var inputParameters = {
requestId: Xrm.Page.data.attributes.get("my_guid").getValue(),
new_reasonforwithdrawal: Xrm.Page.data.attributes.get("my_withdrawReason").getValue(),
statuscode: Xrm.Page.data.attributes.get("new_statuscode").getValue()
};
});
};
My Dialog will look like this:
Conclusion
Creating custom dialog boxes in Dynamics 365 CE can significantly enhance user interactions and streamline workflows. Custom dialogs enhance user experience by providing tailored interfaces for specific tasks. However, they require careful planning and detailed configuration to ensure alignment with the underlying data model and business logic.
I hope you found this article useful and informative. I would love to hear your feedback, thoughts, or suggestions. You can contact me at [email protected] or send me a message on LinkedIn Komal Ridda Malik.
Happy reading!
Dynamics 365 Senior Technical Solutions Architect at Hitachi Solutions Asia Pacific
4 个月pls check this link: https://www.dhirubhai.net/pulse/dataverse-dialog-builder-ph%C6%B0%E1%BB%9Bc-l%C3%AA-v%C4%83n-005dc/ https://github.com/phuocle/Dataverse-Dialog-Builder