1- Download the solution in your environment
{
"icon": "success",//warning //error
"labels": [
{ "text": "Activation Succeeded", "type": "h1" },
{
"text": "Enter customer name and email to submit the request to the next stage",
"type": "h2",
},
],
"inputs": [
{
"id": "customername", //used to get the value when the modal object is returned
"label": "Customer Name",
},
{
"id": "customeremail",
"label": "Customer Email",
},
],
"buttons": [
{
"id": "button-cancel", //used to know what button was clicked, retunred with modal return object
"label": "Cancel",
"type": "white", //blue //red
},
{
"id": "button-submit",
"label": "Submit",
"type": "blue",
},
],
}
let pageInput: Xrm.Navigation.PageInputHtmlWebResource = {
pageType: "webresource",
webresourceName: "vite_/viteapps/pages/modals.html",
data: JSON.stringify(modalJsonObject), //modalJsonObject, pass your json object here
};
let navigationOptions: Xrm.Navigation.NavigationOptions = {
target: 2, // 2 is for opening the page as a dialog.
width: 400, // default is px. can be specified in % as well.
height: 500, // default is px. can be specified in % as well.
position: 1, // Specify 1 to open the dialog in center; 2 to open the dialog on the side. Default is 1 (center).
title: "Record activation modal", //recommended to enter title here
};
Xrm.Navigation.navigateTo(pageInput, navigationOptions).then(
function success(returnedValues) {
console.log(returnedValues);
/*
Return values object comes in the below format
{
inputs:object //holds the inputs and what the user filled them in with, you can get them by using the input id as the identifier
clickedButton:string // the id of the button the user clicked
}
for the above example you can get your inputs like the below
*/
let clickedButton = returnedValues.clickedButton; //if the user clicked on submit button it will return "button-submit"
let customerName = returnedValues.inputs["customername"]; //returns what user filled in the customer name input
let customerEmail = returnedValues.inputs["customeremail"]; //returns what user filled in the customer email input
},
function error(e) {
// Handle errors
}
);
{ "icon": "success",//warning //error "labels": [ { "text": "Activation Succeeded", "type": "h1" }, { "text": "Enter customer name and email to submit the request to the next stage", "type": "h2", }, ], "inputs": [ { "id": "customername", //used to get the value when the modal object is returned "label": "Customer Name", }, { "id": "customeremail", "label": "Customer Email", }, ], "buttons": [ { "id": "button-cancel", //used to know what button was clicked, retunred with modal return object "label": "Cancel", "type": "white", //blue //red }, { "id": "button-submit", "label": "Submit", "type": "blue", }, ], }