Modal alert/ confirm/ and error DIALOG in Dynamics 365

Follow my blog for more interesting topics on Dynamics 365, Portals and Power Platform. For training and consulting, write to us at info@xrmforyou.com


Working currently on a client engagement on the latest Dynamics version (v9.0) and hence got a chance to the new introduced Client API’s with version 9.0.
For starters, the Xrm.Page has been deprecated with version 9.0 and a completely new set of API’s have come up with version 9.0 along with host of new features.
For a list of deprecated API’s – https://docs.microsoft.com/en-us/dynamics365/get-started/whats-new/customer-engagement/important-changes-coming#some-client-apis-are-deprecated

So coming back to the requirement here, if you have worked on Client API’s, chances are more that you have worked with Xrm.Utility namespace. Showing alerts/ confirmations/ opening entity forms/ webresources – what not can we do with the namespace.
However there was a problem. Xrm.Utility.alertDialog/ Xrm.Utility.confirmDialog still used to leverage the window.alert/ window.confirm for a web client. The result is – customer always complained about the look and feel of the pop-up. And also the ability to customize the contents of the same.
Well no-more. Now you have complete control on these. Excited? Let’s explore together.
1. Xrm.Navigation.openAlertDialog
The previous Xrm.Utility.alertDialog has been replaced with this new API. So let’s  see how to open an alert dialog using this function.
var message = { confirmButtonLabel: “Test Button“, text: “New alert API Test” };
var alertOptions = { height: 150, width: 280 };
Xrm.Navigation.openAlertDialog(message, alertOptions).then(
function success(result) {
console.log(“Alert dialog closed”);
},
function (error) {
console.log(error.message);
}
);

Wonderful isn’t it? You get an option to even choose the button text. And even more is the flexibility to choose the height and width.


Now let’s see how it renders.
image
Such a relief to the eye from the previous versions. And what a relief to the customers!
2. Xrm.Navigation.openConfirmDialog
This is the new version of the previous API – Xrm.Utility.confirmDialog.
Let’s see how to invoke it
var confirmStrings = { text:”This is a confirmation.”, title:”Confirmation Dialog”, subtitle: “test subtitle”, “cancelButtonLabel”: “Test Cancel”, confirmButtonLabel: “Test Confirm” };
var confirmOptions = { height: 200, width: 500};
Xrm.Navigation.openConfirmDialog(confirmStrings, confirmOptions).then(
function (success) {
if (success.confirmed)
console.log(“Dialog closed using OK button.”);
else
console.log(“Dialog closed using Cancel button or X.”);
});

As you can see, you can put title/ subtitle/ text/ cancelButtonLabel/ confirmButtonLabel and also the height and width. The complete rendering of the pop-up is now in your hands.
And now let’s see how it looks.
image
3. Xrm.Navigation.openErrorDialog
Well this is something new here. Let’s see first the nomenclature of this function. As per Microsoft Documentation
Xrm.Navigation.openErrorDialog(errorOptions).then(successCallback,errorCallback);
The important thing here is errorOptions. So let’s first explore that.
What are the parameters here:

  • details: Any custom details you want to include in the error. If you specify this – “Download Log File” button would show up.
  • errorCode: Now this is wonderful. If you specify this, the message for the corresponding errorCode is retrieved from the server and shown.
  • message: this is the custom message that you want to display in the dialog.

var errorOptions = {message: “Custom Error Message”, details: “Inner exception details”};
Xrm.Navigation.openErrorDialog(errorOptions).then(
function (success) {
console.log(success);
},
function (error) {
console.log(error);
});


Below is the UI I get. strangely enough, the custom error message is not displayed. However if I download the log file, the details are in the log file.
image
Log file:
image
Hope this helps!
Debajit Dutta
(Dynamics MVP)
For training/ consulting/ utilities – please visit our website – www.xrmforyou.com or write to us at info@xrmforyou.com